Umgang mit Slices

[Andy-Lee]

Hallooo....

Ich habe eine Website über Photoshop erstellt. Diese möchte ich auf einer HTML Seite folgendermaßen umsetzen:

5 Frames: Banner, Navigation, unten, rechts.... nur in der Mitte sollte man scrollen....

Die Website habe ich schon soweit in ImageReady mit Roll-Over Buttons besetzt...nun muss ich sicherlich den Rest in Slices einteilen...das Problem: muss ich die Slices dann über Tabellen auf der HTML Seiten zusammenfügen? Gibt es da irgendwelche Hilfsmittel für oder hat da evtl. jemand einige Tipps und Tricks für mich, wie ich das am Besten umsetze? Was ich jetzt schon gesehen habe ist, dass - wenn ich die in Tabellen setzte - jeweil ein Rand von ca. 0,5 cm drumrum bleibt...ist das normal...kann ich das nicht genau auf die Seite anpassen?? Fragen über Fragen und ich hoffe, mir kann da jemand weiterhelfen...

Habe übrigens schon probiert, die Sache über Tabellen einzubinden...klappt soweit gut. Leider klappt die Zusammensetzung der Frames überhaupt nicht - mir reißt es jedesmal die Site auseinander, obwohl ich in Photoshop mit eine Auflösung von 1000x600 - in Frontpage übrigens sieht das ganze völlig passend aus, im IE passt es überhaupt nicht mehr....


EDIT:
Es ist nicht gerade schön mit anzusehen, wie mein Thread hier unbeantwortet nach unten rutscht. Wer meint, ich hätte z.B. die Suchfunktion nicht benutzt, der irrt gewaltig: habe schon alles probiert, z.B. in den Tabellen 1x1 transparente Bilder auf die richtige größe skaliert usw. das klappt nicht.
Mal zu meinen Werten:
Bannerframe ist 150 x 1000
Navi: 370 x 150
unterer Frame: 80 x 1000
rechter Frame: 600 x 50

Habe also z.B im Bannerframe 2 Bilder in den Tabellen eingefügt. Eines mit einer breite von 1x1000 was den oberen Bereich der Tabelle streckt und links ein Bild 150x1 - die Framegröße hab ich in Frontpage mit 180 x 1000 definiert, wenn ich auf 150 x 1000 gehe, wird mein Banner so abgeschnitten, dass die Buttons unten nicht mehr zu sehen sind. Schau ich mir also die Größe 180 x 1000 im Browser an, passt das - wie gesagt - ebenfalls nicht: zum Einen bleibt rechts ein Stück frei, zum Anderen befindet sich auch unten eine Lücke...

Zum besseren Verständnis hier mal:

a) das Original
b) Webansicht in Frontpage (Screenshot)
c) Webansicht im Browser (Screenshot)

Wer kann mir hier weiterhelfen????

[Andy-Lee]

Ich freue mich wirklich, dass viele Threads beantwortet werden....meine Frage scheint aber sehr schwer zu sein...oder aber zu leicht? Ich benötige dringend Hilfe....es wäre also wirklich nett, wenn sich mal jemand erbarmen würde und mir zumindest mal ein Lebenszeichen geben könnte...

[Nightline]

So, auf dein Problem wirklich einzugehen wäre mir zu mühsam, aber ich kann dir sagen, wie ich eine Frameseite angehe:

Das Design hast du bereits im PS erstellt und die Frames mittels Hilfslinien abgegrenzt. SPEICHERN. Dann gehst du ins Imageready und stellst mal den ersten Frame vollkommen frei, machst dort die Rollover-Effekte und die Slices. Dann das Ganze noch optimieren und "Optimiert speichern unter" wählen. Damit ist mal die Tabelle für den ersten Frame erledigt, und vielleicht war das dein Problem, dass du die Frames nicht einzeln gemacht hast!?
Diese Schritte machst du dann mit den anderen Frames auch (immer auf die Größe beim Ausschneiden achten). Im Frontpage oder im Editor dann die Frames mit den abgespeicherten Tabellen füllen, Cellspacing und Cellpadding auf 0 stellen und es sollte funken.

[Andy-Lee]

hallo....

