Suche Slider, der es erlaubt über eine Pfeiltaste eine zweite Seite anzusteuern

theres schrieb am 20.10.2014 um 15:56 Uhr

Ich benutze den Webdesigner 10 Premium und suche für eine Präsentationswebseite (wird nur über Pfeile gesteuert und zwar horizontal)  einen Slider, der auch nur über Pfeiltasten einen Art Unterseite  (also vertikal) ansteuern kann. Ich habe schon im Vorlagenpaket gesucht, aber nichts gefunden. Hat jemand einen Tipp?

Kommentare

BeRo schrieb am 20.10.2014 um 19:06 Uhr

In den Vorlagen gibt es das AFAIK nicht. Du kannst die Funktion aber selbst "bauen'", wenn Du den Inhalt der horizontal scrollenden Seiten z. B. mit fixiertem Inhalt (Hintergrund) anlegst. Dann kannst Du auf den einzelnen Seiten den Inhalt einer weiteren Seite einblenden, die nach einem Klick auf einen Pfeil-Button, die zusätzliche Seite in die bestehende Seite hineingleiten lässt.

Wie eine so erstellte Seite aussehen kann, das siehst Du hier (Website des Monats August).

Das ist sicher nicht mit 2.3 Mausklicks zu machen, das Ergebnis ist aber ebenso sicher eine "kleine" Mühe wert...

Viel Erfolg

Zuletzt geändert von BeRo am 20.10.2014, 19:07, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 20.10.2014 um 19:32 Uhr

Dann kannst Du auf den einzelnen Seiten den Inhalt einer weiteren Seite einblenden, die nach einem Klick auf einen Pfeil-Button, die zusätzliche Seite in die bestehende Seite hineingleiten lässt.

Danke BeRo, aber da ich da noch nicht so fit bin  (vor allem mit den Ebenengalerien) meine Nachfrage zur Vorgehensweise:

1. neue Seite mit bestimmten Hintergrund anlegen (z.B. bestimmte Farbe wie bei Webseite August) und mit Text und Bildern bestücken?

und dann? Mit der Mouse-off Ebene der "Hauptseite" als weiche Gruppe verbinden???

Sorry, ich steh momentan auf dem Schlauch...

 

 

 

BeRo schrieb am 21.10.2014 um 00:17 Uhr

[...] und dann? [...] ich steh momentan auf dem Schlauch... [...]

Vielleicht machst Du es Dir nur komplizierter, als es in Wirklichkeit ist...

Schau Dir mal diese Demo an, die ich gerade mit der heißen Nadel "gestrickt" habe. Da ist vermutlich schon alles enthalten, was Du gesucht hast.

  • Mit den Pfeil Buttons kannst Du endlos durch die (3) Seiten surfen.
    Auf der letzten Seite führt der Pfeil nach rechts wieder auf die erste Seite zurück und vice versa.
  • Mit dem Pfeil nach unten (auf der ersten Seite) lässt Du eine Zusatzinfo von unten in die Seite hereingleiten.

Die zugehörigen Projektdateien (ja, es sind mehrere) kannst Du Dir hier herunterladen.

Ich gehe mal davon aus, dass Du nicht auf Anhieb siehst, wie es funktioniert. Damit es heute nicht zu spät wird, können wir die noch fehlenden Details dann gerne morgen noch klären.

Einstweilen gerne viel Erfolg beim Experimentieren

 

Zuletzt geändert von BeRo am 21.10.2014, 00:17, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 21.10.2014 um 16:04 Uhr

Vielen Dank BeRo für deine Antwort und die bereitgestellten Projektdaten. Aber wie du richtig vermutet hast, hänge ich nun wieder, weil ich nicht mehr weiter komme.

