Objekte auf Webpage beliebig platzieren? (low-fidelity)

[McKofFly]

Hallo, wie ist es möglich, mittels HTML Objekte wie Textfelder, Bilder, usw beliebig zu platzieren ?

Es geht darum, ich habe im Grunde mehrere Bilder, aus welchen ich ein Low-Fidelity-Prototyp bauen möchte, eine PowerPoint Präsentation aus HTML sozusagen. Die Homepage soll dann interaktivitat vortäuschen, ohne sie jeweils bieten.

Aussehen soll das ganze wie eine Smartphoneapp und alle Grafiken liegen mir schon vor.
Als Beispiel könnte, ich angeben:
Startseite Smartphone App:
Hintergrundbild stellt ein Smartphone dar, auf dem Bildschirm ist folgendes zu sehen.

Textbox "Anmeldename"
Textbox "Passwort"
Checkbox "Login speichern"
Login Button
3 weitere Buttons (Hilfe, Info,...)

Das erstellen ist kein Problem, wie aber kann ich diese Boxen usw. aber frei platzieren? Habe es bis jetzt so gemacht, das ich eine Tabelle über das Hintergrundbild gelegt und dort die Boxen usw. eingefugt habe. Geht aber nicht wirklich so gut.

Ich hoffe ich konnte mein Problem etwas verstandlich erläuterten?!
Kann man zudem vielleicht eine "unsichtbare" Box definieren (Größe...px mal ...px, an Position soundso), welche anklickbar ist und die weiter verlinkt auf die nachste Seite?

 

[McKofFly]

Hier mal wie ich mir das vorstelle .... wie könnte ich das am einfachsten umsetzen? Eingegebener Anmeldename sowie PW sollen beliebig sein, also man sollte was reinschreiben können, wobei der Inhalt egal ist, ein klick auf Login, würde einfach zum 2. Bild, bzw. zur nächsten *.html weiterleiten




Das Problem ist, wenn ich mehrer Bilder einfüge und plazieren mit "hspace" und "vspace" verschieben sich die Bilder, welche ja schon plaziert sind, wieder. In gezeigen Fall wären es 6 Bilder, welche zu plazieren werden (Anmeldename, PW können auch ein Bild sein)...

 

[navraju]

Ich würde das über 'table' machen. Zellen verbinden

7 Zellen breit und 11 o. 12 Zellen hoch.

Das Hintergrundbild in passende Stücke zerschneiden.

Als Zellenhintergrund das entsprechende Stück vom Hintergrundbild auswählen.

fertig.

Natürlich führen viele Wege nach Rom. Man könnte auch mit Layer arbeiten und das Hintergrundbild irgendwo positionieren und
dann die Bottons und Inputfelter mit CSS Layer positionieren indem man x und y Achsen definiert.

Ist halt alles Geschmackssache.

 

[McKofFly]

Vielen Dank erstmal für die Antwort

Das mit der Table hatte ich ja (fast) auch schon angefangen, das Hintergrundbild zu zerlegen ist eine gute Idee ... leider aber müsste ich dann für jede weitere "Seite" eine neue Tabelle anlegen und wieder neu schneiden - ich weiß nicht wann ich dann fertig werden würde - das ist dann nix mehr mit "low-fidelity" ^^

mit den CSS Layer könnte eine möglichkeit sein ... muss ich mal probieren ... gebe es denn noch andere möglichkeiten?

 

[MysticBinary82]

Über Stylesheets kannst du deine Elemente (ich würde mich da nicht zu sehr auf die Tabelle versteifen) ausrichten wie du magst (mit Limitierungen). Aber falls du wirklich ein Login machen willst kommst du nicht um PHP herum.

 

[McKofFly]

Ich habe das mit den CSS Layern mal probiert - scheint sehr einfach und für meine Zwecke brauchbar zu sein ... ich versuche da erstmal den Weg zu gehen

 

[kühlprofi]

mit divs?
Oder im Photoshop dein Bild Slicen und direkt als HTML inkl Bilder speichern.
Danach die Bilder welche von Photoshp automatisch in eine Tabelle eingefügt werden als Zellenhintergrund setzen.
Ich glaub in Photoshop hätt ichs in 2 Minuten ^^

 

[MysticBinary82]

Ja aber schau dir mal den Code an, der ist ja von vor web2.0 Zeit. Da musst du so viel drin rum schreiben, dass du auch von vorne anfangen kannst.

 

[McKofFly]

Also das mit den Slicen war ein super Tipp, hatte ich ganz vergessen diese Funktion!

Zum Thema "vor web2.0" ... das ist richtig, jedoch soll die erstellte Webpage keine Funktionen beinhalten und nur ganz beschränkte Funktionalität bieten (klickbare Bereiche, welche im Grund nur auf die nächste Seite führen - low-fidelity eben).

Ich danke euch für eure Hilfe!

 

[nay]

Auf jeden Fall mit CSS. Les dir dazu am besten ein Tutorial durch: CSS Box Model

Ich habe deine Smartphone app kurz skizziert: http://jsfiddle.net/nb8W4/16/