mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 18:51 Benutzername: Passwort: Auto-Login

Thema: Webseite mit Tabellen gestalten vom 30.11.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Webseite mit Tabellen gestalten
Seite: Zurück  1, 2, 3, 4
Autor Nachricht
ypsiw
Threadersteller

Dabei seit: 08.10.2002
Ort: Nienhagen
Alter: 44
Geschlecht: Weiblich
Verfasst Do 02.12.2004 18:18
Titel

Antworten mit Zitat Zum Seitenanfang

Also das ganze hat jetzt gut funktioniert.

Was mir jetzt nur auffällt ist, das der Internetexplorer das so anzeigt: http://www.dtp-mt.de/richtig.jpg

Der Safari aber so: http://www.dtp-mt.de/falsch.jpg

Woran kann es liegen, dass der Safari so eine Verschiebung mit reinhaut?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Do 02.12.2004 18:36
Titel

Antworten mit Zitat Zum Seitenanfang

Das kann verschiedene Gründe haben. Der Content ist zu groß, p-Absätze und Bilder haben im standardkonformen Anzeigemodus einen Abstand nach unten, und, und, und. Der Screenshot zeigt aber eins mit Sicherheit: Dass es a) nicht ganz gut klappt und dass du b) nicht auf die obigen Hinweise gehört und die Tabelle aufgeteilt hast. Daher: Schau selbst, wie det jelöst bekommst!
 
Anzeige
Anzeige
ypsiw
Threadersteller

Dabei seit: 08.10.2002
Ort: Nienhagen
Alter: 44
Geschlecht: Weiblich
Verfasst Do 02.12.2004 18:57
Titel

Antworten mit Zitat Zum Seitenanfang

XSchinkenX hat geschrieben:
Das kann verschiedene Gründe haben. Der Content ist zu groß, p-Absätze und Bilder haben im standardkonformen Anzeigemodus einen Abstand nach unten, und, und, und. Der Screenshot zeigt aber eins mit Sicherheit: Dass es a) nicht ganz gut klappt und dass du b) nicht auf die obigen Hinweise gehört und die Tabelle aufgeteilt hast. Daher: Schau selbst, wie det jelöst bekommst!



Habe keine p-Absätze drin.
Das es nicht so klappt das sehe ich auch. Habe alle Hinweise ausprobiert und komischerweise hat nichts richtig funktioniert. Habe dann eine komplette Tabelle erstellt und mit row- und colspans gearbeitet.
Im Internet Explorer ist es ja in Ordnung.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Do 02.12.2004 19:00
Titel

Antworten mit Zitat Zum Seitenanfang

Najuuut... *zwinker* ich kann jetzt erklären, wie ich will, diese Sachen lernst du am besten wie ich, "by doing". Du kannst ja mal deinen Quelltext posten (oder nen aktuellen Link), und ich schau dann hinterher mal, was man da machen kann. Ich leg aber erst mal aufs Ohr.

Zuletzt bearbeitet von am Do 02.12.2004 19:01, insgesamt 1-mal bearbeitet
 
ypsiw
Threadersteller

Dabei seit: 08.10.2002
Ort: Nienhagen
Alter: 44
Geschlecht: Weiblich
Verfasst Do 02.12.2004 19:03
Titel

Antworten mit Zitat Zum Seitenanfang

XSchinkenX hat geschrieben:
Najuuut... *zwinker* ich kann jetzt erklären, wie ich will, diese Sachen lernst du am besten wie ich, "by doing". Du kannst ja mal deinen Quelltext posten (oder nen aktuellen Link), und ich schau dann hinterher mal, was man da machen kann. Ich leg aber erst mal aufs Ohr.


OK, vielen Dank. Lächel

Hier der Quelltext (hoffe er sieht nicht all zu schlimm aus):

<body onLoad="MM_preloadImages('images/design_07_over.jpg','images/design_08_over.jpg','images/design_09_over.jpg','images/design_10_over.jpg','images/design_11_over.jpg','images/design_12_over.jpg')">
<table width="99%" height="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">

<table width="700" height="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" colspan="1"><img src="images/design_01.jpg" width="20" height="50"></td>
<td height="50" colspan="2"><img src="images/design_02.jpg" width="220" height="50"></td>
<td colspan="3"><img src="images/design_03.jpg" width="330" height="50"></td>
<td><img src="images/design_04.jpg" width="110" height="50"></td>
<td width="20"><img src="images/design_05.jpg" width="20" height="50"></td>
</tr>
<tr>
<td><img src="images/design_06.jpg" width="20" height="30"></td>
<td width="110" height="30"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/design_07_over.jpg',1)"><img src="images/design_07.jpg" name="home" width="110" height="30" border="0"></a></td>
<td width="110"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pruefung','','images/design_08_over.jpg',1)"><img src="images/design_08.jpg" name="pruefung" width="110" height="30" border="0"></a></td>
<td width="110"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','images/design_09_over.jpg',1)"><img src="images/design_09.jpg" name="info" width="110" height="30" border="0"></a></td>
<td width="110"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('suche','','images/design_10_over.jpg',1)"><img src="images/design_10.jpg" name="suche" width="110" height="30" border="0"></a></td>
<td width="110"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('kontakt','','images/design_11_over.jpg',1)"><img src="images/design_11.jpg" name="kontakt" width="110" height="30" border="0"></a></td>
<td width="110"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('privat','','images/design_12_over.jpg',1)"><img src="images/design_12.jpg" name="privat" width="110" height="30" border="0"></a></td>
<td width="20"><img src="images/design_13.jpg" width="20" height="30"></td>
</tr>
<tr>
<td height="380" colspan="1" rowspan="7"><img src="images/design_14.jpg" width="20" height="380"></td>
<td height="120" rowspan="1"><img src="images/design_15.jpg" width="110" height="120"></td>
<td class="tabelle_start" height="380" colspan="4" rowspan="7" background="images/design_16.jpg">
Herzlich Willkommen auf der Seite f&uuml;r Mediengestalter!<br><br>
Diese Seite hat ein neues Design bekommen. Es ist so sehr &uuml;bersichtlich und einfach gestaltet. Hoffe es gef&auml;llt Euch und w&uuml;rde mich &uuml;ber ein kleines Feedback freuen. <br>
<br>
Auf diesen Seiten m&ouml;chte ich Euch so viele Informationen und Themen bereitstellen, die ein Mediengestalter w&auml;hrend seiner Ausbildung und auch danach ben&ouml;tigt.<br>
<br>
Falls noch weitere Ideen/Themen aufkommen, w&uuml;rde ich mich &uuml;ber eine kleine E-Mail freuen.<br>
<br>
Und nun w&uuml;nsche ich viel Spa&szlig; mit dieser Seite!<br>
<br>
Gru&szlig;<br>
Yvonne</td>
<td height="120" rowspan="1"><img src="images/design_17.jpg" width="110" height="120"></td>
<td rowspan="7"><img src="images/design_18.jpg" width="20" height="380"></td>
</tr>

<tr>
<td height="260" rowspan="6"><img src="images/design_19.jpg" width="110" height="260"></td>
<td height="136"><img src="images/design_20.jpg" width="110" height="136"></td>
</tr>

<tr>
<td height="20"><img src="images/design_21.jpg" width="110" height="20"></td>
</tr>

<tr>
<td height="20"><img src="images/design_22.jpg" width="110" height="20"></td>
</tr>

<tr>
<td height="20"><img src="images/design_23.jpg" width="110" height="20"></td>
</tr>

<tr>
<td height="20"><img src="images/design_24.jpg" width="110" height="20"></td>
</tr>

<tr>
<td height="45"><img src="images/design_25.jpg" width="110" height="44"></td>
</tr>

<tr>
<td height="20" colspan="8"><img src="images/design_26.jpg" width="700" height="20"></td>
</tr>

<tr>
<td height="20" colspan="8"><img src="images/design_27.jpg" width="700" height="20"></td>
</tr>
</table>

</td>
</tr>
</table>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Do 02.12.2004 23:50
Titel

Antworten mit Zitat Zum Seitenanfang

