Photoshop-Cafe.de :: Dein Photoshop-Forum - Image Ready: Homepage im PS

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Hilfestellung, Tipps und Tricks (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=30)

- - Image Ready: Homepage im PS (https://www.photoshop-cafe.de/forum/showthread.php?t=1753)

Image Ready: Homepage im PS

Hallo,

ich hoffe es ist in Ordnung wenn ich ein neues Thema mache, habe wahrscheinlich 100 Fragen, so kann ich alle hier stellen.

Also die ersten Fragen tauchen schon auf:

1. Im Tut "Eigene Homepage Teil 1 - Layout " hab ich gelesen, das man das Dokument mit 1000px x 700px öffnet. Ist das empfehlenswert oder ist besser 800 x 600?

2. wird ja beschrieben, dass man zuerst den Header macht, dann die Navigation und danach den Inhalt (also in drei Teilen). Ist den mein Buch unbrauch bar, da dieses nicht aus einzelen Teilen besteht? Also kann ich mein Buch dann einfach in zwei Teilen unterteilen (Slicen) im Nachhinein?

kannst alles erstmal in ps malen. am besten komplett
alle unterseiten fertig malen, alles auf einzelne ebenen. die komplette
homepage als ein photoshop dokument. größe nach geschmack,
slicen kannst du alles am schluß.
mach nicht zuviel "grafik" das werden ja alles jpgs, plane einfarbige
flächen ein um ladezeit rauszuholen. in ir sagst du zu den einzelnen
slices : sei ein jpg, sei eine einfarbige tabelle usw

die grösse musst du selber wissen.

ich persönlich mag keine seiten die für 1024x768 (windows)optimiert sind, das bedeutet immer vollbild und ich habe z.b. rechts den dock und ein browserfenster nie im vollbildmodus, also immer scrollbalken.

was genau meinst du mit alle unterseiten fertig malen? also jede einzelne seite die durch das menü aufrufbar ist? also dann nur als uni seite und nicht direkt auf dem "buch"? was ist wenn ich fotos einfügen will, wie auf meiner hp, zb unter dem menüpunkt "portrait" (www.flatcoated-ewok.ch)?

Zitat:

was genau meinst du mit alle unterseiten fertig malen? also jede einzelne seite die durch das menü aufrufbar ist?

Zitat:

also dann nur als uni seite und nicht direkt auf dem "buch"?

beim buch links hast du ja deine navogation, rechts die einzelnen seiten. in die einzelnen leeren seiten kannst du tabellen einbauen mit einer hintergrundfarbe die der buchseitenfarbe entspricht. dann brauchst du kein bild da und sparst schon mal ladezeit. ausserdem kannst du deine inhalte wie text, photos etc dann in die tabellen einbauen. pro seite/link dann also ne tabelle ...

in imageready hast du immer noch die ebenenpalette
dort schaltest du die benötigten ebenen sichtbar/unsichtbar
du willst ja eine "home.html" und eine "fotos.html" usw generieren
und wenn du erst deinen gesamten auftritt in einer .psd datei hast
und aus dieser datei alle seiten generierst hast du alle zu deiner webseite
gehörenden elemente in einem bilderordner ist halt ordentlicher so

ich hatte mal verschiedene .psd dateien angelegt eine "home.psd" eine
"links.psd" usw aber dann kriegst du evtl jedesmal neue namen für
navi elemente usw verpasst die dann beim klick auf einen link wieder
neu geladen werden weil ir benennt slices nach dem .psd-dateinamen blabla... seitdem mach ich eine einzige .psd
in der die gesamte webseite drin ist

Warum nen neuen Thread?

Der muß doch erstmal gefunden werden :D

Also bei deinem Beispiel würde ich einmal slicen und dann die Inhalte per HTML einfügen.

Ich denke du hast keine Hover-Effekte oder ähnliches geplant, also sollte das mit einem mal funktionieren.

Danach kannst du einen Iframe erstellen, dann ist die Größe des Buches auch bei mehr Text-Inhalt egal.

Für die unterseiten mußt du dann nur noch die "Inhalte" als html abspeichern den Dokumenten die gleiche Hintergrundfarbe geben, wie dem Buch und gut ist, so mehr oder weniger.

Jede einzelne Seite mit PS zu erstellen halte ich persönlich für unsinnig.

Gruß
Holger

Ich krieg keine Tabelle hin:fragen: . ist das unter Bild-Modus-Farbtabelle? Das kann ich gar nicht anklicken.

Noch eine Frage, es ist aber schon möglich, Fotos in die HP einzubauen. Habe nähmlich viele Fotos, welche ich nicht jedesmal in einem neuen Fenster öffnen möchte.

Willst Du die Tabelle mit Photoshop machen?

selbstverständlich kannst du photos in deine webseite einbauen :)

wo bekommst du keine tabelle hin? zeichne mal auf wo und wie die tabelle aussehen soll und wo die rein soll in welches file

kam im moment überhaupt nicht dazu weiterzumachen. Aber nun:

auf die frage mit den tabellen kam ich, weil phoenix folgendes schrieb:

Zitat:

kannst du deine inhalte wie text, photos etc dann in die tabellen einbauen.

nun dachte ich, ich müsste irgendeine tabelle einbauen :nixweiss:

nun noch eine weitere frage, ist es möglich, mit dem buch-design es so zu machen, dass sich das ganze in die länge zieht, wenn ein längerer text erscheint, oder muss ich mit dem platz vom design auskommen (bewz ewigkeiten scrollen)? Hoffe ihr versteht meine frage :emo_biggr . ansonsten würde ich nähmlich auf das buch verzichten und ein etwas einfacheres design (für den anfang nehmen).

Hallo,

hab mal wieder Fragen. Ich habe die HP mit align="center" zentriert, nun ist sie schön mittig, doch oben "klebt" die Seite noch ganz am Rand. Wie krieg ich die HP von diesem Rand weg?

Weiter habe ich ja beim Inhalt ein Hintergrundbild. Leider klappt da was nicht mit dem Codieren, den da steht nur wie man eine Farbe eingibt. Doch da ich ein HG-Bild habe funktioniert dies nicht wirklich. Wie füge ich also ein HG-Bild ein?

Zur letzten Frage, hab ja nun ein aufklappbares Menü gemacht. Ich hoffe das hab ich richtig angestellt, den nun hat jedes Untermenü einen eigenen Inhalt bekommen (zB. Bilder/inhalt-portrait_over.gif) :fragen: .
Ich kanns im Moment nicht in der Vorschau anschauen, da mir ja der Inhalt fehlt. Doch ich hoffe, dass das Menü nun bleibt, wenn man mit der Maus darüber fährt und ich das alles bis jetzt einigermassen richtig angestellt hab.

HTML-Code:

<html>

<head>

<title>21</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

<!--



function newImage(arg) {

        if (document.images) {

                rslt = new Image();

                rslt.src = arg;

                return rslt;

        }

}



function changeImages() {

        if (document.images && (preloadFlag == true)) {

                for (var i=0; i<changeImages.arguments.length; i+=2) {

                        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

                }

        }

}



var preloadFlag = false;

function preloadImages() {

        if (document.images) {

                inhalt_portrait_over = newImage("Bilder/inhalt-portrait_over.gif");

                inhalt_galerie__over = newImage("Bilder/inhalt-galerie-_over.gif");

                inhalt_sonstiges___over = newImage("Bilder/inhalt-sonstiges--_over.gif");

                inhalt_www___over = newImage("Bilder/inhalt-www--_over.gif");

                inhalt_gaeste_over = newImage("Bilder/inhalt-gaeste_over.gif");

                preloadFlag = true;

        }

}



// -->

</script>

</head>

<body bgcolor="#DDE2D3" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">

<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">

        <tr>

                <td colspan="18">

                        <img src="Bilder/index_01.gif" alt="" width="800" height="61"></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="61" alt=""></td>

        </tr>

        <tr>

                <td colspan="2" rowspan="5">

                        <img src="Bilder/index_02.gif" width="77" height="25" alt=""></td>

                <td rowspan="5">

                        <a href="info.html" target="inhalt"><img src="Bilder/info-.gif" width="45" height="25" border="0" alt=""></td>

                <td colspan="5">

                        <img src="Bilder/index_04.gif" width="302" height="3" alt=""></td>

                <td rowspan="5">

                        <a href="#"

                                onmouseover="changeImages('inhalt', 'Bilder/inhalt-sonstiges--_over.gif'); return true;"

                                onmouseout="changeImages('inhalt', 'Bilder/inhalt.gif'); return true;">

                                <a href="sonstiges.html" target="Bilder/sonstiges.gif"><img src="Bilder/sonstiges--.gif" width="70" height="25" border="0" alt=""></a></td>

                <td colspan="9" rowspan="2">

                        <img src="Bilder/index_06.gif" width="306" height="5" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="3" alt=""></td>

        </tr>

        <tr>

                <td colspan="3" rowspan="2">

                        <img src="Bilder/index_07.gif" width="178" height="3" alt=""></td>

                <td rowspan="4">

                        <a href="#"

                                onmouseover="changeImages('inhalt', 'Bilder/inhalt-galerie-_over.gif'); return true;"

                                onmouseout="changeImages('inhalt', 'Bilder/inhalt.gif'); return true;">

                                <a href="galerie.html" target="inhalt"><img src="Bilder/galerie-.gif" width="58" height="22" border="0" alt=""></a></td>

                <td rowspan="4">

                        <img src="Bilder/index_09.gif" width="66" height="22" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="2" alt=""></td>

        </tr>

        <tr>

                <td rowspan="3">

                        <img src="Bilder/index_10.gif" width="62" height="20" alt=""></td>

                <td colspan="2" rowspan="3">

                        <a href="#"

                                onmouseover="changeImages('inhalt', 'Bilder/inhalt-www--_over.gif'); return true;"

                                onmouseout="changeImages('inhalt', 'Bilder/inhalt.gif'); return true;">

                                <a href="www.html" target="inhalt"><img src="Bilder/www--.gif" width="48" height="20" border="0" alt=""></a></td>

                <td colspan="2" rowspan="3">

                        <img src="Bilder/index_12.gif" width="70" height="20" alt=""></td>

                <td colspan="2" rowspan="3">

                        <a href="#"

                                onmouseover="changeImages('inhalt', 'Bilder/inhalt-gaeste_over.gif'); return true;"

                                onmouseout="changeImages('inhalt', 'Bilder/inhalt.gif'); return true;">

                                <a href="gaeste.html" target="inhalt"><img src="Bilder/gaeste.gif" width="44" height="20" border="0" alt=""></a></td>

                <td colspan="2" rowspan="3">

                        <img src="Bilder/index_14.gif" width="82" height="20" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>

        </tr>

        <tr>

                <td rowspan="2">

                        <img src="Bilder/index_15.gif" width="53" height="19" alt=""></td>

                <td>

                        <a href="#"

                                onmouseover="changeImages('inhalt', 'Bilder/inhalt-portrait_over.gif'); return true;"

                                onmouseout="changeImages('inhalt', 'Bilder/inhalt.gif'); return true;">

                                <a href="portrait.html" target="inhalt"><img src="Bilder/portrait.gif" width="63" height="18" border="0" alt=""></a></td>

                <td rowspan="2">

                        <img src="Bilder/index_17.gif" width="62" height="19" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="18" alt=""></td>

        </tr>

        <tr>

                <td>

                        <img src="Bilder/index_18.gif" width="63" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>

        </tr>

        <tr>

                <td rowspan="2">

                        <img src="Bilder/index_19.gif" width="25" height="514" alt=""></td>

                <td colspan="16" background="Bilder/inhalt.gif" width="749" height="498">

                <iframe src="home.html" frameborder="0" name="Inhalt" scrolling="auto" width="749" und height="498"></iframe> 

                </td>

                <td rowspan="2">

                        <img src="Bilder/index_21.gif" width="26" height="514" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="498" alt=""></td>

        </tr>

        <tr>

                <td colspan="10">

                        <img src="Bilder/index_22.gif" width="569" height="16" alt=""></td>

                <td colspan="2">

                        <a href="home.html" target="Bilder/inhalt.gif"><img src="Bilder/home.gif" width="42" height="16" border="0" alt=""></td>

                <td colspan="2">

                        <a href="impressum.html" target="inhalt"><img src="Bilder/impressum.gif" width="75" height="16" border="0" alt=""></td>

                <td colspan="2">

                        <a href="kontakt.html" target="inhalt"><img src="Bilder/kontakt.gif" width="63" height="16" border="0" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="1" height="16" alt=""></td>

        </tr>

        <tr>

                <td>

                        <img src="Bilder/spacer.gif" width="25" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="52" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="45" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="53" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="63" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="62" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="58" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="66" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="70" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="62" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="38" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="10" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="32" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="38" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="37" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="7" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="56" height="1" alt=""></td>

                <td>

                        <img src="Bilder/spacer.gif" width="26" height="1" alt=""></td>

                <td></td>

        </tr>

</table>

</body>

</html>

Hallo FlipFlop

Die Seite klebt am Bildschirmrand, da du im Body-Tag:

HTML-Code:

leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

definiert hast. Du musst anstatt "0", eine Zahl einsetzen. "leftmargin" definiert den Abstand zur linken Seite des Fensters, "topmargin" zur oberen Seite des Fensters. "marginwidth" definiert den Abstand links und rechts der Seite und "marginheight" den Abstand oben und unten. Wenn du jetzt da "0" hast, klebt es natürlich am Rand.

Das Hintergrundbild fügst du wie folgt in den Body-Tag ein:

HTML-Code:

<body background="deinbild.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">

...also einfach anstatt "bgcolor", "background="...." nehmen!

Das Problem mit deinem Menu kann ich nicht so ganz nachvollziehen?!

also das mit dem rand hab ich nun gemacht, nun sieht es schon besser aus :ok: . Auch das mit dem HG bild klappt allmählich (auf alle fälle die home seite), weitere Seiten werden in einem neuen Fenster angezeigt :fragen:

nun mit dem menü ist folgendes. habe ja einen rollover gemacht. wenn man zB auf "portrait" geht, kommt (sollte kommen) ein untermenü mit den verschiedenen titel wie zb "Stammbaum" "ich bin ein Flat" "...". nun hab ich durch das verschiedene inhalte, wie zb für "Sonstige" Bilder/inhalt-sonstiges-over. siehe code

HTML-Code:

<a href="#"onmouseover="changeImages('inhalt', 'Bilder/inhalt-sonstiges--_over.gif'); return true;"

onmouseout="changeImages('inhalt', 'Bilder/inhalt.gif'); return true;">

<a href="sonstiges.html" target="Bilder/sonstiges.gif"><img src="Bilder/sonstiges--.gif" width="70" height="25" border="0" alt=""></a></td>

nun weiss ich nie, welchen Inhalt ich für das hg bild benutzen muss. hab ich da vielleicht den fehler gemacht, das ich das untermenü in den inhalt gebastelt hab?

Versuch mal dein Frame "inhalt" und nicht "Inhalt" zu benennen. Dann sollten alle Seiten in diesem Frame aufgerufen werden... Und wenn du etwas mit deinem Menu und Mouseover verwechselst, so benenne dein Frame doch einfach anders... zum Beispiel "content" oder "frame" oder oder oder...

Aus der Funktion "ChangeImages" (im Javascript) werde ich nicht ganz schlau... kenn mich ehrlich gesagt nicht so damit aus. hast du diese Variante von irgendwo her übernommen?