[Misc] Design coden mit Adobe PhotoShop

Cool T
1. Mache dein layout und wechsel dann zu Adobe ImageReady (du kannst via einem Butten [beim screen rot gekennzeichnet] hingelangen)


2. Wähle dann den Slicer (wieder rot gekennzeichnet).


3. Damit zeichnest du das Main und ggf. Menü ein.


4Dann gehe auf Datei->Optimiert Version- speichern unter.
Speichere es einfach da ab, wo du es leicht findest.

5. Dann öffne die HTML Datei mit Frontpage/Dreamweaver.


6. Du kannst das Main Frame und die Menüleiste einzeln löschen.
Tu dies.

7. In diese Lücke füllst du nun mit I-Frames udn passt sie an.

8. Da wo du das Layout gespeichert hast findet du auch den Ordner "Bilder". Dort sind alle Teile des Layouts untergebracht. (diese hatte man mit Slicer ausgeschnitten)

9. Nehme das main-teil und das menue-teil für das jenige Frame als Hintergrund und fixiere sie ggf.

finish fröhlich .
Wurina
Sorry wenn ich mich blöd anstelle, ich finde den Tut echt klasse und möchte das coden ja auch lernen, aber was meinst du mit I-Frames einfügen?
.Happy
Genau das frage ich mich auch.

Zitat:
. Du kannst das Main Frame und die Menüleiste einzeln löschen.
Tu dies.

7. In diese Lücke füllst du nun mit I-Frames udn passt sie an.


Ab da verstehe ich es nicht mehr. Kannst du mal ein Screenhot machen oda so und das nochmal erklären???

Sonst ist der Klasse der TUT.
.Happy
Kann niemand helfen???? Oda jemand anderes es erklären???
Endless-Eternity
Ich hab nur Adobe Photoshop nicht Adobe Image Ready
.Happy
Adobe Image Ready ist immer dabei Endless-Enternity.
Endless-Eternity
bei mir nicht , welche version habt ihr?

EDIT: Frontpage oder Dreamwaver hab ich auch nciht
.Happy
Adobe Photoshop 7.

Bitte kann keiner helfen??
Celine
Ich wollte das Thema mal wieder hoch holen, da auch ich das nicht verstehe. Und wegen dem öffnen in Dreamweaver, einfach auf die Datei klicken und öffnen mit Dreamweaver machen?
*g*
Cool T
zu Celine : Du gehst auf Datei ->Datei->Optimiert Version- speichern , dort kann man es speichern, unter Dateiname (dort wo du den Namen eingibst) steht "Dateityp", da musst HTML und Bilder auswählen, dann speicherst du es irgendwo ab, wenn du dies getan hast,kannst du dann einfach die HTML-Datei öffnen.

Ich habe hier das Tutorial weiter geführt, weil ja manche den Schritt 6-8 nicht verstanden haben.
1. Step 1

2. Jetzt fügst du an dieser Stelle ein Mainframe an.

3. Gehe zu deinem Ordner wo du die Seite gespeichet hast und suche den Ordner "Bilder" dort sind die Teile des Layouts gespeichert. Suche deinen Main-Teil raus (oder was du eben ausgeschnitten hast).
Merke dir die Höhe und Breite.
Dazu gehöriges Bild

4. Gehe zurück zu Frontpage/Dreamweaver/co und gebe dort die Größe des Mainbildes im HTML code des IFrames an. (In Frontpage musst du nicht ewig suchen : du kannst einfach den Rand anklicken (dann sieht man so schwarze Pünktchen drumherum) und gehe dann unten links auf HTML, dann ist der Code blau <- das könnte auch bei Dreamweaver gehen)


5. Nun musst du nur dem IFrame den Hintergrund geben. Den findest du wie schon gesagt im Bilder-Ordner wo du deine Seite gespeichert hast und ggf. den Hintergrund fixieren.

Fertig.

Natürlich kann man das auch anders machen, aber ich wollte das man das leicht verstehen kann. (Ich hoffe man kann es überhaupt verstehen ^^)
lg Babz
Celine
Hey super. Vielen lieben Dank.
Ich werde es versuchen smile
.Happy
Und wo gibt man jetzt die Adressen fürs Menü und fürs Main ein???

Das ist mein Code:


Zitat:
<HTML>
<HEAD>
<TITLE>Layout</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 (Layout.jpg) -->
<TABLE WIDTH=900 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=5>
<IMG SRC="Bilder/Layoutsliceteile_01.gif" WIDTH=900 HEIGHT=216 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=216 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG SRC="Bilder/Layoutsliceteile_02.gif" WIDTH=270 HEIGHT=827 ALT=""></TD>
<TD ROWSPAN=2>
<img border="0" src="Bilder/Layoutsliceteile_03.gif" width="186" height="198"></TD>
<TD COLSPAN=3>
<IMG SRC="Bilder/Layoutsliceteile_04.gif" WIDTH=444 HEIGHT=36 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=36 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="Bilder/Layoutsliceteile_05.gif" WIDTH=45 HEIGHT=791 ALT=""></TD>
<TD ROWSPAN=2>
<img border="0" src="Bilder/Layoutsliceteile_06.gif" width="369" height="489"></TD>
<TD ROWSPAN=3>
<IMG SRC="Bilder/Layoutsliceteile_07.gif" WIDTH=30 HEIGHT=791 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=162 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="Bilder/Layoutsliceteile_08.gif" WIDTH=186 HEIGHT=629 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=327 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/Layoutsliceteile_09.gif" WIDTH=369 HEIGHT=302 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=302 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
monja
Ja ich weiß auch noch nicht so genau wo ich die größe/breite für main und menü eintragen soll weil bei mir wird nichts blau oderso... xD und wie man dem iFrame den Hintergrund gibt... verwirrt
ICh weiß ich stell mich doof an aber vielleicht kann mir das ja irgendjemand erklären damit ich es endlich kann!!!
Dein Tool ist der erste bei dem ich wneigstens etwas verstehe großes Grinsen
Julchen91
"Erledigt"

Habe es dank anderer Hilfe verstanden smile
.:~*Lianna*~:.
und ich habe keinen Schnall wo ich den Frontpage/Dreamweaver finde verwirrt
Julchen91
Dann hast du es vermutlich nicht.
.:~*Lianna*~:.
wo muss man das denn suchen?? Also gibts da nen Knopf oder so??
Julchen91
Du könntest mal wenn du unten auf Start klickst auf Suchen gehen und da mal nach schauen.
vrh-seeadler
Ich verstehe alles bis zu dem mit dreamweaver ... ich kann das desin dann nicht öffenne (als was muss ich die datei eig. abspeichern?)
banni
ist zwar gut erklärt, aber die bilder gehen nicht mehr und ich verstehe nur bahnhof...