danke erstmal für die Hilfe, erledigt hat sich mein Problem dadurch jedoch nicht. Egal wie ich es entwickele, alles hat mit Größen-Definitionen zu tun...also ob ich eine Site in Frontpage in 1000x600 entwickele, sie dann Pixelgenau in Slices aufteile, um sie dann in Frontpage umzusetzen, oder aber zuerst beim Banner anfange, also 1000x150 usw. egal: Größe ist Größe...nichts desto trotz habe ich natürlich auch deinen Vorschlag ausprobiert: ohne Erfolg....ich gebe in Frontpage den Frame eine Höhe von 150 Pxl dennoch schneidet mir Frontpage ca. 20 Pxl von der gesamten unteren Seite weg. Gebe ich dem Frame 20 Pxl. dazu, Stimmen die anderen Seitenverhältnisse nicht mehr und alles gerät aus den Fugen....ich weiß ehrlich nicht mehr, was man da noch probieren kann und wäre dementsprechend über weitere Vorschläge überaus Glücklich *anfleh*

[Nightline]

Poste doch mal den Quelltext, den Frontpage nach dem speichern für das Frameset ausgibt.

[Andy-Lee]

Hi nochmal....
hier also mal der Code für das frameset

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>
</head>

<frameset rows="150,400,150" framespacing="0" border="0" frameborder="0">
  <frame name="banner" scrolling="no" noresize target="Inhalt" src="banner.htm" marginwidth="0" marginheight="0">
  <frameset cols="200,*">
    <frame name="navigation" target="Hauptframe" marginwidth="0" marginheight="0" scrolling="no" noresize src="navi.htm">
    <frame name="main" marginwidth="0" marginheight="0" scrolling="auto" src="start.htm">
  </frameset>
  <frame name="unten" scrolling="no" noresize target="Inhalt" marginwidth="0" marginheight="0" src="unten.htm">
  <noframes>
  <body>

  <p>Diese Seite verwendet Frames. Frames werden von Ihrem Browser aber nicht 
  unterstützt.</p>

  </body>
  </noframes>
</frameset>

</html>

Angehängt habe ich mal die gesamte Website....daraus wird das wohl ersichtlicher glaube ich.....

[Nightline]

Puuh... nicht einfach deine Seite... Du hast im Frameset ganz andere Größenangaben im Vergleich zu den tatsächlichen Größen der Grafiken, daran wirds wahrscheinlich auch scheitern.
Dann ist der Quellcode der Seiten eine einzige Katastrophe, typisches Frontpage-HTML. Die Tabellen sind z.B. mit Prozentangaben definiert, obwohl die Pixelgrafiken eine klare Größe vorgeben!
Bei deinem angehängten Web-Ordner fehlt übrigens auch der rechte Frame...

Schick mir mal die *.psd-Datei mit dem gesamten Layout, ich zeig dir dann grob wie es funken müsste.

[Andy-Lee]

okay.....die Datei kannst du dir hier runterziehen....

Was den rechten Rand betrifft, so habe ich das Frameset nicht so richtig hinbekommen....vielleicht kannst du mir da auch helfen....das Bild dort soll nur 50 pxl. Breit sein und 400 hoch und soll dann nur aus der Maske mit dem hell-dunkelrot-Streifen bestehen...

[Nightline]

Ok, ich denke ich habe eine schlechte Nachricht für dich: so wie es aussieht solltest du dein Konzept neu überdenken, denn es paßt einiges nicht zusammen.
Erst mal der besagte weiße Rand von dir: dass ich dafür 2 Tage brauch um draufzukommen, was nicht paßt... mamma mia, shame on me! Ist ja klar, dass da ein weißer Rand da ist, wenn deine Framebreite 1000 Pixel ist und du/bzw. ich oder wer auch immer mit der Auflösung 1024x768 surft. Und dieses kleine Problem ist auch der Übergang zu deinem ganz großen: hast du dir im Vorhinein überlegt, für welche Auflösung du dein Layout überhaupt anpaßt? Ich denke nicht...
Naja, da kommt jetzt ein bissl Zusatzarbeit auf dich zu:

