nicht angemeldet
Import Photoshopgraphik -> HTML
Es gibt ja bekanntlicher Weise die Option bei Adobe Photoshop ein Bild in verschiedene Teile zu splitten und als HTML zu speichern. Macht man das, so sieht der Quelltext wie folgt aus:
<HTML>
<HEAD>
<TITLE>Unbenannt-1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Unbenannt-1.psd) -->
<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=2>
<IMG SRC="01 Freiraum_links.gif" WIDTH=125 HEIGHT=768 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="02 Leiste_links.gif" WIDTH=46 HEIGHT=768 ALT=""></TD>
<TD>
<IMG SRC="03 Header.gif" WIDTH=679 HEIGHT=133 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="04 Leiste_rechts.gif" WIDTH=47 HEIGHT=768 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="05 Freiraum_rechts.gif" WIDTH=127 HEIGHT=768 ALT=""></TD>
</TR>
<TR>
<TD>
<img src="06 Body.gif" WIDTH=679 HEIGHT=635 ALT="">
</TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Mann kann also keinen Text auf den Hintergrund eines Bildes machen. Es sei denn man schreibt ihn wie folgt um (siehe Body):
<HTML>
<HEAD>
<TITLE>Unbenannt-1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Unbenannt-1.psd) -->
<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=2>
<IMG SRC="01 Freiraum_links.gif" WIDTH=125 HEIGHT=768 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="02 Leiste_links.gif" WIDTH=46 HEIGHT=768 ALT=""></TD>
<TD>
<IMG SRC="03 Header.gif" WIDTH=679 HEIGHT=133 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="04 Leiste_rechts.gif" WIDTH=47 HEIGHT=768 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="05 Freiraum_rechts.gif" WIDTH=127 HEIGHT=768 ALT=""></TD>
</TR>
<TR>
<TD background="06 Body.gif" WIDTH=679 HEIGHT=635 ALT="">
Home</TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Der Text ist nun "Home". Dieser befindet sich auf der Page allerdings nicht da, wo er sein soll, er soll am obersten Rand des Bodys sein, befindet sich allerdings genau in der mitte. Siehe:
http://www.desert-star.de/Design1.html
Wie kriege ich den Text weiter nach oben?!
Abschließnd bitte ich euch mein Design zu beurteilen bzw. Verbesserungsvorschläge zu machen. Der Inhalt wird natürlich vervollständigt, sowie auch ein Header entstehen wird.
Vielen Dank im Vorraus,
mfG Fabian Förster.
-
Hallo,
schreib in den <head> Bereich:
<style type="text/css">
td {vertical-align:top;}
</style>Mit dieser CSS-Anweisung bewirkst du, dass die Inhalte von <td> vertikalgesehen oben ausgerichtet werden.
Da es sich anscheinend um eine CS-Seite handelt, erspare ich mir weitere Kommentare zum Layout ;)
mfg NAG
--
signatur -
Hi Fabian,
kürze doch beim nächsten Mal bitte den Code auf die Stellen, auf die es ankommt!
Es gibt ja bekanntlicher Weise die Option bei Adobe Photoshop ein Bild in verschiedene Teile zu splitten und als HTML zu speichern. Macht man das, so sieht der Quelltext wie folgt aus:
<TD background="06 Body.gif" WIDTH=679 HEIGHT=635 ALT="">
Home</TD>Der Text ist nun "Home". Dieser befindet sich auf der Page allerdings nicht da, wo er sein soll, er soll am obersten Rand des Bodys sein, befindet sich allerdings genau in der mitte.
Wie kriege ich den Text weiter nach oben?!
Setz ihn mal in sinnvolle Tags (p, h1, oder was er eben in Deiner Site soll) und ordne ihm dann per CSS eine Position zu. Wenn Du CSS erst lernen musst, dann lad Dir doch TopStyle runter, da kann man die verschiedenen Eigenschaften anklicken und sehen was passiert.
Viele Grüße
Mathias Bigge -
Hallo Fabian,
du wolltest wissen, wie man das "Home" an die richtige Stelle bekommt.
Nun ja, ein kleiner Tipp; beschäftige dich mit den Grundlagen von HTML und CSS, damit sollte dir geholfen werden.
Mit einem Programm wie Photoshop wirst du mittels HTML-Export NIEMALS das erreichen, was du eigentlich willst, dafür sind dieses und auch andere Grafikprogramme einfach nicht ausgerichtet.
Schade, dass die Seite schon wieder offline ist, sonst hätte ich wahrscheinlich noch geschrieben, dass dein Design nichts, aber auh wieklich nichts ist.
Soll die Seite www.grauemaus.de heißen?
Ne, da fehlt Kontrast, Farbe und irgendwas Originelles; auch ohne Header lässt sich da nicht viel sagen.
MfG
Dark SIder
-
Hi,
Der Inhalt wird natürlich vervollständigt, sowie auch ein Header entstehen wird.
Hast Du Dir schonmal überlegt, wie Du das anstellen willst?
Du hast ein Bild in einem Bildbearbeitungsprogramm gebastelt. Ok.
Dann in Teile zerschnitten. Im Prinzip ok, aber eine völlig unzureichende Aufteilung.
Und jetzt läßt Du die Teile wieder zu einem Bild zusammensetzen.Mal ehrlich: wozu der ganze Aufwand? Da hättest Du das Bild auch so wie es ist online stellen können. Das hätte nichts an der Tatsache geändert, daß Du auf einem Bild keinen Text in vernünftiger Weise setzen kannst.
Entscheide Dich, ob Du Bilder oder HTML-Seiten erstellen willst. Für letzteres ist ein Bildbearbeitungsprogramm alleine nicht geeignet.
freundliche Grüße
Ingo-
Hi Ingo,
ich will versuchen, Deine Tipps für den AUsgangsposter ein bisschen zu konkretisieren:
Du hast ein Bild in einem Bildbearbeitungsprogramm gebastelt. Dann in Teile zerschnitten.
Und jetzt läßt Du die Teile wieder zu einem Bild zusammensetzen.
Mal ehrlich: wozu der ganze Aufwand? Da hättest Du das Bild auch so wie es ist online stellen können.Richtig, der Sinn von Slices ist, hinter einzelne Bildteile Links setzen zu können, etwa für eine interaktive Karte, oder unterschiedliche Bereiche eines Bildes unterschiedlich zu bearbeiten, um bestimmte Effekte zu erzielen, oder nur einen Teil des Bildes zu animieren.
Entscheide Dich, ob Du Bilder oder HTML-Seiten erstellen willst. Für letzteres ist ein Bildbearbeitungsprogramm alleine nicht geeignet.
Richtig, aber nun hat er seinen Entwurf in Photoshop und vielleicht könnten wir ihm ein bisschen auf die Sprünge helfen, wie er von da aus weiter vorgehen kann.
Um es an einem Beispiel zu zeigen:
Du, lieber Ausgangsposter, willst eine graue Fläche mit einem plastischen Rand.
Dann schneidest Du von Deiner Grafik einen kleinen Streifen für den Rand ab und komrimierst ihn im Photoshop. Dann erzeugst Du per HTML (div oder td) die entsprechende Fläche und fügst am Rande Dein Bild ein, etwa als Hintergrundgrafik, wenn das geht oder als <img>, dann positionierst Du es mit CSS. Dann hast Du deutlich Übertragungskapazität gespart und kannst in Deine Fläche ganz normalen Text einfügen. Auch den formatierst Du wieder mit Hilfe von CSS.Da gibt es natürlich einiges zu lernen aber schwerer als Photoshop ist es auch nicht *g*
Viele Grüße
Mathias Bigge-
Hi,
Richtig, der Sinn von Slices ist, hinter einzelne Bildteile Links setzen zu können,
wofür aber das Aufteilen dank der Elemente map und area sowie des Attributs usemap eigentlich nicht notwendig ist.
Für die anderen genannten Zwecke kann es aber notwendig/sinnvoll sein.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da. -
Hi Mathias,
ich will versuchen, Deine Tipps für den AUsgangsposter ein bisschen zu konkretisieren:
Dein Engagement in Ehren, aber ich denke, daß Fabian hier ziemlich überfordert sein wird.
Äußerungen von ihm wieMann kann also keinen Text auf den Hintergrund eines Bildes machen.
und
Es sei denn man schreibt ihn wie folgt um (siehe Body):
wobei hier unter "umschreiben" der verzweifelte Versuch gemeint war, irgendwo in der Tabelle einen Inhalt einzufügen, ohne daß sich die Positionierungen der Grafiken verändert - was nunmal über HTML nur am Ende möglich ist.
Ich denke eher, daß sich Fabian das Slicen sparen sollte und entweder die Grafik komplett als Hintergrundbild für body verwendet und dann zumindest für Besucher mit einem so großem Fenster und normaler Schriftgradeinstellung seine Inhalte darüber zu platzieren versucht - oder daß er seine Ziele zuächst mal nicht so hoch setzt und mit einem einfacher umzusetzenden Layout beginnt.
freundliche Grüße
Ingo-
Ich habe mich nun dazu entschlossen, die komplette Graphik als Hintegrundbild zu verwenden und dann den Bodybereich mit einem iframe versehen werde...
-
Hi Förster,
Ich habe mich nun dazu entschlossen, die komplette Graphik als Hintegrundbild zu verwenden und dann den Bodybereich mit einem iframe versehen werde...
Womit Ingo mit seiner Bemerkung zu meinem Posting Recht behält *g* Eine wirklich gute Lösung ist das auf Dauer nicht, aber vielleicht kommst Du ja noch auf den Trichter. Viel Erfolg auf jeden Fall.
Viele Grüße
Mathias Bigge
-
-
-
-