Ich habe mir das Tutorial über "fixierte Projekte" angeschaut, da du bei deinen Projektdaten ja auch eine !FixedTab-Ebene eingebaut hattest. Aber sowohl bei deinen Projektdaten als auch in dem Tutorial verschwindet die "Hauptseite" ja nicht, sondern wird durch teilweise "neue Daten" ergänzt. Im Tutorial werden nun Teile der "Hauptseite" in diese fixierte Ebene geschoben, damit sie immer sichtbar sind.

Meine Frage nun: Muss ich diese komplette "Unterseite" (ich nenne sie mal so, weil sie bei der Webseite August ja über einen nach unten gerichteten Pfeil angewählt wird) in diesem "!FixedTab" anlegen?

BeRo schrieb am 21.10.2014 um 17:36 Uhr

[...] da du bei deinen Projektdaten ja auch eine !FixedTab-Ebene eingebaut hattest [...]

Nööö

Bist Du sicher, dass Du die richtige Projektdatei heruntergeladen hast?

[...] Muss ich diese komplette "Unterseite" [...] in diesem "!FixedTab" anlegen? [...]

Nein, weil diese Ebene für meinen Lösungsvorschlag nicht erforderlich ist und sie auch in der online Demo nicht existiert...

Wenn Du die richtige ZIP Datei heruntergeladen hast, dann hast Du darin 2 Projektdateien gefunden:

  1. Die Datei "arrownav.web"
    In der Datei sind alle (3) Seiten des Hauptprojekts enthalten, die über die Pfeiltasten horizontal gescrollt werden können.
     
  2. Und die Datei "produkte.web"
    In der Datei ist nur eine Seite enthalten ("produkte.htm"), die über den Pfeil nach unten Button eingeblendet wird.

Am besten öffnest Du beide Projekte zeitgleich mit dem WD, damit Du auf alle Seiten Zugriff hast.

 

Im Projekt "arrownav.web" siehst Du auf der Seite "index" u. a. die Ebene "prod-info", auf der ich einen Platzhalter angelegt habe, der einen iframe Code enthält für die einzublendende Seite "produkte.htm".

Der Platzhalter ist so groß angelegt, dass er den oben blau markierten Bereich komplett abdeckt. Das ist eine Größe von 895 x 500px.

Der iframe Code sieht so aus:

---------------------------------
<iframe src="./produkte.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Ihr Browser unterstützt keine iframes.</p></iframe>
--------------------------------

Der Pfeil nach unten Button (Seite "index") blendet nach einem Klick, die Seite "produkte.htm" in den Platzhalter ein:

Die eingeblendete Seite "produkte.htm" hat ihrerseits einen Pfeil aufwärts Button, der nach einem Klick die Hauptseite neu startet und damit dafür sorgt, dass die eingeblendete Seite wieder verschwindet...

Wichtig ist, dass Du bei der Verlinkung darauf achtest, dass die verlinkte Seite im "Elternfenster" geöffnet wird. Dazu stellst Du die Eigenschaft "Öffnen in" auf "parent" ein s. Screenshot.

 

Wenn Du alles soweit realisieren kannst, bist Du schon fast fertig.

Nur "fast", weil es noch Verbesserungsmöglichkeiten gibt. Du könntest z. B. die eingeblendete Ebene mit dem "Lock" Attribut versehen, damit sie nicht unabsichtlich geschlossen werden kann. Oder Du könntest den Pfeil aufwärts Button auf der Produkte Seite in eine !FixedTab Ebene legen, damit er beim Scrollen der Unterseite permanent sichtbar bleibt. Usw.

Fürs Erste sollte Dir das oben Gesagte aber "Übungsstoff" genug geben.

Viel Erfolg

Zuletzt geändert von BeRo am 21.10.2014, 17:36, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 21.10.2014 um 18:11 Uhr

Danke BeRo,

ich habe das Richtige heruntergeladen, aber falsch interpretiert , ich dachte, dass dieser HTML Platzhalter in der Prod-info dieses !FixedTab sei, diese Turorial hatte ich gelesen als ich nach einer Lösung für mein Problem hier im Forum herumgesucht hatte.. So geht's, wenn man keine Ahnung hat...

