Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Sonstiges Tutorial: Enterpage slicen und anpassen (Adobe Photoshop und Dreamweaver)



Ranking: +4   Kommentare: 9   |   Bewertung: Keine Berechtigung!  

In diesem Tutorial zeige ich euch, wie ihr eine Enterpage in Photoshop sliced und anschließend an Dreamweaver anpasst.
So sieht es aus wenn es fertig ist !!!
http://liikethiis.li.funpic.de/
Unsere Enterpage bekommt einen Rollovereffekt. das heisst beim rüberfahren der Maus, nimmt unser Enterbutton eine andere Farbe an.

Wir fangen an mit Photoshop!!!

Ich habe für euch hier eine kleine Enterpage vorbereitet!!!
1.Blick
1.Blick


Wir fangen an mit dem Slicen dazu öffnet ihr links das Slice-Werkzeug und fängt an zu slicen.
Slicewerkzeug
Slicewerkzeug


Slicen ist sehr einfach daher bin ich nicht bereit dies zu erklären.

slicen
slicen


Achtet darauf dass ihr um euren Enterbutton sliced so wie auf dem bild..:)
endslice
endslice


Nachdem ihr gesliced habt, geht ihr auf Datei - Für Web und Geräte speichern.
Wählt dazu:
Dateiformat: JPEG
Qualität: 100%

und klickt auf Speichern.

nennt die Datei index
und achtet darauf, dass unten "Alle Slices" steht !!!!
und klickt auf Speichern.

Jez färbt bzw. Gestaltet euer Enterbutton so wie ihr es beim Rüberfahren der Maus haben wollt.
Mein Enterbutton bekommt einen anderen Verlauf.


Enterbutton
Enterbutton


So nachdem euer Enterbutton eine andere gestalt angenommen hat, öffnet links das
Slice-Auswahlwerkzeug und markiert die Slicemarkierung um euren Enterbutton.
die Markierung scheint gelb. Dannach geht ihr wieder auf Datei - Für Web und Geräte Speichern.
JPEG dateiformat und die Qualität auf 100%.
und klickt auf Speichern.
ACHTET JETZT DARAUF DASS UNTEN "AUSGWÄHLTES SLICE" Emarkiert ist. denn wir wollen ja nur den Button.
mit Photoshop sind wir zunächst fertig. Lasst es aber noch offen, denn wir benötigen noch PS für die maße.

Dreamweaver:
Erstellt ein neues HTML-Dokument.

in die Codeeinsicht gibt ihr nun folgenden Code ein:

Code:


<center></center>


Dieser Code ist dafür veranwortlich, dass die Enterpage später in der mitte steht.
center
center


Geht dannach auf Das Tabellen Symbol.
und entnimmt die maße:
Zeilen:0
Spalten:0
Tabellenbreite bei mir 800px - Pixel
randstärke: 0
Zellauffüllung: 0
Zellabstand: 0
klickt auf OK.

So klickt in die Zeile und dann wieder auf das Tabellen symbol.
meine Enterpage hat 3 Zeilen.
Zeilen: 3
Spalten:0
Tabellenbreite: 100 - PROZENT!!!!!
randstärke: 0
Zellauffüllung: 0
Zellabstand: 0
OK.

In der 2 Zeile hat meine Enterpage 3 Spalten.
Ich gehe auf die 2 Zeile und klicke wieder auf das Tabellensymbol.
Zeilen:0
Spalten:3
Tabellenbreite: 100-Prozent
randstärke: 0
Zellauffüllung: 0
Zellabstand: 0

Jetzt übertragt ihr die maße der einzelnen Zeilen und spalten.
Unten steht das Eigenschaftsfenster. da gebt ihr eure maße in den einzelnen zeilen und spalten ein.


Maße DW
Maße DW


um schnell nachzusehen wie die maße eurer einzelnen Bilder sind.
wechselt ihr wieder zu Photoshop und öffnet das Slice-Werkzeug
rechtsklick auf ein geslicedtes bild.
Sliceoption
Sliceoption

entnimmt die maße der einzelnen Bilder und fügt die maße jeweils in Dreamweaver ein.
Wenn ihr dies geschafft habt, fügen wir die Bilder ein.
wechselt zu DW.
Klickt auf die 1. Zeile
und geht oben auf Einfügen - Bild (STRG + Alt + i)
und fügt alle bilder in die entsprechenden Felder ein.
Lasst das Feld mit dem Enterbutton Frei, denn dies brauchen wir dann für den Rollovereffect



Klickt auf das Feld indem der Enterbutton reinkommt.
Geht oben auf Einfügen - Grafikobjekte - Rolloverbild





Jetzt fehlt nur noch die Hintergrundfarbe.
Dazu geht ihr oben auf Modifizieren - Seiteneigenschaften.
Wählt die Hintergrundfarbe aus und klickt auf OK.



Jetzt nur noch Abspeichern.
Datei - Speichern Unter
Benennt diese datei in index.html
Beim hochladen einfach die index.html datei und die Bilder hochladen!!!

Fertig ist eure Enterpage ich hoffe, ich konnte euch ein bisschen Weiterhelfen.
bei Fragen können sie sich jederzeit bei mir melden.
Gruß Daniel :)

Veröffentlicht von: danix
Veröffentlicht am: 12 Jan. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Adobe anpassen daniX Dreameweaver DW Enterpage Photoshop ps slicen


Themenverwandte Tutorials


Kommentar(e) (9)


araque sagt:

Also ey Tabellen im Jahr 2009?
Naja Punkte haschen nenn ich sowas !!!!

27 Oct. 2010 23:37:53 • Antworten


distructor sagt:

Mit css Sprich via "div boxen" geht das wesentlich einfacher da brauchste dann auch nichts zu slicen sondern kannst das bild im ganzen lassen und setzt einfach eine div box über das wort Enter und kannst es verlinken um zur nächsten seite zu kommen, muss jetzt leider los sonst würde ichs euch ausführlich erklären mit code usw. mal schauen wenn ich die tage zeit kriege helf ich euch dort mal weiter.

gruß d!s

26 Jan. 2009 17:26:24 • Antworten


Yorcki1234 sagt:

geil das würde mir extrem weiterhelfen:D:D:D:D

15 Jan. 2009 15:02:27 • Antworten


deleted_1373545880 sagt:

Wenn ich mal Zeit hab poste ich nen Tutorial mit einer einfachen Navigation mit rollover effekt per css.

15 Jan. 2009 10:28:00 • Antworten


Yorcki1234 sagt:

würde mcih auch freuen,wenn ich wüsste,wie man das mit css besser macht-.-

14 Jan. 2009 20:03:16 • Antworten


danix sagt:

joa danke emm habt ihr vll n tutorial. ich check wirklich vieles durch.
Aber bei CSS bleib ich immer hängen.
danke..:)

14 Jan. 2009 14:04:59 • Antworten


deleted_1373545880 sagt:

Wie wäre es erstmal CSS zu lernen ? (:

Veraltetes Tut!

14 Jan. 2009 09:18:30 • Antworten


vanDerb sagt:

Für Anfänger wohl gut.
@ Yorcki1234. Mit dem Slicen läuft so oder so ähnlich ab. Jedoch die Anpassung in dem Tutorial gefällt mir nicht wirklich. Tabellenlayouts, kann man in etwa vergleichen mit Windows 95 = veraltet. CSS-Layouts sind heutzutage viel häufiger anzutreffen und gehören normalerweise zum Standartrepertoir einer professionellen Internetpräsenz.

Tutorial ist für den Anfang ok, wer mit html anfängt wird so oder so zuerst auf das Tabellenlayout zurückgreifen....

13 Jan. 2009 23:39:35 • Antworten


Yorcki1234 sagt:

damit mahct man dann seine ganze hp?? also natürlich noch mit vielen adneren .html dateien halt.man muss also immer nur slicen und das denn so machen?? geil ,danke ,das hab ich gebraucht:D:D:D:Doder hatse noch mehr tuts wo hps mit photoshop udn dreamweaver erstellt werden?? sonst verständliches tut

P.S:ich weiß nur nicht recht mit den tabellen hab ich dann 4 zeilen??

Zuletzt bearbeitet am: 13 Jan. 2009 20:06:39

13 Jan. 2009 18:37:42 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder