|
 |
  |
| Autor |
Nachricht |
MartinaE
Neuer [User]
Anmeldung: 23.12.07
Beiträge: 3
|
 Verfasst am: 23.12.2007, 22:10 Titel: Der beste Weg zur Hintergrundgrafik.... |
 |
|
Hallo zusammen!
Ich bin neu hier im Forum und auch relativ neu im Webdesign allgemein.....Ich habe gerade eine Weiterbildung hinter mir und möchte nun von zu Hause aus damit anfangen, selbst Seiten zu bauen und zu gestalten....
Ich hätte gern mal Euro Meinung zu dem Thema gewusst, wie man am besten eine Hintergrundgrafik integriert bzw. damit arbeitet.....
Sollte man mit Photoshop und Slices arbeiten?
Oder lieber einzelne Grafiken bauen und diese in div-Container verpacken?
Oder wann sollte man welchen Weg gehen???
Ich bin in diesen Dingen noch etwas unsicher und würde mich daher über jegliche Tipps von Euch freuen.....
Als Beispiel für ein Grafikdesign aud dem Bereich der mir in etwa vorschwebt hier ein Link:
[URL="http://www.british-gym.com/jennifer/"]http://www.british-gym.com/jennifer/[/URL]
[URL="http://sitesbymorgan.com/grace/index.htm"]http://sitesbymorgan.com/grace/index.htm[/URL]
[URL="http://www.jordanlipton.com/"]http://www.jordanlipton.com/[/URL]
Später sollte es dann so sein, dass sich der Hauptteil der Seite entsprechend dem Inhalt vergrößert oder auch nicht....
|
|
| Nach oben |
|
 |
Donky
Erfahrener [User]
Anmeldung: 14.11.07
Beiträge: 64
Wohnort: Gänserndor ...
|
| Verfasst am: 24.12.2007, 09:28 Titel: |
|
|
Also ich arbeite am liebsten mit Photoshop und slices, finde das am angenehmsten, obwohl das ändern im Nachhinein nicht mehr ganz so ohne ist :S
mit div-Container kenn ich mich nicht aus, kann dir also hierzu keine Pro bzw Contras bieten.
Lg und Frohe Weihnachten
_________________
<= i waZzZ heRe =>
|
|
| Nach oben |
|
|
thepiep
Beliebter [User]
Anmeldung: 24.08.06
Beiträge: 338
Wohnort: Aachen
|
| Verfasst am: 24.12.2007, 11:17 Titel: |
|
|
Hallo!
Nach etwas Einarbeitungszeit ist der Umgang mit Div's und den anderen Elementen einfacher als mit Tabellen, da man die Dateien letztlich nicht nach einem Schachbrettmuster zerhacken muss, sondern eher in ihrer Form belassen kann und übereinanderlegen, etc..
Schau dir am Besten mal die Seite  http://www.csszengarden.com/ - Zumindest die offiziellen Designs sind gute Beispiele für sauberen CSS-Code und der Quelltext ist auch vorbildhaft - Schau dir zum Vergleich eine Seite mit Tabellenlayout an - sie ist mindest 3x so lang... d.h. 3x mehr Tipperei.
Slicen mit Photoshop ist natürlich auch bei CSS-Designs sinnvoll, nur sollte man den Quelltext getrost selber schreiben (es gibt zwar auch Editoren die das gescheit hinbekommen, die sind allerdings eher rar).
|
|
| Nach oben |
|
|
MartinaE
Neuer [User]
Anmeldung: 23.12.07
Beiträge: 3
|
| Verfasst am: 24.12.2007, 15:26 Titel: |
|
|
Vielen lieben Dank schon mal für Euro Tipps und den Link! 
Die Seite werde ich mir gleich mal ansehen!
Ich habe schon mal in einige Quellcodes reingeschaut und bemerkt, dass mal mit divs und mal mit Tabellen gearbeitet wird. Aus der Weiterbildung her habe ich aber im Allgemeinen auch den Tipp mitbekommen, dass es besser ist, mit divs zu arbeiten.
Es sind ja glaube ich auch nur die divs, die automatisch mit dem Inhalt mitwachsen können, oder?
Bei einem meiner Projekte hatte ich mich schon mal ein wenig mit ihnen rumgeärgert, und es hat eine ganze Weile gedauert, bis die Sache so lief wie ich sie haben wollte....aber Übung macht ja bekanntlich den Meister....
Ich kann mir auch Zeit lassen momentan und möchte mich daher lieber gut einarbeiten und zum Schluss dann gut laufende Ergebnisse präsentieren....
Bevor diese Sachen nicht richtig sitzen will ich mir erst mal nichts mit Termindruck aufhalsen.....
Also lieben Dank noch einmal und auch Frohe Weihnachten und einen guten Rutsch an alle.
|
|
| Nach oben |
|
|
800XE
Bekannter [Mod]
Anmeldung: 24.10.04
Beiträge: 1499
Wohnort: Speyer
|
| Verfasst am: 25.12.2007, 12:45 Titel: |
|
|
| MartinaE hat folgendes geschrieben: | | Es sind ja glaube ich auch nur die divs, die automatisch mit dem Inhalt mitwachsen können, oder? |
DivBoxen und Tabellenzellen wachsen beide mit dem Inhalt
Tabellenzellen immer
DivBoxen können auch auf feste größe eingestellt werden
entweder wird "zuviel" Inhalt dann nicht angezeigt oder man schaltet einen Slider ein
Du fragst hach Hintergrundbild .....
... nehmen wir mal eine Frabe = Hintergrundfarbe
3 Tabellenspalten, alle sind gleich hoch, so hoch wie die höchste der 3
3 DivBoxen, mit float nebeneinander gelegt .... jede ist nur so hoch wie ihr Inhalt
Will man 3 Spalten, Hintergrundfarbe undoder Ramenlinie sollen Oben und unten Bündig sein .... = Tabelle
Viele würde mich jetzt sicher gerne wieder verprügeln dasich ProTabelle spreche
tu ich das wirklich?
Was ich sage ist, Div ist kein Ersatz für Table, es ist eine ganz Andere Technik
Div kann vieles was Table nicht kann
Und Table kann Dinge die Div nicht kann
Gruß
Andy 800XE Zmuda
_________________
Seien wir realistisch, versuchen wir das Unmögliche!
CMS800 :::::::::: Andy 800XE Zmuda :::::::::
ich bin nicht unhöflich, ich bin binär
|
|
| Nach oben |
|
|
thepiep
Beliebter [User]
Anmeldung: 24.08.06
Beiträge: 338
Wohnort: Aachen
|
| Verfasst am: 25.12.2007, 14:47 Titel: |
|
|
hmm, da kann ich nicht ganz zustimmen:
mit divs kann man alles machen, was auch mit tabellen geht, teilweise ist es nur umständlich.
für div-designs muss man einfach völlig anders an das design rangehen - bei tabellen hat man ein design und quetscht dieses in kästchen - bei divs versucht man zunächst eine struktur in ein dokuments zu bringen und erst dann beschäftigt man sich damit, wie man durch geschickten einsatz von hintergrundbildern und zusätzlichen divs als gestaltungselemente das design darstellen kann. und mir geht es so, dass man bei div-basierten layouts viel weniger einzelbilder benötigt = weniger arbeit
außerdem sind vorteile, dass umfangreiche div-basierte webseiten schneller geladen & dargestellt werden, als tabellenlayouts (weniger traffic (mäßiges argument))
dadurch, dass die struktur des dokuments völlig vom design losgelöst ist, können die seiten besser von suchmaschinen indiziert werden, leichter gedruckt werden oder von blinden surfern mit hilfe von "vorlese-software" erfasst werden.
tabellen waren eine notlösung und ein div-design ist die verbesserte notlösung - xhtml 2.0 und css3 werden sicherlich vieles verbessern, allerdings dauert das noch etwas, bis das standart wird...
|
|
| Nach oben |
|
|
MartinaE
Neuer [User]
Anmeldung: 23.12.07
Beiträge: 3
|
| Verfasst am: 25.12.2007, 16:45 Titel: |
|
|
Ah danke!
So langsam wird die Sache schon klarer für mich...ich denke, ich verstehe was Ihr so über den Unterschied von Tabellen und divs sagt...Ich hatte die letzten Monate so viel Input, das ich nun alles wieder auseinanderdröseln muss. 
Ein wenig experimentieren wird mich da dann sicher auch noch weiterbringen!
Fachliteratur hatte ich mir auch zugelegt und will da auch drin stöbern und sie zu Hilfe nehmen, wenn ich dann am basteln bin!
Mit Tabellen kann man sicher einiges machen, aber ich glaube ich werde es mal mit divs probieren....mal sehen....
Im neuen Jahr geht es so richtig an die Materie ran...zumindest habe ich mir das vorgenommen!!
Spätestens dann werde ich sehen, wo ich Probleme habe oder auch nicht.....ich werde Euch dann auch auf dem Laufenden halten bzw. sicher noch ein paar Fragen haben die sich dann ergeben.
|
|
| Nach oben |
|
|
800XE
Bekannter [Mod]
Anmeldung: 24.10.04
Beiträge: 1499
Wohnort: Speyer
|
| Verfasst am: 25.12.2007, 20:25 Titel: |
|
|
| thepiep hat folgendes geschrieben: | | mit divs kann man alles machen, was auch mit tabellen geht, teilweise ist es nur umständlich. |
Kannst du mir deine Aussage beweisen?
Wenn du es versuchen willst, dann bitte hier einen Link zu neuem Thread
Aufgabenstellung
| Code: |
<table>
<tr><td collspan=3>Header
<tr>
<td>Navi
<td>Content
<td>AdBar
</tr>
<tr><td collspan=3>Footer
</table>
|
Gesamtdocument Hintergrundfarbe white
Tabellenzellen Hintergrundfarbe silver
Tabellenzellen mit padding(marbing) zu den Anderen, also dazwischen das white zu sehen
Die 3 Spalten sind unten bündig, egal wieviel Inhalt eine Spalte hat
bzw. mal hat die, mal die Andere Spalte mehr Inhalt
Die Spalten sind flexibel in der Aufnahmekapazität = keine Slider(Docintern)
Gruß
Andy 800XE Zmuda
_________________
Seien wir realistisch, versuchen wir das Unmögliche!
CMS800 :::::::::: Andy 800XE Zmuda :::::::::
ich bin nicht unhöflich, ich bin binär
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 497
|
| Verfasst am: 26.12.2007, 12:46 Titel: |
|
|
@800XE
OK, da hast du einen "Div-Problem-Klassiker" erwischt mit deinen Vorgaben.
Zugegeben: Das Layout ist nicht unproblematisch und im Einzelfall erfordert es auch individuelle Zusatzarbeit gegenüber Tabellen sowie einen kleinen Trick.
Aber vollkommen unlösbar ist dies nicht, siehe
Demo
Allerdings weil Weihnachten ist: Bitte keine neue Diskussion über Divs und Tabellen. Du sagtest es richtig: Es sind zwei unterschiedliche Techniken.
Ich füge hinhzu: Jeder soll selbst entscheiden, welche Technik er anwendet.
_________________
sejumas CSS-Einsteigerkurs
|
|
| Nach oben |
|
|
800XE
Bekannter [Mod]
Anmeldung: 24.10.04
Beiträge: 1499
Wohnort: Speyer
|
| Verfasst am: 26.12.2007, 18:32 Titel: |
|
|
| sejuma hat folgendes geschrieben: | Allerdings weil Weihnachten ist: Bitte keine neue Diskussion über Divs und Tabellen. Du sagtest es richtig: Es sind zwei unterschiedliche Techniken.
Ich füge hinhzu: Jeder soll selbst entscheiden, welche Technik er anwendet. |
Ja, jeder soll nehmen was ihn glücklich macht
aber sorry, deiner Bitte kann ich nicht nachkommen
| sejuma hat folgendes geschrieben: | @800XE
OK, da hast du einen "Div-Problem-Klassiker" erwischt mit deinen Vorgaben.
Zugegeben: Das Layout ist nicht unproblematisch und im Einzelfall erfordert es auch individuelle Zusatzarbeit gegenüber Tabellen sowie einen kleinen Trick.
Aber vollkommen unlösbar ist dies nicht, |
1. War die Aufgabenstellung ja eigentlich an Pipe um seine Aussage zu beweisen
2. War Hintergrundfarbe die Aufgabe, und nicht farbiger Hintergrund
Jetzt sieht es zwar der Aufgabenstellung entsprechen aus, gelöst ist sie aber nicht
=
style="-moz-border-radius: 23px; border: 1px solid #000000; "
=
warum decken sich die Rahmen nicht mit ihren Boxen?
warum sind die Rahmenunterkannten nicht auf gleicher Linie bei den 3 Spalten?
Jetzt könnte man die Ramen seitlich reinmalen
und oben und unten Zeilen ergänzen mit den Ramen für oben und unten ......
.... tus nicht ..... auser du bringst deine Hintergrundgrafik dazu das sie auf 100% Fensterbreite funktioniert, kein Layout mit fester Breite
Und als letztes iTüpfelschen
800xe.de ..... Linke Spalte ist in der Höhe 2geteilt .... im IE funktionirts glaub nicht so wie es soll, aber im Konqueror und Geckos sind oben die blauen Menüs und unten der Rest eine gelbe Box wie die rechte Spalte
mir gehts jetzt nicht um besser oder schlechter
Mir gehts um die Aussage (von Pipe) das angeblich jedes TableLayout auch tabellenlos umsetzbar ist ..... und diese Aussage ist falsch
Gruß
Andy 800XE Zmuda
_________________
Seien wir realistisch, versuchen wir das Unmögliche!
CMS800 :::::::::: Andy 800XE Zmuda :::::::::
ich bin nicht unhöflich, ich bin binär
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 497
|
| Verfasst am: 26.12.2007, 20:47 Titel: |
|
|
Diese Zusatzaufgaben waren nicht deine ursprüngliche Aufgabenstellung.
Aber ich geb mich mit diesen Zusatzanforderungen geschlagen.
_________________
sejumas CSS-Einsteigerkurs
|
|
| Nach oben |
|
|
thepiep
Beliebter [User]
Anmeldung: 24.08.06
Beiträge: 338
Wohnort: Aachen
|
| Verfasst am: 27.12.2007, 03:26 Titel: |
|
|
letztlich geht es aber nicht um die frage, kann ich ein bestimmtes design umsetzen, sondern packe ich Inhalte in eine form in die sie passt oder nicht - und dabei bin ich der meinung, dass man dem grundgedanken von html folgen sollte und inhalte, um die es letztlich auf webseiten geht, in ihre passenden container zu tun (tolles deutsch...)
mit css3 kommen sicherlich viele verbesserungen die einem so manchen hack ersparen werden - bis dahin werden die einen webdesigner tabellen benutzen und die anderen blödsinn dieser art produzieren:
| Code: | <html><head><style type="text/css">
*{border:0;margin:0;padding:0;}
div div{background:silver;float:left;height:100%;}
p{float:left;}
</style></head><body>
<div style="left:25.5%;width:50%;position:absolute;z-index:10;vertical-align:top;height:100%;">
<div style="display:block;width:99%;height:5%;background-color:grey;padding:0;margin:0;border-width:1em 0;border-color:white;border-style:solid;">Test test test</div>
<p style="width:25%;margin:0;">hallo<br/>hallo<br/>hallohallo<br/>hallo</p>
<p style="width:39%;margin:0 5%;">hallohallo<br/>hallo</p>
<p style="width:25%;margin:0;">hallo<br/>hallohallo<br/>hallo</p>
<div style="display:block;width:99%;height:5%;background-color:grey;padding:0;margin:0;border-width:1em 0;border-color:white;border-style:solid;">footer test test</div>
<div style="background:white;width:100%;"></div>
</div>
<div style="left:25.5%;width:50%;position:absolute;height:90%;">
<div style="width:25%;margin:0;"></div>
<div style="width:39%;margin:0 5%;"></div>
<div style="width:25%;margin:0;"></div>
</div>
</body></html> |
überlange scrollbalken sind doch noch nicht verboten, oder?  (habs nur in ie7 und ff getestet, bei 6.0 wär ich mir net so sicher, schon allein wegen 0.5 + 0.5 > 1 )
|
|
| Nach oben |
|
|
800XE
Bekannter [Mod]
Anmeldung: 24.10.04
Beiträge: 1499
Wohnort: Speyer
|
| Verfasst am: 27.12.2007, 11:28 Titel: |
|
|
| thepiep hat folgendes geschrieben: | | bis dahin werden die einen webdesigner tabellen benutzen und die anderen blödsinn dieser art produzieren: |
Ich bleib bei meiner Tabelle, dort funktionirt es auch mit dem Rahmen
_________________
Seien wir realistisch, versuchen wir das Unmögliche!
CMS800 :::::::::: Andy 800XE Zmuda :::::::::
ich bin nicht unhöflich, ich bin binär
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
