P U Z Z L E - K U R S
Lochkamera - FotoStart - Projekte
 
 
B E I S P I E L
Blumen
Die Sonnen-Blumen von Emil Nolde
P U Z Z L E S
Link-Liste
Gibt es auch noch andere Lösungen?
K O M P E T E N Z
Wepuzzle4you
Wir entwickeln Ihnen eins mit Ihrem Bild.
   
 

 
 
Bauen Sie sich ihr eigenes Puzzle
Hier zeigen wir Ihnen in 4 Schritten, wie Sie von Ihrer eigenen Bildvorlage ein Frame-Puzzle aufbauen können. Es besteht aus einem Grundaufbau mit 12 Frames in drei Reihen und vier Spalten, in die 12 HTM-Dateien geladen werden, die jeweils ein Teil-Bild enthalten. Durch geschickt gesetzte Hyperlinks werden die Teil-Bilder austauschbar.
Geeignet sind Bilder, die in jedem Quadranten eine spezifische Struktur besitzen, sonst wird es schnell langweilig. Achten Sie bitte auch auf geeignete Überlappungen zwischen den Einzelbildern, damit der Anzeiz erhöht wird, es zusammenzusetzen.
Jedes Einzelbild dieses Puzzles hat die Größe von 120 x 120 Pixeln, das Puzzle ist also insgesamt 480 Pixel breit und 360 Pixel hoch. Sie können die Struktur und die Größe natürlich ändern, aber dann müssen Sie auch die HTM-Dateien ändern. Ein wenig Erfahrung im Umgang mit HTM-Dateien und einem Bildverarbeitungsprogramm sollten Sie haben.
 
 

 
 
S C H R I T T   1:
Dateien anlegen
Zuerst legen Sie sich am besten einen neuen Ordner an. Darin legen Sie mehrere neue HTML-Dateien an:

Die Start.htm ist eine Frame-Seite mit 12 breitendefinierten Frames in drei Reihen (1,2,3) und vier Spalten (A,B,C,D). In die 5. Spalte (*) und 4. Reihe (*) wird eine Blinddatei (00.htm) geladen.
Innerhalb der breitendefinierten Zellen lädt jeder Frame eine bestimmte HTML-Datei, die wiederum ein bestimmtes Einzelbild enthält.

Die Zuordnung ist nun folgende:
A1.htm enthält Bild 1 mit Hyperlink auf D2.htm
A2.htm enthält Bild 2 mit Hyperlink auf D3.htm
A3.htm enthält Bild 3 mit Hyperlink auf D1.htm
B1.htm enthält Bild 4 mit Hyperlink auf A2.htm
B2.htm enthält Bild 5 mit Hyperlink auf D3.htm
B3.htm enthält Bild 6 mit Hyperlink auf A1.htm
C1.htm enthält Bild 7 mit Hyperlink auf B2.htm
C2.htm enthält Bild 8 mit Hyperlink auf B3.htm
C3.htm enthält Bild 9 mit Hyperlink auf B1.htm
D1.htm enthält Bild X mit Hyperlink auf C2.htm
D2.htm enthält Bild Y mit Hyperlink auf C3.htm
D3.htm enthält Bild Z mit Hyperlink auf C1.htm

Außerdem brauchen Sie noch eine 00.htm, die nichts enthält.

Start.htm:
<frameset rows="120,120,120,*">
<frameset cols="120,120,120,120,*">
<frame src="A1.htm" name="A1">
<frame src="B1.htm" name="B1">
<frame src="C1.htm" name="C1">
<frame src="D1.htm" name="D1">
<frame src="00.htm" name="00" >
</frameset>
<frameset cols="120,120,120,120,*">
<frame src="A2.htm" name="A2">
<frame src="B2.htm" name="B2">
<frame src="C2.htm" name="C2">
<frame src="D2.htm" name="D2">
<frame src="00.htm" name="00">
</frameset>
<frameset cols="120,120,120,120,*">
<frame src="A3.htm" name="A3">
<frame src="B3.htm" name="B3">
<frame src="C3.htm" name="C3">
<frame src="D3.htm" name="D3">
<frame src="00.htm" name="00">
</frameset>
<frameset cols="120,120,120,120,*">
<frame src="H2.htm" name="H1">
<frame src="H2.htm" name="H1">
<frame src="H2.htm" name="H1">
<frame src="H2.htm" name="H1">
<frame src="00.htm" name="00">
</frameset></frameset>
 
 

 
 
S C H R I T T   2:
Bild aufteilen in 12 Einzelbilder
Bringen Sie Ihr Bild auf genau 480 Pixel Breite und 360 Pixel Höhe und kopieren sich die einzelnen Teil-Bilder heraus. Jedes dieser Teil-Bilder muss exakt an das danebenliegende passen (verwenden Sie Hilfslinien) und genau 120 x 120 Pixel groß sein. 
 
 

 
 
S C H R I T T   3 :
Einzelbilder optimieren und abspeichern
Wichtig dabei ist die Reihenfolge der Dateinamen für Ihre Bildteile: Gehen Sie zeilenweise vor, Bild 1 ist oben links, rechts daneben Bild 2 usw. Das linke untere Bild ist also Bild 9. Diese Namen müssen identisch sein mit den Namen der referenzierten Dateien in den jeweiligen HTM-Dateien.
 
 

 
 
S C H R I T T   4 :
Datei-Struktur anlegen
Legen Sie die HTM-Dateien in einen Ordner PUZZLE und alle Bilder in ein Unterverzeichnis BILDER. Dann können Sie nach belieben die Bilddateien austauschen (gleiche Namen), wenn Ihnen ein noch besseres Motiv einfällt, ohne die Struktur und die HTM-Dateien sowie die Referenzierung ändern zu müssen.
...MEIN_WEB /  ... PUZZLE  ... BILDER
Start.htm A1.htm
A2.htm
A3.htm
B1.htm
...
D3.htm
00.htm
alle Bild-Dateien
1.gif
...
Z.gif
 
 
S C H R I T T   5 :
Verzeichnis in HTML-Seiten einbinden
Kopieren Sie sich nach der Funktions-Prüfung das gesamte Verzeichnis Puzzle und die START.HTM an den gewünschten Platz und Frame Ihrer Site. Viel Spaß.
 
 
Puzzle-Links
Falls Sie von anderen interessanten Lösungen für Puzzles finden, wir bauen gerade eine Link-Liste auf. Eintrag in Liste
wepuzzle4you
Wir erstellen Ihnen ihr eigenes Online-Puzzle zum Festpreis von EUR 100. Schicken Sie uns einfach eine geeignete Vorlage, wir liefern Ihnen dann Ihr persönliches Puzzle für Ihre Home-Page.  eMail-Kontakt
 
 

 
 
N E T S C A P E - F E H L E R 
Nahtloses Frame-Puzzle: Und es geht doch !
Bisher zeigte Netscape zwischen zwei Frames immer eine dünne Linie. Bei unserem Puzzle-Projekt erwies sich das als äußerst störend. Durch einen kleinen Trick im ersten body-Tag jeder Seite (<body marginwidth="0" marginheight="0"> ) lässt sich das umgehen. Als Beispiel sei hier auf unser Profi-Puzzle für Fortgeschrittene verwiesen: Puzzle
 
 

 © 2001- 2003 Manfred Baierl / GAMB