Zuerst: wenn du das Layout für eine Auflösung anpaßt, dann müssen die Frames gemeinsam diese Auflösung auch abdecken! Wenn das mal paßt sieht die Seite zwar schön und gut in der dafür gemachten Auflösung aus, aber was passiert, wenn du die Fenstergröße veränderst oder die Auflösung verringerst/vergrößerst? Tja, dann kannst du deine Seite kübeln, denn sie ist unlesbar, alle Frames schieben sich ineinander und decken sich ab.
Eine Lösung wäre eine reine Tabellenseite, was aber sicher auch nicht einfach ist und wo du viel Programmierung brauchst.
Wenn du bei der Framelösung bleiben willst empfiehlt es sich, dass du dich mal hinsetzt und dir ein Design überlegst, das sich nahtlos an unterschiedliche Auflösungen anpassen kann. Dafür ist es notwendig, dass du die Frames nicht alle nahtlos ineinander überlaufen lässt, denn das wird in der Realität nicht funktionieren. Vielleicht verstehst du was ich meine, falls nicht erklär ichs dir noch genauer?

[Andy-Lee]

hm.... ich glaube, dass ich das Problem schon verstanden habe...aber ich sehe in der Realität doch auch überall ziemlich kompliziert wirkende Designs, die auch über Frames zusammengesetzt sind - da klappt das offensichtlich auch....und ich denke auch, dass mein Design sooooo kompliziert doch nicht ist.
Gibt es denn keine andere Möglichkeit? Wenn ich anstatt mit festen Pixeln die Tabelle mit Prozent bemesse...wäre das nicht möglich?
Habe mir so viel Mühe mit dem Design gegeben....hat ziemlich lange gedauert und eigentlich möchte ich das auch behalten....

Hm - ansonsten wäre vielleicht telefon ne gute Möglichkeit...?

Danke aber erstmal für die Hilfe!

[Nightline]

Tja, wie du schon sagst sind es teilweise sehr komplizierte Seiten, also wirklich nicht einfach zum Nachmachen.
Eine Pixelgrafik mit einer fixen Größe kannst du schwer mit Prozentangaben einer Tabelle dehnen, du veränderst dabei nur die Größe der Tabellenzelle, die Grafik wird trotzdem gleich bleiben.
Ich glaub dir auch, dass es viel zeit gekostet hat das Design zu machen wie es ist, dennoch hast du für die Zukunft gelernt, dass man sich zuerst ein klares Bild von seinen Ideen und ihrer tatsächlichen Verwirklichung macht (alles schriftlich!!). Aber den Fehler macht wohl jeder mal, ging mir nicht anders, ich weiß dass das frustet
Tjaaa, ohne Änderungen kannst du dein Design nicht beibehalten, aber ganz verändern musst du es auch nicht. Ich hab jetzt leider keine Zeit mehr, werd am späten Abend paar Sachen zusammenschreiben, wie du vorgehen könntest.

Per Telefon mach ich sowas nicht, sorry (abgesehen von den Kosten ), das ist ein Forum, und falls noch jemand ein ähnliches Problem wie du hat kann er hier ebenfalls die Lösung (??) finden bzw. sich inspirieren lassen.
Evtl. kannst mich per ICQ spontan was fragen.

[Nightline]

So, hier eine Anregung, wie du jetzt einen Neuanfang starten könntest:

Erstmal würde ich dein Frameset so aufbauen wie im Anhang gezeigt. Alle Frames müssen so gestaltet werden, dass sie in jeder Auflösung ab 800x600 anschaubar sind!

Linker Frame: Das Lineal würde ich rausnehmen, nimmt unnötig Platz weg und hat mit dem Thema nichts zu tun. Oben das Logo platzieren, das Menü nicht als Grafik, sondern mittels CSS realisieren (spart Platz, ist besser anpassbar und mindert die Dateigröße. Bis jetzt ist deine Seite ja ein einziger Grafikhaufen und braucht damit natürlich auch sicher lange zum Laden.) Nach unten gehend muss der Kopf vom Mann so bearbeitet werden, dass er nahtlos in den Hintergrund einfließt, denn wenn jemand eine höhere Auflösung verwendet wirkt der Kopf abgeschnitten.
Oberer Frame: Hier kann man im Grunde genommen alles lassen wie es ist, nur die Tastatur gehört ebenfalls fließend in den Hintergrund eingearbeitet.
Rechter Frame: Bleibt wie er ist und wird nur mit einem Hintergrundmuster gefüllt (näheres dazu weiter unten).
Unterer Frame: Die Augenpaare bleiben ebenfalls stehen und müssen rein theoretisch nicht nachbearbeitet werden.

Gut, soviel zu den einzelnen Frames, hier jetzt zum Hintergrund, der für alle Frames gilt: Die rote Zeilenmaske erstellst du in einem Muster in Photoshop (ca. 2x2 Pixel) und fügst sie in jedem Frame als sich wiederholender Hintergrund ein. Damit ist gewährleistet, dass sich die Seite auch bei hoher Auflösung zumindest nicht nackt darstellt, wo die Grafik nicht mehr dargestellt wird.

Ja, das wärs eigentlich grob gesagt. Bei hoher Auflösung à la 1280x1152 wird die Seite mit Sicherheit an Attraktivität verlieren, aber trotzdem immerhin noch ihren Zweck erfüllen. Wenn du eine Seite wirklich so aufbauen willst, dass sie sich dynamisch an die Auflösung des Users anpasst, dann musst du dein Design in dieser Art über den Haufen werfen und dir ordentlich Gedanken machen, denn das ist ein harter Brocken mit vielen Problemchen, die sich erst in der Praxis ergeben und umso frustrierender sind...

[Andy-Lee]

Danke erstmal für deine Mühe...Fragen bleiben dennoch:

1. Frage:

das Menü nicht als Grafik, sondern mittels CSS realisieren

...und wie realisiere ich das mit CSS?????

2. Frage:

Nach unten gehend muss der Kopf vom Mann so bearbeitet werden, dass er nahtlos in den Hintergrund einfließt

...wie meinst du das mit "nahtlos in den Hingergrund einfließen lassen?

3. Frage:

Wenn du eine Seite wirklich so aufbauen willst, dass sie sich dynamisch an die Auflösung des Users anpasst, dann musst du dein Design in dieser Art über den Haufen werfen und dir ordentlich Gedanken machen

...und in welche Richtung würden denn diese "ordentlichen Gedanken" gehen?

4. Frage:
Kannst du eventuell den code für das Frameset reinstellen?

5. Frage:
Wie würde die Realisierung der Page eigentlich nur mit Tabellen aussehen: genauso schwierig? Was müsste ich da ändern?

Hm....Fragen über Fragen....

[Nightline]

Mit CSS mein ich, dass du dein Menü mittels Styles definieren sollst, also vielleicht mittels Tabellenzellen das Menü aufbauen und dann beim drüberfahren mit der Maus eben die Farbe der Zelle und des Textes ändern.
Den Kopf in den Hintergrund fließen lassen? Mit Ebenenmaske einen Transparenzverlauf machen, ganz einfach.
Das "ordentlich Gedanken" hast du wahrscheinlich falsch verstanden, das ist nicht negativ gemeint sondern bedeutet nur, dass man sich sehr viel mit etwas auseinandersetzen muss. Und dein jetziges Design ist einfach nicht so konzipiert, dass es sich nahtlos an die Auflösung anpassen kann. Aber frag mich jetzt nicht wie das geht, bin auf dem Gebiet auch kein Genie.
Beim Frameset bin ich jetzt selbst etwas überfragt, gar nicht so einfach wie ich dachte...

[Andy-Lee]

so....

also das mit dem Bild in den Hintergrund einfließen lassen mittels EbenenMasken...ich meine: du hast doch die PDS Dateien....da müsstest du eigentlich sehen, dass ich genau das gemacht habe....

Hm - mit dem CSS - also n bischen verstanden hab ich das ja...kannste da nicht mal ein Beispiel machen mit 1 oder 2 Buttons....kann mir das irgendwie noch nicht so richtig vorstellen....tja - und wäre es dann wirklich nicht sinnvoller, wenn ich das ganze entweder gleich in Tabellen oder dann - noch besser - in Flash mache? Da habe ich zumindest (was gestalterische Möglichekteiten betrifft) doch mehr Möglichkeiten, als bei den Frames....was meinst du?