Design erstellt, wie gehts weiter?

[dan!eL]

hallo zusammen,

habe ein paar fireworks grundlagen tutorials durchgearbeitet. nun stehe ich vor einem problem, dass denke ich wohl schon jeden anfänger betroffen hat. kurz im vorraus, ich besitze html grundkenntnis ggf. auch ein wenig mehr

nun bin ich vor kurzem auf den kicker gekommen mir ein neues design zu entwerfen und habe dies nun auch bewältigt. bei meinen alten homepages habe ich mein html grundgerüst (meist nur tabelle) gestrickt und die grafiken dann entsprechend angepasst bzw genau auf diese größen entworfen und eingefügt. jetzt ist es aber umgekehrt. ich habe mir ein design entwerfen und möchte es nun "zurechtschnipseln" bzw mit code schmücken.

dazu ein kleines, anschauliches bespiel wie es in der alltäglichen arbeit mit windows aussieht. ich öffne einen menü mit mehreren registern, diese logischer weise verschiedenen inhalt haben. so ist das grundprinzip meiner/jeder seite. ich habe einen kontentbereich der mit meinen html-seiten bzw inhalten gefüllt werden soll. und jetzt komme ich zum WIE. wie stelle ich das an, das ich meine 800x600 grafik so zurechtschnipsel bzw sich nur der bereich ändert, der einen anderen inhalt hat. es wird ja nicht jedesmal alles neu geladen (about me, downloads, ...).

ich hoffe ich versteht wie ich das meine. mir stehen div. html editoren (phase5, dreamweaver, ...) zu verfügung. aber ich denke die vorarbeit muss nun doch mit fireworks gemacht werden. kann mir jemand erklären wie ich das zu bewältigen habe?

[farmed]

Falls ich dich richtig verstehe, machst du dir Gedanken darüber, wie du dein Design "slicen" sollst.

Fireworks Tutorials > Slicen - Webmaster-Elite.de

istn gutes Tutorial fürs Slicing-Prinzip, so wie ich das sehe. Ansonsten mal nach Design slicen googlen

[dan!eL]

das hört sich ja mal gut an, vielen dank

so wie ich das verstehe, muss ich wieder mit tabellen arbeiten. bei dynamischen inhalten ist das eher unpraktisch. kann mir jemand auf anhieb sagen, wie ich einen bereich zum weiterblättern ohne php oder iframes realisieren kann?

[Aiun]

javascript, du kannst mittels ajax inhalte abrufen und in dein Dokument einfügen.

und nein !, du musst nicht wieder mit tabellen arbeiten. Es sei denn du hast ein ganz verrücktes design in dem die divs zu viel arbeit machen würden, aber davon gehe ich hier mal nciht aus

[geloescht_JesterDay]

...wie ich einen bereich zum weiterblättern ohne php oder iframes realisieren kann?

Weiterblättern?

Da gibt es eine meiner Meinung nach wirklich geniale Seite, die das mit dem "weiterblättern" IMHO perfektioniert hat. Ohne Flash und ohne Tabellen!

christof wagner / fotograf

[dan!eL]

die seite ist mal schick :beagolisc

ich upp heute abend mal nen beispiel von mir damit ihr das seht. er author oben macht das ja mit den bilder nicht mit text.

das prinzip:

seite 1

<!-- beginn content -->

ÜBERSCHRIFT

ein wunderschöne geschichte... bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

*mist kein platz mehr*

<!-- ende content -->

das hat zu folge das das komplette design auseinadergezerrt wird, da keine "dynamischen hintergründe/grafiken" daneben sind die sich "mitdehnen" (bilderwiederholung) könnten.

*gedankenblitz* bestes beispiel: 2 personen halten präsentierend ein holzschild in höhe der hüfte. das ist von der fläche begrenzt, also müsste man im holzbrett blättern können

<< 1 .. 2 >>

so müsste es dann aussehen

seite 1

<!-- beginn content -->

ÜBERSCHRIFT

ein wunderschöne geschichte... bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

*umblätter zum weiterlesen*

Seite(n) << 1 .. 2 >>

<!-- ende content -->

seite 2

<!-- beginn content -->

*fortsetzung lese*

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

ENDE der geschichte

Seite(n) << 1 .. 2 >>

<!-- ende content -->

[geloescht_JesterDay]

er author oben macht das ja mit den bilder nicht mit text.

Die Seite Kontakt ist, wie man sich das denken kann, Text

Klar ist, dass bei dem Thema da hauptsächlich Bilder sind. Aber es geht auch mit Text.

[pascal87]

Bilder slicen und dann auch noch in einem "Tabellenlayout" ist eine vollkommen überholte Methode, das macht man heute einfach nichtmehr. Bring Dir den Umgang mit CSS, besonders dem Box Modell und den Umgang mit Hintergrundbildern bei, dann kannst du solche Probleme deutlich eleganter lösen und die Ladezeit Deiner Seiten deutlich reduzieren. Außerdem solltest Du Dich um aktuelle Webstandards (Stichwort W3C Validität, XHTML) kümmern, um zu verstehen, warum Tabellenlayouts total unsinnig sind.

MfG und schönes WE!

[dan!eL]

Bilder slicen und dann auch noch in einem "Tabellenlayout" ist eine vollkommen überholte Methode, das macht man heute einfach nichtmehr. Bring Dir den Umgang mit CSS, besonders dem Box Modell und den Umgang mit Hintergrundbildern bei, dann kannst du solche Probleme deutlich eleganter lösen und die Ladezeit Deiner Seiten deutlich reduzieren. Außerdem solltest Du Dich um aktuelle Webstandards (Stichwort W3C Validität, XHTML) kümmern, um zu verstehen, warum Tabellenlayouts total unsinnig sind.

MfG und schönes WE!

wenn ich aber vor dem probleme stehe und das so umzusetzen habe... :cool:

[geloescht_JesterDay]

wenn ich aber vor dem probleme stehe und das so umzusetzen habe... :cool:

hm?

nun bin ich vor kurzem auf den kicker gekommen mir ein neues design zu entwerfen und habe dies nun auch bewältigt. bei meinen alten homepages habe ich mein html grundgerüst (meist nur tabelle) gestrickt und die grafiken dann entsprechend angepasst bzw genau auf diese größen entworfen und eingefügt. jetzt ist es aber umgekehrt. ich habe mir ein design entwerfen und möchte es nun "zurechtschnipseln" bzw mit code schmücken.

Das klingt aber da nicht so

Und wenn du das wirklich für einen Kunden oder für einen Auftrag machst, dann hast du noch 1000mal mehr Gründe dich in moderne Web-Techniken einzuarbeiten.

Nur weil die Heizung im Haus deinen Opas damals super funktioniert hat, würde kein Installateur heute mehr auf die Idee kommen dir so eine Heizung in dein Haus zu bauen. Selbst wenn du das verlangst.

Mal abgesehen von Gesetzen gegen die die verstößt würde er dir auch so von den Vorteilen und Verbesserungen einer modernen Heizung erzählen und versuchen dich damit zu überzeugen.

Tja, jetzt bist du der Heizungsbauer

(Das Problem ist nur, dass es noch mehr als genug "Webdesigner" gibt, die Webseiten wie zu Opas Zeiten machen)

[arttoseo]

Wenn die auf einer Homepage oder in einem Profil eine Windowsähnliche Benutzeroberfläche schaffen willst, dann ist AJAX wirklich die beste Lösung.

Welches CMS benuutze eigentlich?

[Guybrush Threepwood]

Weiterblättern?

Da gibt es eine meiner Meinung nach wirklich geniale Seite, die das mit dem "weiterblättern" IMHO perfektioniert hat. Ohne Flash und ohne Tabellen!

christof wagner / fotograf

Naja was heißt perfektioniert? Ist halt eine ganz einfache Ajax Seite, die zwar wirklich sehr schön aussieht, aber das Prinzip dahinter ist recht simpel

[geloescht_JesterDay]

aber das Prinzip dahinter ist recht simpel

Ja, natürlich. Aber für sowas wurde ja sonst immer Flash genommen. Das meinte ich damit.

Das hier ist ganz normales HTML, mit Javascript.

Gerade Leute die meinen solche Effekte braucht ihre HP sind ja immer sofort mit Flash zur Stelle. Und genau da kann man sagen: Moooment, das geht auch mit HTML.

Was ich noch gar nicht probiert habe ist, wie das ohne Javascript aussieht, also mit deaktiviertem Javascript. Im Idealfall würde das dennoch funktionieren und wäre somit für die meisten eine effektvolle Webseite, wie sie sich das vorstellen und für die die ohne Javascript surfen (Googlebot und co, Screenreader etc.) dennoch genauso zu erreichen.

Das wäre eine perfekte Webseite, IMHO.

