trefixxx
07.05.2004, 14:01
Tutorial: Homepage mit Photoshop 7.0
Vorraussetzung: Photoshop 7.0; Editor (etwa Windowseditor oder Frontpage etc.)
Zuvor musst du natürlich deine Homepage selber erstellen. Benutze dann das Slicetool. Schneide (Sclice) nun deine homepage so, dass du ein bild für den content, den header und vielleicht für den footer hast.
Jetzt musst du dich entscheiden, ob die links zu deinem content bilder sein sollen (version 1) oder normale links in einer .html-datei (version 2).
Ich werde beide möglichkeiten beschreiben.
Version 1:
Da deine links durch ein bild zu erreichen sein sollen, musst du diese logischerweise extra schneiden. Das heißt, wenn du beispielsweise einen Link "About me" und einen Link "Home" haben willst, musst du ein bild haben, was nur die schrift "About me" zeigt und eines, das nur die Schrift "Home" zeigt.
Wechsle nun zu "ImageReady". Dort kannst du dir nun alle slices, die du gemacht hast noch einmal anschauen.
Wähle nun den slice, der später der content sein soll, im Fenster "Rollover" (Fenster -> Rollover) an und klicke im Fenster "Slice" (Fenster -> Slice) in dem Drop-Down Menü auf "Kein Bild". Darunter ist dann ein textarea Feld, worein du folgendes kopierst:
Setze für BREITE und HÖHE in dem code die genauen daten ein, die du unten links in dem Slice-Fenster findest.
Nun kommen deine bilder dran, die die links sind. Wähle diese jeweils einzeln im Rollover-Feld aus.
In dem Drop-Down Menü im Slice-Feld muss aber nun "Bild" stehen. Darunter findest du drei textarea Felder. Einmal "name", dann "URL" und dann "Ziel".
Den Eintrag im Feld "Name" lässt du stehen. In das, wo "Url" steht, gibst du die datei ein, die später mit diesem bild verlinkt werden soll. In meinem beispiel für "About Me" aboutme.html. In dem feld "Ziel" gibst du den framenamen an, in dem der inhalt der .html-datei stehen soll. In meinem fall mainframe.
Das wiederholst du mit allen anderen bildern, die verlinkt werden sollen und gibst entsprechend andere inhalte ein.
Damit du die einstellungen später nicht nochmal wiederholen musst, wenn du etwas ändern möchtest, speichere den slice einfach unter Slice -> Slice-Auswahl speichern...
Jetzt nur noch alles in eine .html-datei konvertieren, das du unter datei -> optimierte version speichern unter... machen kannst.
Wähle einen pfad aus et Voilà, deine homepage ist fertig. Im Editor musst du jetzt einfach noch deine restlichen seiten erstellen.
Version 2:
Zu dne anderen slices musst du nun aber noch einen weiteren erstellen, worein du die links per editor einfügen kannst.
Wechsle nun zu "ImageReady". Dort kannst du dir nun alle slices, die du gemacht hast noch einmal anschauen.
Wähle nun den slice, der später der content sein soll, im Fenster "Rollover" (Fenster -> Rollover) an und klicke im Fenster "Slice" (Fenster -> Slice) in dem Drop-Downn Menü auf "Kein Bild". Darunter ist dann ein textarea Feld, worein du fongendes kopierst (der iframe):
Setze für BREITE und HÖHE in dem code die genauen daten ein, die du unten links in dem Slice-Fenster findest.
Nun kommt dein bild dran, worein du nachher deine links per editor einfügen kannst. Wähle bei diesem ebenfalls "Kein bild" in dem drop-down menü. Hier fügst du folgendes ein:
Das ist ein weiterer iframe. In einer datei menue.html, die du noch erstellen musst, müssen nun die links stehen.
Wenn du willst, dass der inhalt der verlinkten seiten im mainframe geöffnet werden, musst du folgenden code angeben!
<a href="SEITE MIT INHALT" target="mainframe">Link1</a>
Und fertig.
Damit du die einstellungen später nicht nochmal wiederholen musst, wenn du etwas ändern möchtest, speichere den slice einfach unter Slice -> Slice-Auswahl speichern...
Jetzt nur noch alles in eine .html-datei konvertieren, das du unter datei -> optimierte version speichern unter... machen kannst.
Wähle einen pfad aus et Voilà, deine homepage ist fertig. Im Editor musst du jetzt einfach noch deine restlichen seiten erstellen.
Viel Spaß mit dem tutorial!
© by "nobody" 6th Generation
6thgeneration.sunsonic.de/wbboard
generation.part.de.tt
Wenn ihr es gelesen habt, gebt mir bitte feedback, was unverständlich ist etc...
EDIT: ich glaub es ist etwas kompliziert geschrieben...
Vorraussetzung: Photoshop 7.0; Editor (etwa Windowseditor oder Frontpage etc.)
Zuvor musst du natürlich deine Homepage selber erstellen. Benutze dann das Slicetool. Schneide (Sclice) nun deine homepage so, dass du ein bild für den content, den header und vielleicht für den footer hast.
Jetzt musst du dich entscheiden, ob die links zu deinem content bilder sein sollen (version 1) oder normale links in einer .html-datei (version 2).
Ich werde beide möglichkeiten beschreiben.
Version 1:
Da deine links durch ein bild zu erreichen sein sollen, musst du diese logischerweise extra schneiden. Das heißt, wenn du beispielsweise einen Link "About me" und einen Link "Home" haben willst, musst du ein bild haben, was nur die schrift "About me" zeigt und eines, das nur die Schrift "Home" zeigt.
Wechsle nun zu "ImageReady". Dort kannst du dir nun alle slices, die du gemacht hast noch einmal anschauen.
Wähle nun den slice, der später der content sein soll, im Fenster "Rollover" (Fenster -> Rollover) an und klicke im Fenster "Slice" (Fenster -> Slice) in dem Drop-Down Menü auf "Kein Bild". Darunter ist dann ein textarea Feld, worein du folgendes kopierst:
PHP-Code:
<IFRAME NAME="mainframe" SRC="start.html" FRAMEBORDER="0" SCROLLING="auto" WIDTH="BREITE" HEIGHT="HÖHE"></IFRAME>
Setze für BREITE und HÖHE in dem code die genauen daten ein, die du unten links in dem Slice-Fenster findest.
Nun kommen deine bilder dran, die die links sind. Wähle diese jeweils einzeln im Rollover-Feld aus.
In dem Drop-Down Menü im Slice-Feld muss aber nun "Bild" stehen. Darunter findest du drei textarea Felder. Einmal "name", dann "URL" und dann "Ziel".
Den Eintrag im Feld "Name" lässt du stehen. In das, wo "Url" steht, gibst du die datei ein, die später mit diesem bild verlinkt werden soll. In meinem beispiel für "About Me" aboutme.html. In dem feld "Ziel" gibst du den framenamen an, in dem der inhalt der .html-datei stehen soll. In meinem fall mainframe.
Das wiederholst du mit allen anderen bildern, die verlinkt werden sollen und gibst entsprechend andere inhalte ein.
Damit du die einstellungen später nicht nochmal wiederholen musst, wenn du etwas ändern möchtest, speichere den slice einfach unter Slice -> Slice-Auswahl speichern...
Jetzt nur noch alles in eine .html-datei konvertieren, das du unter datei -> optimierte version speichern unter... machen kannst.
Wähle einen pfad aus et Voilà, deine homepage ist fertig. Im Editor musst du jetzt einfach noch deine restlichen seiten erstellen.
Version 2:
Zu dne anderen slices musst du nun aber noch einen weiteren erstellen, worein du die links per editor einfügen kannst.
Wechsle nun zu "ImageReady". Dort kannst du dir nun alle slices, die du gemacht hast noch einmal anschauen.
Wähle nun den slice, der später der content sein soll, im Fenster "Rollover" (Fenster -> Rollover) an und klicke im Fenster "Slice" (Fenster -> Slice) in dem Drop-Downn Menü auf "Kein Bild". Darunter ist dann ein textarea Feld, worein du fongendes kopierst (der iframe):
PHP-Code:
<IFRAME NAME="mainframe" SRC="start.html" FRAMEBORDER="0" SCROLLING="auto" WIDTH="BREITE" HEIGHT="HÖHE"></IFRAME>
Setze für BREITE und HÖHE in dem code die genauen daten ein, die du unten links in dem Slice-Fenster findest.
Nun kommt dein bild dran, worein du nachher deine links per editor einfügen kannst. Wähle bei diesem ebenfalls "Kein bild" in dem drop-down menü. Hier fügst du folgendes ein:
PHP-Code:
<IFRAME NAME="menue" SRC="menue.html" FRAMEBORDER="0" SCROLLING="auto" WIDTH="BREITE" HEIGHT="HÖHE"></IFRAME>
Das ist ein weiterer iframe. In einer datei menue.html, die du noch erstellen musst, müssen nun die links stehen.
Wenn du willst, dass der inhalt der verlinkten seiten im mainframe geöffnet werden, musst du folgenden code angeben!
<a href="SEITE MIT INHALT" target="mainframe">Link1</a>
Und fertig.
Damit du die einstellungen später nicht nochmal wiederholen musst, wenn du etwas ändern möchtest, speichere den slice einfach unter Slice -> Slice-Auswahl speichern...
Jetzt nur noch alles in eine .html-datei konvertieren, das du unter datei -> optimierte version speichern unter... machen kannst.
Wähle einen pfad aus et Voilà, deine homepage ist fertig. Im Editor musst du jetzt einfach noch deine restlichen seiten erstellen.
Viel Spaß mit dem tutorial!
© by "nobody" 6th Generation
6thgeneration.sunsonic.de/wbboard
generation.part.de.tt
Wenn ihr es gelesen habt, gebt mir bitte feedback, was unverständlich ist etc...
EDIT: ich glaub es ist etwas kompliziert geschrieben...