Deshalb noch einmal zum Verständnis für mich die Frage: Diese einzublendende Seite muss seperat vom bisherigen Projekt angelegt werden?  (So wie bei dir die Datei arrownav.web und produkte.web).

Ich habe hier auch schon mal eine Anwendung gefunden, wie ich sie will , leider ohne Anleitung, wie man sie baut: http://bildermacher.magix.net/wsm/#xl_xr_page_index

Um weiterzukommen muss ich jetzt mal nur noch wissen, ob ich da zwei Projekte daraus machen muss...

Danke!!!

 

 

BeRo schrieb am 21.10.2014 um 18:58 Uhr

[...] muss ich jetzt mal nur noch wissen, ob ich da zwei Projekte daraus machen muss [...]

Ja, Du musst.

Das ist in dem Demo Projekt aber nur nötig, weil die Seiten der Hauptseite horizontal scrollen. In dem Fall erzeugt der WD beim Export/Upload automatisch eine einzige HTML Datei, die "index.htm", in der alle anderen Seiten enthalten sind.
Das hat den Nachteil, dass Du die eigentlich zum Projekt gehörende Seite "produkte.htm" nicht mehr gezielt über einen iframe Code ansprechen kannst, um sie z. B. in einen Platzhalter einzubinden.
Daher also das 2. Projekt "produkte.web", mit dem die Seite wieder als separate Datei erzeugt wird.

[...] Ich habe hier auch schon mal eine Anwendung gefunden, wie ich sie will [...]

In der von Dir verlinkten Demo, die @BilderMacher online gestellt hat, wird ein anderes Verfahren benutzt, das ähnlich dem ist, das in der Website des Monats August verwendet wird.

In beiden Fällen wird mit einem browserfüllenden, fixierten Hintergrundbild gearbeitet, auf dem Seiteninhalte eingeblendet werden, wenn ein Pfeil Button geklickt wird.

Wenn das die Lösung ist, die Du suchst, kannst Du Dir mal diesen Thread durchlesen. Da findest Du (auf 2 Seiten verteilt) eine Anleitung, mit der Du so einen Hintergrund erstellen kannst.
Der Inhalt anderer Seiten, die im selben Projekt angelegt werden, kann ganz ähnlich eingeblendet werden, wie Du es hier in Deinem Thread kennengelernt hast...

Viel Erfolg

Zuletzt geändert von BeRo am 21.10.2014, 18:58, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 21.10.2014 um 21:29 Uhr

Ich verstehe nur noch nicht, wie man die beiden Projekte zusammenbringt, weil sie ja als EINE Webseite exportiert werden müssen... (über Filezilla).

Wenn man mehr wie eine Seite  der horizontalen Webseite mit solchen "Unterseiten" überblenden will, braucht man dann für jede dieser Seiten ein eigenes Projekt?

 

 

BeRo schrieb am 22.10.2014 um 00:06 Uhr

[...] weil sie ja als EINE Webseite exportiert werden müssen... (über Filezilla). [...]

Dem ist nicht so...

Die Veröffentlichung Deiner Teilprojekte ist zwar auch mit dem WD problemlos machbar, wenn Du aber FileZilla bevorzugst ist die Veröffentlichung natürlich auch damit möglich. Dabei ist es FileZilla total egal, wie viele Dateien Du wohin verschiebst. Du kannst also durchaus die exportierten Dateien aus zwei verschiedenen Projekten in ein einziges Verzeichnis auf dem Webserver speichern. Genau das (2 verschiedene Websites) ist für unser Beispiel ja auch nötig.

Dabei ist es nur wichtig, dass die Startdateien der Projekte verschiedene Namen haben. In unserem Beispiel ist es so, dass die Startdatei des Hauptprojekts „arrownav.web“, "index.htm" heißt. Die Startdatei des Projekts "produkte.web" heißt "produkte.htm".

Da Dein Gesamtprojekt aus mehreren Einzelprojekten besteht, musst Du unbedingt dafür sorgen, dass eine Startdatei "index.htm" heißt. Alle anderen Namen kannst Du frei vergeben. die Seitennamen der unterschiedlichen Projekte dürfen natürlich nicht doppelt vorkommen, da ja alle exportierten Seiten in einem Verzeichnis auf dem Webserver liegen müssen...

[...] braucht man dann für jede dieser Seiten ein eigenes Projekt? [...]

Nein. Du kannst alle Seiten, die Du als Unterseiten in Seiten des Hauptprojekts einblenden willst, in einem einzigen, zusätzlichen Projekt anlegen.
Klar, dass diese Unterseiten autark sein müssen. Sie dürfen also keine Navigationsleiste bekommen, über die sie untereinander verlinkt sind.

Alle Klarheiten beseitigt?

Viel Erfolg

Zuletzt geändert von BeRo am 22.10.2014, 00:06, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 22.10.2014 um 00:14 Uhr

Danke BeRo, aber...

ich habe in meinem Projekt jetzt die Ebene "Prod-info" angelegt (die bei mir natürlich anders heißt). Du hast angegeben, dass sie(bei dir) die Größe 895 x 500 px hat und damit genau in die "Lücke" der Hauptseite passt. Aber wie mache ich das, da ich ja einen browserfüllenden Platzhalter brauche?

Zusatzfrage: Deine Demo-Seite funktioniert in der Webseitenvorschau nicht, oder?

BeRo schrieb am 22.10.2014 um 00:52 Uhr

[...] Aber wie mache ich das, da ich ja einen browserfüllenden Platzhalter brauche? [...]

Vermutlich brauchst Du nur einen Platzhalter, dessen Hintergrund nicht sichtbar ist?

Wenn Dein Projekt so aussehen soll, wie in der "Website des Monats August" gezeigt, musst Du grundsätzlich anders vorgehen. Dann kannst Du das bisher Gesagte zu einem großen Teil nicht sinnvoll verwenden.

[...] Deine Demo-Seite funktioniert in der Webseitenvorschau nicht, oder? [...]

Doch, schon...

Sie funktioniert in der Vorschau, wenn Du vorher beide Projekte in ein Verzeichnis exportierst. Nur dann kann der Verweis auf die eingeblendete Seite "produkte.htm" sein Ziel finden...

Zuletzt geändert von BeRo am 22.10.2014, 00:52, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 22.10.2014 um 00:58 Uhr

 

Vermutlich brauchst Du nur einen Platzhalter, dessen Hintergrund nicht sichtbar ist?

Wenn Dein Projekt so aussehen soll, wie in der "Website des Monats August" gezeigt, musst Du grundsätzlich anders vorgehen. Dann kannst Du das bisher Gesagte zu einem großen Teil nicht sinnvoll verwenden.

Nein???? Gibt es eine andere Lösung????

 

 

BeRo schrieb am 22.10.2014 um 09:40 Uhr

Dein "Nein" bezieht sich auf 2 Vermutungen, die ich in meinem Posting von 0:52h geäußert hatte.

Bleibt die Frage: Was genau möchtest Du erreichen. Wie soll Deine fertige Seite also genau aussehen?

Da bin ich jetzt echt gespannt

CU

Zuletzt geändert von BeRo am 22.10.2014, 09:40, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 22.10.2014 um 10:47 Uhr

Hallo BeRo,

mein "NEIN" war ein Ausdruck des Entsetzens, weil ich schon dieses 2. Projekt mit den verschiedenen Unterseiten angelegt hatte und bezog sich auf deine zweite Äußerung mit dem "grundsätzlich anders vorgehen".

Meine Vorstellung war schon eine Webseite zu versuchen, die sich an der Webseite des Monats August orientiert. Dazu gehören folgende Merkmale:

1. Kein Navigationsmenü, also eine Präsentation, gesteuert durch Pfeiltasten

2. Hauptseiten werden horizontal angesteuert.

3. Zu jeder Hauptseite gibt es eine "Unterseite", die per Pfeil über die jeweilige Hauptseite angesteuert wird (DAS IST WOHL DER PROBLEMFALL ) und die Hauptseite VÖLLIG überdeckt. Hier ist die Einblendrichtung vertikal.

4. Das Impressum soll auf jeder Seite als verlinkter Schriftzug zu sehen sein und auf eine Seite "Impressum" verweisen, wie das bei der Webseite August mit dem Nachweis der verschiedenen Fotos geschehen ist...

Diese August-Webseite wurde doch angeblich mit dem Magix Webdesigner 10 gefertigt. Gibt es dazu von Magix nirgends Hinweise, wie sie "gebaut" wurde? Oder wird das von Magix als eine Art Rätsel behandelt - nach dem Motto "wer findet die Lösung?"

BeRo schrieb am 22.10.2014 um 18:22 Uhr

[...] Gibt es dazu von Magix nirgends Hinweise, wie sie "gebaut" wurde? [...]

AFAIK Nein.

Die Vorstellung von Websites, die aus der allgemeinen Darstellung herausragen, soll ja vermutlich auch nicht mehr sein, als die Präsentation von besonderen Ideen bei der Website Gestaltung.
Ein Tutorial zum Nachbau wird (leider) an keiner Stelle versprochen. Trotzdem ist es mit ein bisschen "Tipparbeit" machbar, das Gezeigte mit dem Bordwerkzeug des WD10 prem. zu realisieren.

Die Hauptseiten der Website des Monats August bestehen im Wesentlichen aus den Hintergrundbildern, die mit dem Attribut "Browserfenster füllen" versehen werden, damit sie in jedem Fall das Browserfenster zu 100% ausfüllen.

Ansonsten werden die Haupt- und die Unterseiten ganz normal gestaltet, mit Ausnahme der üblichen Navigationsleiste, die komplett entfällt und durch einzelne Pfeil Buttons ersetzt wird.

Damit nach einem Klick auf einen Pfeil Button die folgende/vorherige Seite hereingleitet und nicht einfach "hereinplatzt", muss die Option Seitenübergänge gesetzt werden, z. B. auf "von rechts hereingleiten"

 

Die Unterseiten (die prinzipiell ja ebenfalls "Hauptseiten" sind)  können beliebig gestaltet werden, was sowohl das Layout- als auch den Inhalt betrifft. Auch Slideshows-, Videos-, Multimedia Player etc. sind möglich.

Der Hintergrund "Pasteboard background" kann für diese Seiten einfarbig gefüllt werden, damit eine Abgrenzung zu den Hauptseiten erkennbar wird.

Für die Unterseiten ist der Effekt "von unten hereingleiten" sinnvoll, da sie nach einem Klick auf einen "Pfeil nach unten" Button eingeblendet werden.

Mit der Einstellung wird für diese Seite die Grundeinstellung "von rechts hereingleiten" überschrieben, die wir anfangs eingestellt haben.

Jetzt fehlt nur noch die Verlinkung der Pfeil Buttons.

  • Die nach rechts/links zeigenden Pfeile bekommen jeweils einen Link auf die nächste/vorige Hauptseite.
  • Die nach unten zeigenden Pfeile bekommen je einen Link auf die passende Unterseite
  • Die nach oben zeigenden Pfeile der Unterseiten bekommen je einen Link auf die zugehörige Hauptseite

Das war's schon.

Also, kein Hexenwerk!

Hier gibt's die online Demo und hier kannst Du die Projektdatei herunterladen.

Viel Spaß beim Nachbau

Zuletzt geändert von BeRo am 22.10.2014, 18:39, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

theres schrieb am 22.10.2014 um 18:56 Uhr

Das klingt ja ganz einfach!!! Das werde ich probieren. vielen, vielen Dank!!!