Wahrscheinlich ist das hier aber nicht der Fall, da es ja eh nur um Bilder geht. Somit ist es also fast schon nutzlos das auch ohne Javascript zu machen.

Ich finde die Umsetzung dennoch toll und bin bei meiner suche nach einem AJAX-Framework auf sie gestoßen, denn die Seite ist mit dem script.aculo.us Framework gemacht, welches ich auch genutzt habe.

[Guybrush Threepwood]

Ja da hast du recht und ohne Javascript wird da nicht viel passieren weil ja alle Links auf Javascriptfunktionen verweisen

Wobei Javascript zu programmieren ganz schön ätzend sein kann. Ich muss das seit über einem Jahr für Webapplikationen machen die halt im Browser genau wie eine normale Anwendung aussehen und funktionieren sollen. Das ist echt beeindruckend was da alles möglich ist (hätte ich vorher nicht gedacht), aber oft auch ein ziemlicher Krampf

Naja ich bin mal auf Silverlight gespannt auch wenn man dazu dann wieder ein Plugin braucht...

[geloescht_JesterDay]

Ja da hast du recht und ohne Javascript wird da nicht viel passieren weil ja alle Links auf Javascriptfunktionen verweisen

Ja, natürlich. Meine Idee dazu war, dass man die Seite eben ganz normal ohne Javascript macht und dann mit einem Initial-Script die Links ersetzt. Dann geht es mit und ohne. Das geht vielleicht auch eleganter, aber wirklich umgesetzt hat ich meine Idee noch nie, zu faul

Hab es nur einmal für eine erweiterte Javascript Funktionalität genutzt, die ohne Javascript "display: none" ist.

Am besten wäre wohl ein Javascript "OnLink"-Event oder so Also Document-weit

[Guybrush Threepwood]

Hast du mal script.aculo.us - web 2.0 javascript probiert?

Nee wir haben da bis auf ein paar Ausnahmen hauptsächlich eigene Controls im Einsatz.

Die Flash-Neuerfindung von MS?

genau die

[dan!eL]

kennt ihr eine seite neben selfhtml.org wo das mit dem css-"tabellen"-aufbau anhand eines beispiels erklärt ist?

mir fehlt da gerade das vorstellungsvermögen wie das (nur) anhand von css umzusetzen ist (aufteilung, geslicede bilder, ...)

[geloescht_JesterDay]

kennt ihr eine seite neben selfhtml.org wo das mit dem css-"tabellen"-aufbau anhand eines beispiels erklärt ist?

Ich sage einfach mal: Das wirst du nicht finden!

css-"tabellen"-aufbau...

Ich sag das mal mit einer Liedzeile:

Military Intelligence, two words combined that can't make sense.

[Aiun]

ein großteil der Layouts die heutzutage ohne tabellen gemacht werden sind nur kopien von der Layoutstruktur die nuneinmal aus einer Tabelle besteht, selbst wenn es technisch nicht so realisiert ist.

Wirklich "innovative" Layouts, oder abweichende, gibt es relativ wenig.

Also hört doch bitte auf auf dem Tabellendenken rumzuhauen das kann nerven und hilft weder Threadersteller noch sonstjemandem.

dan!eL, ich vermute du meinst Tutorials wie "3 column layout", "2 column Layout" etz ?

gibt es viele Seiten, aber keine die mir jetzt besonders groß oder wichtig im Kopf erscheint. Wenn du was findet kannst du dich ja mitteilen.

[geloescht_JesterDay]

ein großteil der Layouts die heutzutage ohne tabellen gemacht werden sind nur kopien von der Layoutstruktur die nuneinmal aus einer Tabelle besteht, selbst wenn es technisch nicht so realisiert ist.

Tabellenlayouts sind wie Puzzle, ein Teil neben das andere geklebt.

CSS-Layouts sind nicht nebeneinander geklebt sonder verschachtelt.

Wenn man von diesem Denken nicht wegkommt, wird das nie was mit CSS und man wird immer meckern, dass CSS ja sch*** ist weil man damit nichts hinbekommt.

Und deswegen hör ich nicht auf den Leuten zu sagen, dass sie vom Tabellendenken weg sollen!

Selbst wenn es nur 2- oder 3-column layout ist. Das sieht vielleicht nebeneinandergeklebt aus, ist es aber nicht.

Und gerade als Entwickler sollte dir der Unterschied zwischen Code und dem was der User sieht bewußt sein.

Ach ja: CSS 4 You - The Finest in Stylesheets ist eine Seite die CSS gut erklärt und wo es auch um Grundlagen geht. Hab ich vorhin nur vergessen.

[Aiun]

Layouts werden aber ersteinmal nicht technisch, sondern optisch / grafisch entworfen. Die technik dient zur Machbarkeit als nebengedanke, ist aber nicht treibender Grund.

Dein Problem ist, wie im anderen Thread schon gesagt das du aus sicht der Technik nicht aus sicht von Anforderung oder Optik denkst. die Technik muss erfüllen was als sinnvolle Anforderung angesehen wird.

Wenn er also Layouts in tabellendenken entwirft ist das völlig ok. Ein TR ist nichts anderes als ein Div mit anderen divs auf 100% höhe, verschachtelte Tabellen gab es auch, das ist alles das gleiche.

Unterschied Tabelle->css ist

1. Die Auszeichnung, d.h. Screenreader und automatische Analyseprogramme können Tabellarischen Inhalt und Layout trennen.

2. Die Verbindung der Zellen ist optional (im moment eh noch nicht wirklich möglich, das ist ja das Problem )

Natürlich machen wir hier auch ein wenig Überzeugungsarbeit, aber wir sollten das nicht übertreiben. Es währt sich in diesem Thread ja niemand gegen CSS, sondern fragt nach dem wie. Und an dem Tabellendenken ist nix schlimmes dran.

Wenn ein Ingenieur mit dem Gedanken an ein Fahrrad beginnt um herauszufinden wie er ein Auto bauen soll, dann bitte, solange das resultat ok ist.

[geloescht_JesterDay]

Layouts werden aber ersteinmal nicht technisch, sondern optisch / grafisch entworfen. Die technik dient zur Machbarkeit als nebengedanke, ist aber nicht treibender Grund.

Dein Problem ist, wie im anderen Thread schon gesagt das du aus sicht der Technik nicht aus sicht von Anforderung oder Optik denkst. die Technik muss erfüllen was als sinnvolle Anforderung angesehen wird.

Moooment.

Ich habe nichts dagegen, dass ihm ein Multi-Column Layout vorschwebt.

Hier geht es aber um die Umsetzung nicht um die Grundidee wie sowas aussehen könnte.

Vorstellen wie sowas aussehen soll kann sich jeder, diese vorstellung dann Umsetzen ist das Problem und genau da hängt es bei vielen. Denn mit Tabellen ließ sich das praktisch 1:1 Umsetzen wie man sich das vorgestellt hat, auch im Quelltext. Wenn du 2 Dinge nebeneinander haben willst, dann machst du eine Tebellenzeile, dann 1 Tebellenzelle und danach (oben nach unten, links nach rechts... wie beim schreiben) eine weitere Zelle und gut ist.

Bei CSS geht das nicht mehr einfach so. Und genau das ist das Problem welches ich hier auch immer wieder anspreche. Ganz einfach weil sich viele einfach nicht die Mühe machen wollen, von ihrem Denken auf die Umsetzung umzudenken.

[Aiun]

deine Beiträge werden zu lang ^^, wir sollten das irgendwohin auslagern, sonst weis nie jemand wieviel noch zum kern des beitrags gehört und wir müssen uns nicht wiederholen.

[dan!eL]

solangsam dehnt sich das hier ziemlich aus

das prinzip, soweit ich das jetzt richtig verstanden habe: CSS > Tabellen

ich kenne halt von div. internetauftritten, gerade im esport bereich und die ganzen clanseiten, dass designs verkauft werden. der käufer erhält dann von mir aus die *.psd/*.png datei und kann gucken wie er den code zurecht bekommt.

=> es wird gesliced und rumtabelleriert

anders kann ich mir so eine umsetzung eines so komplizierten designs momentan auch echt nicht vorstellen. vielleicht denke ich auch zu altmodisch :confused:

[geloescht_JesterDay]

solangsam dehnt sich das hier ziemlich aus

Dacht ich mir auch schon... aber dann wieder: Das ist doch eigentlich alles zum thema "Design erstellt, wie geht's weiter"

css Zen Garden: The Beauty in CSS Design

Ist das unkompliziert?

css Zen Garden: The Beauty in CSS Design

oder das?

css Zen Garden: The Beauty in CSS Design

Alles dieselbe Seite (derselbe HTML Code), nur immer ein anderes Design (anderes CSS). Ohne Tabellen und ohne geslice und ohne altmodisch