Layout wie am besten programmieren/umsetzen

I

iTob

Aktives Mitglied
Thread Starter
Dabei seit
23.02.2005
Beiträge
506
Reaktionspunkte
38
Hallo :)

Ich habe ein Layout für meine Seite festgelegt und wollte euch mal nach Tips fragen, wie ich das am besten umsetzen könnte. Ich kann mit HTML und CSS einigermaßen umgehen, würde mir aber auch andere Tools (Typo und Co?) ansehen, wenn es damit einfacher geht.

Hier erstmal ein Bild vom Gerüst:
layout_neu.jpg

Anforderungen an das Layout:
  • Navigationsleiste soll am rechten Fensterrand fixiert sein
  • Der Inhalt soll unter dieser Leiste wegscrollen
  • Das Layout ist im Querformat gedacht, d.h. es wird auch (nur) horizontal gescrollt
  • Die Textfelder sollen wie Spalten funktionieren, also ineinander fließen und bei bedarf soll eben die nächste Spalte begonnen werden
  • Ich will nicht manuell ein neues Textfeld / eine neue Spalte anlegen und positionieren müssen für jede einzelne Seite
  • (bei Bedarf würde ich gerne manuelle Spaltenumbrüche einfügen können)
  • die Überschrift bleibt an der ersten Spalte verankert, scrollt also mit
  • Am (rechten) Ende der Seite ein „Zurück nach Links“ Button
  • Sowas wie ein simples, kostenloses CMS wären nett
  • Es könnte sein, das da mal ein Onlineshop dazukommt
  • Ich möchte nur sehr ungern Geld investieren müssen, freue mich also über „Open Source“-Lösungen

Vielen Dank für eure Anregungen!
Tobi

PS: Fehler in der Abbildung: Es muss natürlich „Navigation fixiert am linken Fensterrand“ heißen
 
Das ist auf den ersten Blick wenig anspruchsvoll, allerdings horizontal scrollen? Wenn das grafisch toll umgesetzt wird kein Problem, aber ansonsten würde ich mir das nochmal überlegen (oder mit einem Content-Slider), aber da kenne ich/wir das Konzept zu wenig.

Die zu verwendenden CMS kennst Du ja, gibt ja viele gute Lösungen wie Wordpress. Aber das richtet sich halt danach welche Homepage es überhaupt werden soll. Von Typo3 würde ich erstmal abstand nehmen. Solange es zumindest kein Großprojekt ist.
 
dooyou schrieb:
Die zu verwendenden CMS kennst Du ja, gibt ja viele gute Lösungen wie Wordpress …
Zum Vergrößern anklicken....

Ne … ich kenne keine CMS, habe bisher ausschließlich mit CSS, HTML und PHP im Editor Seiten programmiert.
Edit: Wordpress ist doch nur für Blogs oder?

Könntest du deine Anmerkungen zum Scrolling noch etwas ausführen, z. B. wie meinst du „graphisch gut gemacht“, was genau spricht dagegen horizontal zu scrollen? – entspricht ja schließlich unserer Leserichtung, und man würde dann von Spalte zu spalte von links nach rechts lesen/scrollen.

Ergänzung zu meiner Liste: Wie kann ich so „Überblendeffekte“ hinbekommen. Also das die Naviagtion immer da ist, aber der Inhalt sanft eingeblendet wird. (Ob das gut ist sei mal dahingestellt, aber ich möcht’s gern mal probieren …) Bei Google war es eine Zeit lang auch so, das zunächst nur Logo und Suchtextfeld sichtbar waren und später die obere Leiste eingefadet wurde.
 
Zuletzt bearbeitet:
iTob schrieb:
Die Textfelder sollen wie Spalten funktionieren, also ineinander fließen und bei bedarf soll eben die nächste Spalte begonnen werden
Zum Vergrößern anklicken....

Von dem Gedanken kannst Du dich direkt verabschieden. Geht nicht.

Wordpress wurde als Blogsystem konzipiert, lässt sich aber auch sehr gut für kleine bis mittelgroße CMS-Projekte einsetzen. In der Regel finde ich typische CMS-Systeme wie Typo3 eher unübersichtlich.
 
Danke. Was kann denn Wordpress? Muss ich mein Layout wie gewoht mit HTML/CSS programmieren und kann mit Wordpress später nur die Texte bearbeiten, wenn ja, dann lohnt sich das nicht, denn die Texte kann ich auch mit meinem Editor bearbeiten … Oder unterstützt mich Wordpress auch beim Layout (ich will kein Template benutzen.)?
 
iTob schrieb:
Wordpress ist doch nur für Blogs oder?
Zum Vergrößern anklicken....

Ursprünglich: Ja.
Allerdings kannst du Wordpress genauso auch für "normale" Internetseiten, wie etwa News-Seiten, Portfolio etc benutzen.
Ich hab mein Portfolio zum Beispiel auch mit Wordpress gemacht.


intreaux schrieb:
Nein. Gleiches gilt für alle anderen CMS aber auch.
Zum Vergrößern anklicken....
Kommt doch ganz darauf an, was man unter "Unterstützen" versteht.
Es unterstützt einen in sofern, als dass
a) unbedarfte User ein Template / Theme ihrer Wahl installieren und einfach modifizieren können
b) bedarftere User ein vorhandenes Theme als Grundlage verwenden können, um es nach ihren Vorstellungen umzugestalten.

