Anzeige

problem bei fertigstellung der hp mit photoshop cs

problem bei fertigstellung der hp mit photoshop cs | PSD-Tutorials.de

Erstellt von atx, 14.05.2005.

  1. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    so, hallo erstmals

    ich bin mir sicher, das es dieses thema noch nich gab, hab rumgesucht aber noch nix gefunden, also schreib ich es mal..:

    ich hab meine hp wie nun schon oben genannt zuerst in photoshop erstellt. hab mir das eine video dazu runtergeladen um zu sehen wie ich es richtig machen, und so.. gut, dann hat auch noch alles gepasst. also vom design würd meine her passen.
    das problem ist nur, wenn ich dann meine .htm datei in dreamweaver öffne, komm ich nicht weiter. das design ist eine reihenfolge bzw zusammenstellung von mehrern bildern, da ist klar das ich nicht wirklich was drauf schreiben kann. also muss das mit tabellen oder soetwas in der art funktionieren...

    hat ja jmd zufällig eine ahnung, wie ich das mache bzw wie es nun weitergeht?! .. weil ich hab ja das design, nur mit dem verlinken der texte haut es nich ganz so hin..

    mfg atx..
     
    #1      
  2. Uwe411

    Uwe411 Aktives Mitglied

    Dabei seit:
    01.04.2005
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    6° 22' 0" Nord , 50° 55' 60" Ost
    problem bei fertigstellung der hp mit photoshop cs
    Zeig mal das Design.

    Entweder erstellst Du eine Tabelle und fügst die Grafiken als background ein (Slices mit ImageReady wäre da am besten) oder Du erzeugst <div>-Ebenen. Diese kannst Du dann mit CSS positionieren.

    Du verlinkst nicht auf die Texte, sondern auf eine neue Seite.
     
    #2      
  3. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    danke für die antwort.

    wie erstell ich <div-> ebenen in dreamweaver und wie positionier ich die mit css? .. ich hab zwar von css schonmal was gehört, hab mich mit denen dateien aber nie wirklich auseinander gesetzt...

    (ich lads mal kurz hoch, einen moment) .. der link: URL
     
    #3      
  4. Uwe411

    Uwe411 Aktives Mitglied

    Dabei seit:
    01.04.2005
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    6° 22' 0" Nord , 50° 55' 60" Ost
    problem bei fertigstellung der hp mit photoshop cs
    Nicht schon wieder! :x Jeder will eine Homepage erstellen, ohne sich mit HTML und CSS zu beschäftigen. HP's erstellt man nicht in PS, nur das Layout!

    Mach dich erstmal in HTML und CSS kundig.
    http://de.selfhtml.org/
    http://de.selfhtml.org/css/

    Beispiel:
    <div style:"position:absolute; top:100px; left: 10px; width:200px; height:400px">Text</div>

    Sorry für den scharfen Ton.
    Wenn man sich mit Webdesign beschäftigen will, sollte man erst HTML und CSS lernen. Die grafischen Spielereien mit PS können dann immer noch folgen.
     
    #4      
  5. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    ich hab ja gesagt das ich nur das design in photoshop gemacht habe und wie ich fortsetze in dreamweaver.. ich hab nicht gefragt wie es geht in photoshop html dateien zu erstellen, weil ich ja weiß das das nich geht.. entschuldige bitte ey..
     
    #5      
  6. MrDiek

    MrDiek Ostfriese

    Dabei seit:
    27.02.2005
    Beiträge:
    1.563
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Photoshop
    Kameratyp:
    /
    problem bei fertigstellung der hp mit photoshop cs
    Also das Design habe ich gesehen..... hmmm

    Willst du die anderen Seiten also den Text bei einem deiner links in der mitte aufrufen lassen oder wie???

    Also in Dream MX kannste das eigentlich ganz einfach machen. Soweit ich sehe ist dein Layout nur ein bild wo die links drauf stehen, also arbeitest du einfach mit imagemaps.... Weisst du wie das geht???

    So und anschließend setzt du einfach mit CSS einen iFrame in der mitte hin und lässt dort die Seiten laden, setzt den hintergrund aber transparent damir dein design im hintergrund immernoch sichtbar ist...

    Sag mir bitte ob dir die lösung gefällt und wenn ja, was du davon nicht kannst...

    GreeTz Diek

    EDIT:

    Hay uwe ich kann verstehen dass dir das auf die nerven geht, ist bei nicht grad anders aber er kann nichts dafür das schon 50 vor ihm gefragt haben also antworte ihm doch einfach ganbz nett, denn wenn man keine ahnung hat, fragt und ne antwort in so nem ton bekommt, vor allem wenn einer neu ist wie er, ist das ein ganz schon sche**ß gefühl..
     
    #6      
  7. culle90

    culle90 Guest

    problem bei fertigstellung der hp mit photoshop cs
    #7      
  8. m4l

    m4l Guest

    problem bei fertigstellung der hp mit photoshop cs
    ich weiss nicht ob er es weiss, aber ich weiss es nicht, und wenn du es hier ansprichts...vielleicht könntest du es kurz erklären
     
    #8      
  9. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    also danke mal für die antworten..

    >Willst du die anderen Seiten also den Text bei einem deiner links in der mitte aufrufen lassen oder wie???

    ich möchte, das wenn man zb auf "contact" klickt die seite in der mitte des bildes angezeigt wird, mit dem entsprechenden hintergrund natürlich..

    >Also in Dream MX kannste das eigentlich ganz einfach machen. Soweit ich sehe ist dein Layout nur ein bild wo die links drauf stehen, also arbeitest du einfach mit imagemaps.... Weisst du wie das geht???

    klingt einfach, aber nein tut mir leid.. ich komm mir grad irgendwo dumm vor, arbeite schon etwas länger mit dream mx und dann sowas...

    >So und anschließend setzt du einfach mit CSS einen iFrame in der mitte hin und lässt dort die Seiten laden, setzt den hintergrund aber transparent damir dein design im hintergrund immernoch sichtbar ist...

    ich versteh eigentlich gar nich so viel.. :/ maaan, ich werd da ja nie fertig mit der hp..

    >Sag mir bitte ob dir die lösung gefällt und wenn ja, was du davon nicht kannst...

    ist ne schöne lösung, wenn du mir so helfen würdest, wärs super.. vllt wenn wir uns über icq unterhalten würden dann alles schneller gehn würd, oder so?.. also, wär toll wenn ich dich adden dürfte..

    GreeTz Diek

    grüße zurück ;)

    edit: oder ich arbeite mit iframe,s wenn ihr mir sagen könntet wo ich die einbaun muss..
     
    #9      
  10. Uwe411

    Uwe411 Aktives Mitglied

    Dabei seit:
    01.04.2005
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    6° 22' 0" Nord , 50° 55' 60" Ost
    problem bei fertigstellung der hp mit photoshop cs
    Hast ja recht, es ist mit mir durchgegangen. Hab mich doch schon entschuldigt.
    Wer lesen kann ist klar im Vorteil. :wink: :D


    Zu den ImageMaps:
    Das lässt sich in ImageReady lösen.
    Tutorials dazu gibt es hier:
    http://www.drweb.de/grafikgrundlagen/imagemaps.shtml
    http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
    http://www.exine.de/software/editor_dreamweaver_image_maps.htm


    Die legst Du mit <layer> oder mit <div> an. Dann solltest Du aber die Schrift in der Grafik entfernen. Der Text bzw. der Link steht dann im iframe. Mit CSS gibst Du dann die Position pixelgenau an.
     
    #10      
  11. MrDiek

    MrDiek Ostfriese

    Dabei seit:
    27.02.2005
    Beiträge:
    1.563
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Photoshop
    Kameratyp:
    /
    problem bei fertigstellung der hp mit photoshop cs
    Also als erstes den iFrame

    <div style:"position:absolute; top: 10px; left: 10px;">

    <iframe src="http://weiterer_Pfad/main.htm" name="main" frameborder="0" width="10" height="10" allowtransparency="true" scrolling="auto" style="filter:chroma(color=#00FF00)"></iframe>

    </div>

    Also als erstes <div style:"position:absolute;"> damit setzt du den iFrame fest. dann nimmst du noch top: 10px; left: 10px; damit rein siehe oben.. Das heisst der iFrame ist 10px vom oben weg(top) und 10px von links (left)... Dort beginnt dann der iFrame.

    10px ist hier nur so, dann musst du sehen das die px anzahl so veränderst, das dein iFrame später genau in der mitte ist.

    Das wäre geschafft.. Nun zum iFrame selber denn du musst ja noch die breite und die höhe des iFrames bestimmen.

    <iframe src="http://weiterer_Pfad/main.htm" hiermit öffnest du in deinem iFrame eine seite, am anfang sollte dieses ja immer die main seite sein.

    name="main" hier gibst du den namen der Seite an, das heisst wenn du später die links setzt musst du immer target="main.htm" setzen in den link, damit die seite sich dort aufbauen wo die main.htm ist..

    frameborder="0" gier setzt du den rahmen auf 0, da du ihn ja nicht sehen willst.

    width="10" height="10" hier gibst du die breite (witdh) und die höhe (height) an, das dürfte klar sein...

    allowtransparency="true" hier setzt du die transparenz ein, damit du dein layout noch sehen kannst und nur dein text vorhanden ist.. dafür musst du aber im body der main.htm folgendes reinschreiben..
    style="BACKGROUND-COLOR: transparent; damit der hintergrund auch transparent ist...

    scrolling="auto" hier versteht dich glaube ich von selber aber dieser code bewirkt, dass nicht immer eine scrollleiste vorhanfden ist, da sie platz klaut, sondern nur wenn wirklich gescrollt werden muss.

    style="filter:chroma(color=#00FF00)"></iframe> als letzte den style tag, was dieser bewirkt weiß ich nicht aber ich denke er muss unbedingt rein, wäre cool wenn jemand anders wüsste was er bewirkt..
    und zu letzt ja noch den iFrame tag schließen..

    Nun noch </div> schließen und es ist getan du hast deinen iFrame

    Am besten lasse allowtransparency="true" erstmal weg und mach die main.htm in weiß, damit du auch siehst wo sie anfängt und wo sie aufhört wenn du sie dann in der mitte hast, setz allowtransparency="true" rein und du hast deinen iFrame fertig....


    Hoffe es ist soweit klar..

    Ich muss nun arbeiten, das mit den Image Maps mache ich ddann heude abend wenn dir die links nichts gebracht haben...

    GreeTZ Diek
     
    #11      
  12. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    #12      
  13. MrDiek

    MrDiek Ostfriese

    Dabei seit:
    27.02.2005
    Beiträge:
    1.563
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Photoshop
    Kameratyp:
    /
    problem bei fertigstellung der hp mit photoshop cs
    uiiii

    Hab mir grad mal den Quelltext reingezogen...

    Kann gut sein, dass das daran liegt, dass du mit tabellen arbeitest..
    Ich hab das immer so gemacht, dass ich ein Bild hatte und nicht mehrere, und dann auf diesem einen Bild habe ich dann den iFrame gesetzt...

    www.BigDaddyDiek.de.vu schau da mal in den Quelltext...

    Bin zwar kein spezi aber bis hierhin hats bei mir mit den iFrames immer hingehauen

    GreeTz Diek
     
    #13      
  14. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    das problem ist ja das sich das iframe nich in das bild einfügen will.. soll ich dir per icq mal meine hp-dateien schicken, das du dir das ganze mal ansiehst?
     
    #14      
  15. MrDiek

    MrDiek Ostfriese

    Dabei seit:
    27.02.2005
    Beiträge:
    1.563
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Photoshop
    Kameratyp:
    /
    problem bei fertigstellung der hp mit photoshop cs
    du willst doch, das sich der iFrame in der mitte des bildes öffnet oder nicht???

    Greetz Diek
     
    #15      
  16. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    ja, natürlich will ich das..
     
    #16      
  17. MrDiek

    MrDiek Ostfriese

    Dabei seit:
    27.02.2005
    Beiträge:
    1.563
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Photoshop
    Kameratyp:
    /
    problem bei fertigstellung der hp mit photoshop cs
    ya mein ich doch dann ist das ja richtig was ich meinte... versuche mal die einzelnen bilder zu einem gesamten bild zusammen zu setzen, das setzt du dann in die html seite und nimmst dann den code mit dem iframe dann muss es gehen

    GreeTz Diek
     
    #17      
  18. atx

    atx Noch nicht viel geschrieben

    Dabei seit:
    14.05.2005
    Beiträge:
    16
    Geschlecht:
    männlich
    problem bei fertigstellung der hp mit photoshop cs
    #18      
  19. MrDiek

    MrDiek Ostfriese

    Dabei seit:
    27.02.2005
    Beiträge:
    1.563
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Photoshop
    Kameratyp:
    /
    problem bei fertigstellung der hp mit photoshop cs
    Hay super das freut mich....

    Also die Schrift würde ich weiß nehmen, da der Hintergrund doch sehr dunkel ist... weiß is schlicht und einfach, eine Kontrastfarbe und auf dunklem hintergrund immer gut zu lesen...

    Ein kleiner Tipp noch, setzte den iFrame noch ein Stück weiter nach links und zentriere den text nicht wie bei der main.htm, ansonsten sieht gut aus...

    GreeTz Diek
     
    #19      
  20. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    problem bei fertigstellung der hp mit photoshop cs
    zum iframe: setz mal noch in der me.html per css das hintergundbild auf no repeat usw. dann scrollt es nicht mit:

    <body style="background-image:url(Bilder/main.gif); color:#FFFFFF; background-attachment:fixed; background-repeat:no-repeat>

    so zb ;)
     
    #20      
x
×
×