Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
ypsiw
Threadersteller
Dabei seit: 08.10.2002
Ort: Nienhagen
Alter: 44
Geschlecht:
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 02.12.2004 18:36
Titel
|
|
|
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
|
|
|
ypsiw
Threadersteller
Dabei seit: 08.10.2002
Ort: Nienhagen
Alter: 44
Geschlecht:
|
Verfasst Do 02.12.2004 18:57
Titel
|
|
|
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.
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 02.12.2004 19:00
Titel
|
|
|
Najuuut... 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:
|
Verfasst Do 02.12.2004 19:03
Titel
|
|
|
XSchinkenX hat geschrieben: | Najuuut... 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.
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ür Mediengestalter!<br><br>
Diese Seite hat ein neues Design bekommen. Es ist so sehr übersichtlich und einfach gestaltet. Hoffe es gefällt Euch und würde mich über ein kleines Feedback freuen. <br>
<br>
Auf diesen Seiten möchte ich Euch so viele Informationen und Themen bereitstellen, die ein Mediengestalter während seiner Ausbildung und auch danach benötigt.<br>
<br>
Falls noch weitere Ideen/Themen aufkommen, würde ich mich über eine kleine E-Mail freuen.<br>
<br>
Und nun wünsche ich viel Spaß mit dieser Seite!<br>
<br>
Gruß<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>
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 02.12.2004 23:50
Titel
|
|
|
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
(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 )
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
|
|
|
|
|
shakadi
Griller Killer
Dabei seit: 21.12.2003
Ort: SHA
Alter: 43
Geschlecht:
|
Verfasst Fr 03.12.2004 08:33
Titel
|
|
|
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Mi 08.12.2004 16:09
Titel
|
|
|
nee, keine Ursache!
|
|
|
|
|
|
|
|
Ähnliche Themen |
Webseite gestalten
Icon gestalten
Interfaceprototyp gestalten
Tabellenrahmen mit CSS gestalten
newsletter gestalten
CSS Listen ol gestalten
|
|
|
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.
|
|