Letzteres habe ich gemacht – und ich bin sehr zufrieden mit dem Ergebnis.
 
Hallo,

ich habe jetzt nicht alles gelesen was hier geschrieben steht, aber! :)
Das Horizontale Schollen ist eine nette Idee funktioniert aber wie ich finde nur wenn man eine MagicMouse/Trackpad hat, für alle anderen heisst es dann Scroller anfassen zum Scrollen... auch glaube ich es via JavaScript festzulegen das dass "Normale" Scrollen auf deiner Seite Horizontal funktioniert verwirrt nur den User... Stichwort Surferverhalten, Usability.

was aber gut kommt ist die Seite Horizontal zu Animieren mit JQuery... Man klickt einen Navipunkt und die Seite fährt zum passenden Content. Da kannst Du mit -Margin werten arbeiten und ich glaube animate von JQuery.

Ansonsten würde ich wenn Du es nicht brauchst ohne ein CMS machen... Typo etc. macht nur Sinn für Leute nicht geübt sind und oder wenn oft viel an Inhalt von verschiedenen Benutzern online gestellt wird...

Grüße
 
Danke für eure Antworten!

Also das mit dem vertikalen Scrollen habe ich jetzt nochmal überdacht und mich dagegen entschieden. Aber SignoreRossi hat eine gute Anregung geben für das Auswechseln der Seite.
Könntest du mir bitte noch ein Bisschen genauer erklären, wie das technisch Abläuft? Müssen dann alle Teilseiten in sagen wir verschiedenen DIVs auf einer HTML-Seite liegen und dann per Navigationsbuttons und Script nur hin und her geschoben?

Gute Nacht!
Tobi
 
das ließe sich sehr fein mit dem Coda Slider umsetzen :)

Hab mal was ähnliches gebaut: www.tarifzauber.de

SignoreRossi schrieb:
Hallo,
was aber gut kommt ist die Seite Horizontal zu Animieren mit JQuery... Man klickt einen Navipunkt und die Seite fährt zum passenden Content. Da kannst Du mit -Margin werten arbeiten und ich glaube animate von JQuery.
Zum Vergrößern anklicken....
 
Mir fehlen Angaben zur Größenordnung deiner Website. Über wie viel Seiten sprechen wir?
Wenn es fünf Seiten sind ist CMS wie auch Template Engine überflüssig. Wenn's fünfzig sind ein Muss?

Als CMS empfehle ich dir CMS Made Simple (Winner of the Packt Award for "Best Open Source CMS" 2010) mit einem guten deutschen Support. Da reicht durschnittliche HTML/CSS-Erfahrung aus, um ein eigenes Template einzusetzen.

intreaux schrieb:
Wordpress wurde als Blogsystem konzipiert, lässt sich aber auch sehr gut für kleine bis mittelgroße CMS-Projekte einsetzen.
Zum Vergrößern anklicken....
Beim ersten Projekt ;) viel Freude damit :)

iTob schrieb:
Navigationsleiste soll am rechten Fensterrand fixiert sein
Zum Vergrößern anklicken....
Fixieren ist über »position: fixed;« möglich. CSS PlaY zeigt ein schönes Beispiel: Model boxes ~ how to fix them in position.

iTob schrieb:
Könntest du deine Anmerkungen zum Scrolling noch etwas ausführen, z. B. wie meinst du „graphisch gut gemacht“, was genau spricht dagegen horizontal zu scrollen? – entspricht ja schließlich unserer Leserichtung, und man würde dann von Spalte zu spalte von links nach rechts lesen/scrollen.
Zum Vergrößern anklicken....
Dagegen spricht, das Du nicht mehrspaltig arbeiten kannst, keinen Textfluss hast.

iTob schrieb:
Ergänzung zu meiner Liste: Wie kann ich so „Überblendeffekte“ hinbekommen. Also das die Naviagtion immer da ist, aber der Inhalt sanft eingeblendet wird. (Ob das gut ist sei mal dahingestellt, aber ich möcht’s gern mal probieren …) Bei Google war es eine Zeit lang auch so, das zunächst nur Logo und Suchtextfeld sichtbar waren und später die obere Leiste eingefadet wurde.
Zum Vergrößern anklicken....
Die Antwort ist »jQuery«.
Ich würde das o.g. scrolling (das horizontale scrollen) durch eine 100% Weite deines wrappers/containers, mit entspr. content-boxes, die sich per klick von links nach rechts schieben. Ein Beispiel von Ariel Flesler:jQuery.SerialScroll.

Den von Rhapsody genannten Slider findest Du hier: Coda Slider. Habe ich auch mehrfach umgesetzt, guck einfacgh was dir am besten gefällt, und vor allem, ins gefundene Konzept deiner Seite passt.
 
  • Gefällt mir
Reaktionen: iTob
Nur ganz schnell: Es geht um maximal 10 Seiten, eher weniger.
Zu dem Rest sag ich nachher noch was …
 
Hi,

die Links von Krizz sind schon sehr gut... grade für Jquery gibt es viele Code Schnipsel im netz die man super benutzen kann...

Grüße
 
Hallo!

Danke euch für die Antworten. Werde mal sehen, was ich davon umsetzte – inzwischen bin ich nicht mehr sicher, ob das Layout so bleibt wie oben dargestellt …

Viele Grüße
iTob
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten