HTML PhotoShop - Slicen - HTML einbindbar?

[M.B.H.]

Hallo!

Ich möchte mir eine neue Homepage erstellen (hatte davor so ein Content CSS System, wo ich teils bisschen HTML etc angepasst habe, aber das Design gefällt mir nicht mehr), am besten mit Photoshop für eine Fotografie-Seite, ganz schlicht mit schöner Schrift mit Hover-Effekt für die menüpunkte, und die Möglickeit, HTML-Seiten einzubinden (Hauptfrage).

Wie man sliced und das dann mit z.b. Dreamweaver verlint, ist in einem 45 Minuten-Tutorial eig. komplett beschrieben und leuchtet mir ein, mir gehts nur um die Frage, ob ich EINEN Slice-Bereich (wo der normale Content halt steht mittig), so programmieren kann, dass dort eine (auf dem Server liegende HTML-Seite) angezeigt wird, ohne Rahmen etc.

Habe aus dem Netz mal dieses Schema abgeändert:

Wie gesagt, ich möchte den Slice-Bereich einfach so definieren dass er mir eine beliebige andere Seite anzeigt (z.b. meine Flickr-Dia-Fotoshow, oder andere Seiten, Gästebücher, Kontaktaufnahme etc.)

ist das möglich? udn wenn ja habt ihr zufällig nen Link oder nen Tipp oder HTML-Code?
Ich habe viele Slice- Videos angeschaut aber in keinem wird gezeigt ob mein Vorhaben geht, dort wird immer nur direkt die komplette Datei/HTML für jeden Menüpunkt erstellt, wobei jede HTML auch die ganze Menüstruktur beinhaltet, aber das will ich ja nicht.

 

[rumbalotte]

iframe?

 

[Rossie]

Wenn es nicht stört, dass JavaScript aktiviert sein muss, dann ließe sich so etwas recht elegant mit Ajax lösen. Allerdings sollte der Content, der eingebunden wird, dann auf dem gleichen Server liegen. Ansonsten iframe.

 

[Daaron]

Na ja, iframes sind, wie Frames überhaupt, nicht wirklich sinnvoll für relevanten Content. Über iframes kann man mal ein Youtube-Video oder sowas einbinden, oder eben Facebook-Ramsch. WICHTIGEN Content sollte man immer direkt einbetten. Ansonsten kann es durchaus sein, dass du deinen wichtigsten Besuchern (den Suchmaschinen-Crawlern) das Leben unnötig schwer machst.

P.S.: das mit dem Slicing halte ich eh für ziemlichen Mumpitz. Da sliced man dann einen Haufen Grafiken zusammen, die man am Ende gar nicht braucht, weil simple CSS-Regeln viel effektiver wären. Das belastet nur die Bandbreite deiner Kunden und deines Servers unnötig.

 

[M.B.H.]

@Daaron
aber wie binde ich dann schöne gerenderte Menüschriften (mit ganz andderen schriftarten) in CSS ein? als text geht das dann ja nicht da nur diese komsichen 7 Schriftarten auswählbar sind und nur wenige schriftgrössen.
also müssen zumindest diese shon iwie als grafik eingebunden sein. ich denke die bandbreite der foto-diashow ist um ein vielfaches höher, als die paar menüpunkte + banner + ränder, die einmal geladen werden müssen.

css klingt zwar interessant, und nciht so schwer, aber ich weiß halt nicht, wie ich da die menüpunkte + hover-effekte einbinden soll

@alle anderen
Danke soweit, werde ich mir mal anschauen

 

[NullPointer]

@Daaron
aber wie binde ich dann schöne gerenderte Menüschriften (mit ganz andderen schriftarten) in CSS ein? als text geht das dann ja nicht da nur diese komsichen 7 Schriftarten auswählbar sind und nur wenige schriftgrössen.

Stimmt nicht mehr Du kannst per CSS eigene Schriftarten einbinden:

Link

 

[charmin]

und per HTML5 gehen mittlerweile auch 3D Effekte, Farbverläufe und mehr. Ich würde eher versuchen das mit Boardmitteln zu lösen und z.B. keine Bilder fürs Menü einbinden.

 

[M.B.H.]

hmm ohje, dann müsste ich mich da aber richtig einarbeiten...
ich glaub mit 5 stunden ne komplette HP aufbauen ist dann nichts...

ich hab 0 ahnung von CSS, HTML 5, Ajax... Nur ein kleines bisschen HTML, aber auch nur dadurch, dass ich Microsoft Frontpage benutzt habe, und dort im Code rumgewuselt habe und ausprobiert habe, wie sich was ändert durch zufügen und entfernen von bereits bestehendem Code.

ich will einfach eine fast komplett schwarze page mit 5 menüpukten (die dezent gut aussehen), diese sollen zentriert sein, nicht linksbündig, oben ein Banner, und unten halt dann so ein iFrame z.b. zum einbinden von Fotogallerien (flickr). Naja und kontakt-Formular, da muss ich mal schauen wo ich das herbekomme ohne Werbung und anpassbar.

oder ich steig doch wieder auf nen anderes CMS um, dann muss ich aber wieder sicherlich stundenlang damit kämpfen, die ganze werbung aus dem Code zu entfernen und die spalten etc anzupassen wie ich es haben will, das war bei Contrexx nen horror, habs aber letztendlich doch geschafft.

icih glaub ich weiß gerad garnicht, welchen Lösungsansatz ich nun verwenden soll, es wäre ärgerlich, wenn ich mich manuell 100 stunden dransetze um dann später zu sehen, das gleiche (oder sogar noch besser) hätte ich mit 10-20 stunden mit einer anderen Methode (css, cms, html, java, flash, ajax) halt viel schneller geschafft....

 

[charmin]

Also gerade für eine Fotohomepage (oder soll die Seite im Prinzip nur auf Flickr verlinken?) bietet sich ein CMS an, bin aus dem selben Grund auf Wordpress umgestiegen.

 

[Midnight Sun]

Gar nicht erst Slicen, das ist von gestern und so viele Grafiken laden möchte auch keiner.
Es gibt CSS-Layouts die du verwenden und anpassen kannst.

Bei deiner Vorlage würde ich Div-Container oder wenn es gar nicht anders geht Tabellen erstellen.
Ich weiß ja nicht wie gut eine HTML+CSS Kentnisse sind.

Header | Sidebar | Content = bilden mehr oder weniger derzeit deine Vorlage.
Das Template könntest du theoretisch für deine Webseite verwenden:

- http://intensivstation.ch/files/templates/3/intensivstation-template-2-07.html



Ich persönlich würde dir aber rasten, erst einmal eine Vorlage/ein Screendesign so zu erstellen, so wie deine Seite am Ende aussehen soll.
Diese könntest du dann z.B. hier posten und wir alle zusammen können dir dann bei der Umsetzung hefen bzw. dir Tipps geben und Seiten verlinken, wo du das findest oder wo du weiter gucken und das passende heraussuchen kannst.

 

[Daaron]

aber wie binde ich dann schöne gerenderte Menüschriften (mit ganz andderen schriftarten) in CSS ein? als text geht das dann ja nicht da nur diese komsichen 7 Schriftarten auswählbar sind und nur wenige schriftgrössen.

Wenns nur ums Menü geht... Das kann man durchaus mit ein paar Tricks als Grafik lassen, das geht in vielen CMS trotzdem (und bei komplett selbstgeschriebenen Lösungen sowieso).
Wenn du großflächig Sonderschriften verwenden willst, dann gibt es auch da tolle Lösungen:
1.) @font-face - Direktiven in CSS. Klappen in allen CSS3-fähigen Browsern und, weils auf dem Mist von MS gewachsen ist, sogar in räudig alten IE's. Man muss hier aber sehr gut auf die Rechtslage achten, da die Font hier frei ins Netz gestellt wird. Mit ner proprietären Font würd ich das lassen.... aber dafür gibts ja auch
2.) Cufón: Hier lässt man sich auf der Homepage von Cufón aus der Font eine JavaScript-Datei errechnen. Diese Datei macht jetzt nix anderes, als dass sie an den gewünschten Stellen den Text durch frisch berechnete Grafiken ersetzt.

Alles andere, wie Farbverläufe, Schatten und Transparenzen, benötigen ebenfalls keine Grafik mehr. Sowas kann man mit CSS3 alles sehr hübsch und flexibel lösen.

hmm ohje, dann müsste ich mich da aber richtig einarbeiten...
ich glaub mit 5 stunden ne komplette HP aufbauen ist dann nichts...

Isses auch nicht, wenn du ein Profi bist. An einem wirklich guten Layout sitzt auch der Fachmann mehrere Stunden. Danach kommt das durchaus mühselig eintippen der ganze CSS-Deklarationen sowie die Tests, ob denn alles in jedem wichtigen Browser sauber geht.
Inhalte pflegen sich auch nicht in 10 Minuten ein.

ich hab 0 ahnung von CSS, HTML 5, Ajax... Nur ein kleines bisschen HTML, aber auch nur dadurch, dass ich Microsoft Frontpage benutzt habe, und dort im Code rumgewuselt habe und ausprobiert habe, wie sich was ändert durch zufügen und entfernen von bereits bestehendem Code.

Brrr... Frontpage. Nix is schlimmer. Lösch es!

ich will einfach eine fast komplett schwarze page mit 5 menüpukten (die dezent gut aussehen), diese sollen zentriert sein, nicht linksbündig, oben ein Banner, und unten halt dann so ein iFrame z.b. zum einbinden von Fotogallerien (flickr). Naja und kontakt-Formular, da muss ich mal schauen wo ich das herbekomme ohne Werbung und anpassbar.

Mit nem guten CMS wie z.B. Contao echt Pille Palle, ne Sache von n paar Minuten, vorausgesetzt die Layout-Vorgabe ist schon sauber aufgeteilt mit Angaben für Breiten, Höhen, Farbwerten...

oder ich steig doch wieder auf nen anderes CMS um, dann muss ich aber wieder sicherlich stundenlang damit kämpfen, die ganze werbung aus dem Code zu entfernen und die spalten etc anzupassen wie ich es haben will, das war bei Contrexx nen horror, habs aber letztendlich doch geschafft.

CMS mit Werbung? Was hast du da für n Dreck erwischt? Wordpress, Joomla, Drupal, Typo3, Contao (mein Liebling),... die haben alle keine Werbung, von ein paar Lizenz-Kommentaren im Code abgesehen (die nicht entfernt werden dürfen).

(css, cms, html, java, flash, ajax) halt viel schneller geschafft....

Du schmeißt hier alles durcheinander, was das Netz zu bieten hat:
- Flash: ne künstlich am Leben gehaltene Leiche, AUSSER für gewisse Spezialanwendungen
- CMS: heißt nix anderes als Inhaltsverwaltungssystem. Eine einfache Methode, die Inhalte einer Homepage inklusive Seitenstruktur etc zu bearbeiten.
- HTML: Eine Markup-Sprache, in der Webdokumente verfasst werden... IMMER. Der Browser versteht nix anderes, am Ende bekommt er immer HTML
- CSS: Cascading Style Sheets. Sagen nix anderes als "wie soll welches Element der Markup-Sprache HTML am Ende aussehen?"
- Java: würd ich für so etwas NIE verwenden.
- JavaScript: Was ganz anderes als Java. Elementar wichtig für sehr dynamische Effekte auf der Seite, z.B. Slider oder Lightboxes.
- AJAX: Asynchrone Anfragen an Ressourcen via JavaScript. Keine Sprache für sich sondern eine Technik innerhalb von JS

Ein CMS erstellt serverseitig HTML-Code, der wiederum CSS, JS, Flash oder auch mal ne Java App einbindet.

 

[M.B.H.]

@charmin
Habe mir wordpress angeguckt, auch deine webseite, ansich toll aber ich möchte es lieber ganz anders haben

@Mitnight Sun
Auch dir danke für die Antwort, meinen Homepage-Aufbau habe ich folgend mal skizziert, bitte weiterlesen!

@Daaron
Ich danke dir für die sehr ausführliche Antwort und der erläuterungen, das hilft mir weiter! Ich denke von CMS bin ich wieder ab, habe mir mehrere angeschaut, es ist nichts richtig passendes dabei und ich denke, beim CMS ist es noch schwieriger, das richtig anzupassen (spaltenbreiten, schriften, hovereffekte) als bei normalen simplereren css-vorlagen. Mein Contrexx CMS z.b. beinhaltet ka. über 1000 einzelne Dateien, mit quellcode über viele zighundert seiten teils, da ists um einiges schwerer mich da zu orientieren etc. bitte unten weiterlesen! Bezug!

@ALLE
ALSO ich habe nun seit heut morgen ununterbrochen mir diverse Templates und CMS-Systeme angeschaut, überzeugt hat mich bis auf eins (9 Dollar) keins so richtig. Ich denke ich bin nun nach vielem hin und her überlegen auf folgenden Entwurf gestossen, ich habe von diesem Skript ein Screenshot gemacht und paar sachen zugefügt und geändert und Markierungen gemacht, was mir wichtig ist (Link zum Skript weiter unten), einmal der Text rechts sieht gut aus, sollte dann so bleiben und bei Menüpunkten wie "Fotoshootings" z.b. dann rechts die Einbindung der flickr-Gallerie (oder wenn das irgendwie nicht gehen sollte bin ich auch offen für andere Gallerien).

Hier 2 modifizierte Screenies:

und

Skript:
http://www.4templates.com/website-templates/631481878-WT00803/demo/#cyan


Nun stellt sich natürlich die Frage:

Skript kaufen und mehr oder weniger alles abändern (die vorhandenen Photoshop slices in auflösung, breite, effekte, ebenen abändern, in den beiliegenden CSS-Quellcodes die Auflösungen / Breite / Höhe des Content und Menüfeldes ändern, Schriften mit euren Links abändern, Hovereffekte nachträglcih drauflegen.

ODER: von Grund auf dieses Design neu entwerfen, vllt dann halt NICHT mit Photoshop sondern direkt nur über CSS, ihr meintet ja, das wäre garnicht mal so schwer und machbar. (Ja ich weiß ich werde mich dann auch mehr einarbeiten).

ODER: eine Person beauftragen (mit einem noch bessren Entwurf), mir das zu programmieren (evtl dem Programmierer sogar mein gekauftes Skript weiterzugeben, damit dieser dort "weitercodet / umändert", was für mich halt vllt zu schwierig wäre, für ihn aber eine grosse zeitersparnis, weil er halt weiß wie der Rest funtioniert... Und wie teuer wäre sowas? 100 / 200 / 400 euro? ich kann das absolut nicht eiinschätzen. eigentlich würde ich es mir zutrauen, das ganze Layout schön mit Photoshop zu designen, weil ich mich damit eig ganz gut auskenne, aber ihr meint ja, ich soll das nicht machen. denke mal wichtig sind mir halt diese schönen leichten Verläufe, damit ein ganz leichter edler und auch 3-dimensionaler Look der Bereiche entsteht und es nicht zu platt / einfarbig wirkt.

 

[Tumbleweed]

- Java: würd ich für so etwas NIE verwenden.

Ich schon. Aber für einen Einsteiger totaler overkill + hosting wird teuer, von daher hast du schon Recht.

@TE: mit 400€ kommst du da nicht weit, es sei denn, du riskierst eine Investition in einen Studenten. Da brauchst du dann aber Glück, einen mit Ahnung und Enthusiasmus zu finden. Allerdings braucht es tatsächlich nicht sooo viel Know-how, um deine Vorstellungen umzusetzen, daher ist das schon eine Möglichkeit.

 

[Daaron]

Wenn dir das Template gefällt, dann pass es einfach an. CSS-Modifikationen sind gar nicht SO schwer, wenn man erst einmal den Dreh raus hat. Mit Tools wie z.B. Firebug kann man überraschend geschmeidig rumprobieren.

Wordpress bringt durchaus auch eigene Galerie-Plugins mit, genau wie jedes anständige CMS. Ob du trotzdem auf Flickr setzt und mit nem passenden Plugin in dein CMS einbettest bleibt dir überlassen. Ich würde eher ne lokale Lösung einsetzen, da hast du bessere Rechtekontrolle über deine Bilder.


Für jemanden, der halbwegs weiß was er tut, ist das Template da übrigens echt kein Problem. Sowas ist recht fix in ähnlichem Stil nachgebaut. Mir persönlich wäre das Ding aber insgesamt zu... na ja.. Nix gegen schlichte Templates, schlicht ist cool. Das Template finde ich persönlich aber doch etwas zu 90er. Etwas mehr Fetz kann da schon rein, find ich. Den Hintergrund könnte man z.B. mit ein paar "Florals" oder nem "Zerkratzt"-Look aufpeppen. Wenn du dich und deine Bilder promoten willst, dann sollte auch deine Headergrafik mehr sagen als "MBH". Da würde ich eher GROSS denken. Denk über 2 Varianten des Templates nach, eine für die Startseite mit nem richtig großen, pompösen Header, und eine mit nem kompakten Header für Unterseiten.

@Tumbleweed: Ich meinte ne clientseite Java App via JRE, keine Serverlösung.

 

[Midnight Sun]

Du kannst auch einfach das Template hier verwenden und dann an deine Wünsche anpassen.
Viel daran ändern muss du eigentlich nicht.

Demo: http://www.freecsstemplates.org/preview/brownstone/
Download: http://www.freecsstemplates.org/download/zip/brownstone/

 

[charmin]

@TO:

Naja, meine Homepage hat ja nur eines von tausenden frei verfügbaren Templates. (ich hatte davor was selbst geschriebenes, aber die Pflege war mir zu aufwendig, geht jetzt deutlich einfacher). Wenn du allerdings hauptsächlich den Flickr Stream einbindest, dürfte das Problem mit der Pflege ja wegfallen.

Das was du eingestellt hast ist recht einfach zu realisieren, dank CSS3, HTML 5, Javascript und evtl. ein Hintergrundbild.

Das klingt jetzt vielleicht erstmal nach viel arbeit, aber wenn du ein Design hast an dem du dich orientierst, geht das eigentlich recht fix (die Hauptarbeit ist bei dir somit eigentlich schon getan).


- Hintergrund verlauf -> CSS3
- Schwarzer Hintergrund bei Menü -> CSS + Javascript
- eine Liste für dein Menü -> HTML
- ~drei DIV Container für deinen Inhalt -> HTML
- dein Logo -> Bild
- silberner Hintergrund -> ggf. auch Bild.

 

[M.B.H.]

@Daaron
Danke wieder für die Antwort! Hm ja du hast recht, ich könnte da noch bisl mehr fetziges reinbringen, das mit dem zerkratzen hintergrund ist ne gute idee, hab ich iwo auch shon mal gesehen. sowas lässt sich mit photoshop ziemlich gut realisieren, habe texturpacks .

Ich habe mir das Template gekauft, es ist alles dabei, kompletter CSS Code (leider nur für eine Seite, die Menüpunkte muss ich halt alle manuell verlinken und einstellen), Photoshop dateien sind dabei.. Letzendlich ist es halt ein Mix aus Photoshop-Slice-Elementen und CSS Skript... denke das geht in Ordnung ALLE Slice-Elemente, incl. Logo sind unter 50 kb groß, das ist jetzt nicht gerade viel. Ein foto aus der Diashow allein hat schon so viel kb. wenn man die seite nicht gerade über langsame Handies lädt, sehe ich da kein Problem drin. Mein Webspace hat 50 gb traffic monatlich, das wurde bei meinem bisherigen Skript nicht mal ansatzweise angekratzt.

Ich könnte tortzdem scahuen, nachdem ich mich mehr mit Dreamweaver und CSS auseinandergesetzt habe, ob ich diese grafiken durhc normale Verlaufseffekte in CSS ersetzen kann, danke @charmin. aber erst mal eins nach dem anderen.

Ich werde das photoshop ding auch neu slicen, weil ich die Breiten verändern möchte. das CSS Skript muss ich dementsprechend auch an vielen Stellen in den Werten anpassen, das wird erst mal genug aufwand neben der Content-Erstellung. Einbindung der flickr-Gallerie klappt problem los, werde mir da aber ne eigene Lösung auch noch mal anschauen, eine schlichte schicke schwarze Diashow, hab da bisher fast nichts brauchbares gefunden.

@Mitnight Sun
das Anpassen deines Skriptes find ich jetzt zu schwer im vergleich zu meinem gekauften, aber danke dir

 

[Midnight Sun]

Von nichts kommt nicht!
Es ist immer besser sich mit dem Thema HTML und vorallem CSS auseinander zusetzen,
oder anders gesagt, jeder der eine eigene Webseite hat sollte ich zum. mit den Grundkenntnissen auskennen.

Die Veränderungen sind nur minimal, es gibt aber auch andere fertige Templates, man muss nur mal danach suchen.
Das was ich dir verlinkt habe, hatte ich eh gerade offen.

Was ich nicht machen kann ist, dir 10.000 Links geben, wo du nachgucken kannst.
Das wirst du selber machen müssen.

 

[M.B.H.]

Ja du hast recht, ich muss mich intensiver damit auseinandersetzen. jedenfalls fällt das einarbeiten / modifizieren leichter als von grund an neu aufzubauen. wie gesagt, das contrexx skript mit den ganzen zig hundert langen html und php dateien habe ich auch teils modifiziert an den passenden stellen, ein bisschen verständnis fürs gerüst hab ich schon, um form, farben etc zu ändern, nur könnte ich definitiv nicht so eine seite von allein aufbauen. aber ersteres reicht ja auch. Das template habe ich ja nun gekauft und passe es an, geht zwar nicht an einem tag aber das wird schon
danke noch mal!

ihr alle habt mir gut weitergeholfen, durch euch hab ich mich überhaupt erstmal CSS entdeckt, habe Frontpage gelöscht, Dreamweaver zugelegt und letztenlich nach CSS templates gesucht und gefunden
danke

 

[Daaron]

Wozu brauchst du Dreamweaver? Diese Software ist pure Geldverschwendung. Für die Kohle, die du da investierst kannste dir das Projekt von nem Freiberufler aufhübschen lassen. Dreamweaver bietet gegenüber anderen kostenlosen IDEs wie Eclipse keinen nennenswerten Vorteil.

CSS editiert sich am schnellsten immer noch mit sehr leichtgewichtigen Tools wie Notepad++, dasselbe gilt für HTML und eher kurze JavaScripts. Längere JavaScripts sowie PHP schickt man einfach durch Eclipse und fertig.