Nein. Du bist zwar auf dem richtigen Weg, aber so kommst du nicht weiter. Ich hab mal ein kleines Tutorial geschrieben.

Schinkens Tabellenlayoutausimageready-Tutorial

1.) Dein fertiges Layout ist die Basis der Sache.




2.)
Wichtig sind nun die konzeptionellen Vorüberlegungen. Wie teile ich das ganze möglichst schlau, um Hinterher einen mögliches flexiblen Quelltext zu erhalten (auch unter dem Gesichtspunkt, dass das ganze "aus dem Leim" gehen kann, wenn mal etwas mehr Text auf der Seite erscheint). Dazu "teile" ich in Gedanken schonmal "vor":



Man sieht, dass ich darauf geachtet habe, keine "krummen" Zellen mit unmöglichen col- und rowspans zu erhalten. Am besten, man denkt sich eine Art einfaches Gestaltungsraster aus.

3.)
Nun erstelle ich mein grobes Slicegerüst. Hierbei gilt: Um so einfacher, um so besser. NIEMAND nimmt den Quelltext, den ImageReady schreibt. Dieser gilt nur als BASIS für das weitere Vorgehen. Daher ist es - um hinterher schnell und einfach professionelle Ergebnisse zu erzielen - ganz wichtig, das Slicegerüst so einfach wie möglich zu halten. Details können hinterher immer noch herausgearbeitet werden.
Ich habe mich für folgende Konstruktion entschieden:




Ich habe hier bewußt die beiden seitlichen "Stützen" ausgespart und separat gespeichert, damit ich aus ihnen später "flexible Säulen" herstellen kann, grafisch hinterlegte Tabellenzellen mit sich wiederholendem Hintergrundmuster. Dazu am Ende mehr.

4.)
Gewisse Details, die mir hinterher u.U. Probleme bereiten, habe ich bereits im Vorfeld berücksichtigt. Hier lohnt eine genaue Analyse der eigenen Arbeit: Was gehört wo hin? Welche Bereiche sind änderlich, welche bleiben gleich (in der Größe, im Inhalt etc.) Hier ist es das Rahmenwerk. Ich habe mich der Einfachkeit halber eintschieden, es nicht als HTML-Rahmen einer Tabelle darzustellen, sondern im Kontext der Bilder, wie ImageReady sie mir zurechschnippelt, zu bleiben:



Dies hat den Vorteil, dass ich im Contentbereich später herummachen kann wie ich will, das Rahmenwerk bleibt dabei unangetastet, da es – für den Benutzer unsichtbar – außerhalb liegt.

5.)
Nun speichere ich mein Werk erst einmal (optimiert) ab.





Wichtig sind mir zwei Dinge: Erstens, dass Einstellungen für einen vernünftigen (X)HTML-Quelltext bereits im Vorfeld getätigt werden (Einschließen der Attribute in Anfüs, Schließen aller geöffneten Elemente [<img src="[...]" />]), und zweitens, dass die Einstellungen für die Abstandhalterzellen auf "Automatisch". Ich WILL in meinem Layout keine von ImageReady eingefügten Abstandhalterzellen haben. Diese blähen den Quelltext auf und lassen ihn nur noch schwer lesbar erscheinen. Außerdem wirft man sie eh hinterher wieder 'raus. Habe ich also die Einstellung "Automatisch" gewählt, und hinterher in der generierten HTML-Datei sind Abstandhalterzellen zu finden, so habe ich etwas falsch gemacht. Entweder, ich habe nicht auf die Einhaltung des vorher erdachten "Gestaltungsrasters" bei der Sliceerstellung geachtet, oder ich habe eine Pixelverschiebung zweier Slices, die man häufig nur durch starken Zoom erkennen kann. Hier ist Fehlerkorrektur angesagt! Also Slices bearbeiten (unter Umständen zurück zu Punkt 2), und neu abspeichern!

6.)
(fast) feddisch.
Hier eine HTML-Quelle, wie sie idealerweise aus ImageReady kommen sollte:


Mal von den krummen Breitenangaben abgesehen (ich hab das nur schnell hingerotzt: Normalerweise sollte hier für eine gewisse Stringens gesorgt werden => Dann hat mans hinterher beim Errechnen der Tab-Breiten einfacher) überzeugt der Code durch seine Kürze... damit hab ichs nun ganz einfach in der Nachbearbeitung.

Ich habe nun eine große Tabelle, quasi ein Paket, welches mein Layout erhält. Diese Paket muss ich nun teilen, einfach, um meine Tabellenkonstruktion flexibel in der Höhe zu gestalten: Denn eine Webseite ist seltenst immer gleich hoch und mit immer gleich hohen Inhalten gefüllt. Das "Paket" ist nur für eine Höhe geschnürt, alles, was größer und evtl. auch kleiner ist, führt unter Umständen zu Anzeigefehlern!

7.)
Mein (grob) bearbeiteteter Quelltext:


Ich habe einfach ein wenig rumstrukturiert und mein Gestaltungsraster in seine Endform gebracht. Die Tabellenkonstruktion berücksichtigt nun Höhenänderungen. (vereinzelt habe ich vergessen, überflüssige Attribute wie colspans zu entfernen, sorry.) Offensichtlich ist die Teilung des "Pakets" in viele, einfach zu behandelnde Einzeltabellen. Am besten, ihr schaut euch den Quelltext mal an und Vergleicht mit dem Ursprung. Tippt ihn gerne ab und lasst euch die Rahmen der Tabellen anzeigen, indem ihr border="1" im Quelltext ändert. (Übrigens: Eine schöne Eintrückung mit Tabs oder Leerzeichen fördert zusätzlich die Lesbarkeit).

An dieser Stelle habe ich noch KEIN Bild ausgetauscht. Alles, was an Grafik "drin" ist, ist auch noch an Ort und Stelle.

8.)
Nun die Feinheiten. Als ersten erstelle ich aus den Beiden "Säulen" rechts und links nur wenige Pixel hohe "Pattern". Diese binde ich in den Quelltext als Hintergrundgrafik ein und ersetze die ursprünglichen Säulen durch Blindgifs("Spacer"). Da wir hier ein Layout auf die Art und Weise der Altvorderen erstellen, soll mir dies verziehen sein. CSS-Junkies haben hier eh nix zu suchen Grins


(Die Abbildung zeigt mich beim Freistellen der schon fertig gesliceten Säule – eigentlich doof, da diese Grafik bereits optimiert und damit Qualitativ ungenügend ist bzw. sein kann. Hier fällt euch sicher etwas Besseres ein *zwinker*)

Einige kleinere weitere Änderungen habe ich noch in der Aufteilung der Contenttabelle vorgenommen, damit die Grafik in der linken Spalte aufgeteilt und einmal oben und unten am Zellrand dargestellt werden kann. Dazu habe ich noch die Bilder getauscht, wo später Text erscheint, die Zellhintergründe gefärbt, wo es nötig ist, einige Spaltenbreiten und -höhen angepasst sowie die vertikale Zellausrichtung optimiert.

Voila! Natürlich steckt hier immer noch Arbeit drin, doch zur Veranschaulichung sollte das reichen. Hier das Endergebnis:
http://www.optimusprime.de/tut/index.html

rechte Maustaste, "Quelltext anzeigen", und ihr könnt euch ein Bild davon machen, was ich noch geändert habe. Danke fürs Lesen Lächel
 
shakadi
Griller Killer

Dabei seit: 21.12.2003
Ort: SHA
Alter: 43
Geschlecht: Männlich
Verfasst Fr 03.12.2004 08:33
Titel

Antworten mit Zitat Zum Seitenanfang

* Mmmh, lecker... *
  View user's profile Private Nachricht senden
Account gelöscht


Ort: -
Alter: -
Verfasst Mi 08.12.2004 16:09
Titel

Antworten mit Zitat Zum Seitenanfang

nee, keine Ursache!
 
 
Ähnliche Themen Webseite gestalten
Icon gestalten
Interfaceprototyp gestalten
Tabellenrahmen mit CSS gestalten
newsletter gestalten
CSS Listen ol gestalten
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.