alte Homepage soll ein neues Design bekommen (Komplettumbau)

Sebastian_86 · 16.03.2010

Hi,

ich bin neu hier und hätte da auch gleich meine ersten paar Fragen.

Also ich baue und verwalte nun schon seit längerem die Homepage meiner
Eltern (www.vom-hagenauer-forst.de). Soweit so gut.

Da ich mir das alles irgendwie selber beibringen musste und ich nicht
wusste was "modern" und zeitgemäß ist habe ich es einfach
nach bestem Wissen und Gewissen mit Frames etc. gemacht.

Da Frames ja nun veraltet sind (schon oder?

) habe ich nun angefangen
mit Photoshop ein neues Design und Layout zu erstellen und das ganze
dann als HTML+Bilder auszugeben. Den aktuellen Stand könnt ihr
unter anschaun.
Hab das Layout dann mit Dreamweaver CS4 und meinem
Halbwissen was Coden betrifft gefüllt.

Nun bin ich jedoch auf Probleme gestoßen, die die Höhe des Fensters
betreffen. Beispielsweise hätte ich es gern, dass wenn wenig Inhalt auf der
Seite steht, das Fenster kleiner werden soll. Gleiches bei mehr Inhalt. Nur
leider verschiebt es dann das ganze Tabellen-Layout von PS.

Darum hab ich mich nun hier angemeldet und schon viel gelesen. Unter
anderem habe ich wohl festgestellt, dass man am besten HTML + CSS
nutzen sollte. Zumindest wenn man anfängt was solides zu bauen.

Habe mich dann auch gleich dran gemacht und das erste Buch von
little-boxes durchgearbeitet. Ist schon echt cool wie das alles so klappt.

So meine eigentliche Frage ist nun. Macht es überhaupt Sinn an meinem
derzeitigen Design weiterzuarbeiten oder sollte ich besser gleich versuchen
das Design so wie es ist in HTML und CSS "umzubauen" - falls das
überhaupt möglich ist.

Gibt es vlt. eine Möglichkeit wie ich die Höhe des Fensters ohne großen
Aufwand variieren kann? Weiss leider auch nicht so recht.

Aber ich bin mir sicher ihr könnt mir weiterhelfen!
Gerne auch mit Kritik an dem aktuellen Design.

Vielen Dank schon mal für eure Mühen

Grüße
Sebastian

msblacky · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hallo,

herzlich willkommen im Forum und viel Spaß noch hier, also ich würde es gleich umbauen damit kannst Du Dir auch für die Zukunft alle Möglichkeiten offen halten.

msblacky

Anina · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hallo!

Erstmal: Habe mich durch die "alte" Seite durchgeklickt - die Inhalte sind sehr liebevoll gemacht, konnte mich von den schönen Bildern gar nicht mehr losreißen.

Das neue Layout finde ich schön, würde aber das Layout slicen und dann selbst zusammenbauen (also den Quellcode nicht von PS schreiben lassen) - dann kannst du es auch so machen, dass dein Fenster kleiner und größer wird. Nutzt du Dreamweaver zu designen? Dort findet man unter den Vorlagen immer gute Sachen - ohne Frames aber schon so unterteilt, dass du ein Kopf, einen Inhaltsteil und einen Fußteil hast.

lg

folientechniker · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hat Inhaltlich alles was eine Website haben muß, könnte nur ein wenig freundlicher gestaltet sein. Wirkt etwas düster auf mich. Ich bin nicht so der Webseiten Experte sondern mache mehr in Design. Aber es gibt eine Menge Tuts die deine Fragen beantworten.

Ach ja, willkommen im Forum,

FreddyX2 · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Moin,
für den Anfang ist es doch schonmal etwas.

Ja, Dein Design lässt sich sehrwohl mit HTML+CSS umsetzen. Wenn Du, wie Du sagst, bereits den ersten Teil von "little-Boxes" durchgearbeitet hast, solltest Du das eigentlich hinbekommen.

Das, was Du bei dem aktuellen Projekt fabriziert, ist ein reiner Table-Krieg. Tablelayout ist out. Wenn Du alles so wie im Buch machst, wirst Du garnicht auf die Idee kommen mit Tabellen zu arbeiten.

Der Autor arbeitet nur mit CSS, um das Aussehen der Site zu ändern.

Fang mit dem Buch nochmal an und les es in Ruhe. Arbeite die Beispiele mit und erwarte Dir nicht, dass Du alles auf Anhieb sofort verstanden hast und es aus dem FF anwenden kannst. Gut Ding will Weile haben

noodless · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Ich will ja nichts sagen, aber persönlich find ich es ungünstig den Inhalt als Bild darzustellen ... (Beispiel: ) das ist ja alles ein Bild.

Ansonsten kann ich dir auch Raten das alles selber nocheinmal Umzubauen und wenn du dann konkrete Fragen zu einzelproblemen hast, findest du sicher auch den einen oder anderen der dir dann dabei hilft.

mfg nudelz

Mergenthaler_01 · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hey,
die Schnappschüsse sind ja niedlich!
Ich stimm den anderen zu. Mach das auf jeden Fall noch mal in CSS. Und dein schwarzer Hintergrund wirkt wirklich düster, den würd ich nicht so lassen.
Viele Grüße

Sebastian_86 · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

noodless schrieb:
Ich will ja nichts sagen, aber persönlich find ich es ungünstig den Inhalt als Bild darzustellen ... (Beispiel: ) das ist ja alles ein Bild.

Da geb ich dir Recht, das ist sicherlich nicht optimal. Gekommen ist das, weil ich zB beim Tagebuch immer das Problem hatte, dass das Datum in der Linken Spalte und der Text dazu in der rechten Spalte immer nicht gleich angefangen haben oben. Die hatten dann immer einen Versatz. Das hat mich viele Nerven gekostet. Drum hab ichs kurzerhand als Bild gemacht.

Das wird in dem neuen Design sicherlich nicht mehr so gemacht. versprochen!

FreddyX2 schrieb:
Moin,
für den Anfang ist es doch schonmal etwas.

Ja, Dein Design lässt sich sehrwohl mit HTML+CSS umsetzen. Wenn Du, wie Du sagst, bereits den ersten Teil von "little-Boxes" durchgearbeitet hast, solltest Du das eigentlich hinbekommen.

Das, was Du bei dem aktuellen Projekt fabriziert, ist ein reiner Table-Krieg. Tablelayout ist out. Wenn Du alles so wie im Buch machst, wirst Du garnicht auf die Idee kommen mit Tabellen zu arbeiten.

Der Autor arbeitet nur mit CSS, um das Aussehen der Site zu ändern.

Fang mit dem Buch nochmal an und les es in Ruhe. Arbeite die Beispiele mit und erwarte Dir nicht, dass Du alles auf Anhieb sofort verstanden hast und es aus dem FF anwenden kannst. Gut Ding will Weile haben

Werd mich gleich heute noch dran setzen und das Beispiel ein bisschen umbauen. Hab das nämlich schon gleich mitgearbeitet und find des voll genial.

Halte euch auf jeden Fall auf dem Laufenden was meine Fortschritte angeht.

folientechniker schrieb:
Hat Inhaltlich alles was eine Website haben muß, könnte nur ein wenig freundlicher gestaltet sein. Wirkt etwas düster auf mich. Ich bin nicht so der Webseiten Experte sondern mache mehr in Design. Aber es gibt eine Menge Tuts die deine Fragen beantworten.

Ach ja, willkommen im Forum,

Was meinst du mit düster? Das neue Design? Hmm. Von den Farben her?
Ich mein, ja das alte Design ist echt ein bisschen düster. Das ganze schwarz und so. Aber bei dem neuen dachte ich eigentlich nicht dran, dass man es als düster empfinden könnte. Was würdest du ändern?

Anina schrieb:
Hallo!

Erstmal: Habe mich durch die "alte" Seite durchgeklickt - die Inhalte sind sehr liebevoll gemacht, konnte mich von den schönen Bildern gar nicht mehr losreißen.

Das neue Layout finde ich schön, würde aber das Layout slicen und dann selbst zusammenbauen (also den Quellcode nicht von PS schreiben lassen) - dann kannst du es auch so machen, dass dein Fenster kleiner und größer wird. Nutzt du Dreamweaver zu designen? Dort findet man unter den Vorlagen immer gute Sachen - ohne Frames aber schon so unterteilt, dass du ein Kopf, einen Inhaltsteil und einen Fußteil hast.

lg

Danke für das Lob.

Ja war viel arbeit die Texte zu schreiben und die vielen Bilder zu machen. Aber zumindest was die Texte angeht, machen das meine Eltern. Dann kommt noch dazu, dass ich ein sehr penibler Kandidat bin. Die Bilder müssen auf jeden Fall immer "hockwertig" sein. So fern das möglich ist.

Hunde denken sich glaub ich immer: "Ui eine Kamera. Da muss ich hin!" Dann wird in den Trageriemen gebissen, oder Objektivdeckel angeknabbert. Und wenn du nicht aufpasst dann hat dich ein anderer am Socken und schüttelt dich (mit Glück hat er nur den Socken

) - ja das ist schon immer toll!

msblacky schrieb:
Hallo,

herzlich willkommen im Forum und viel Spaß noch hier, also ich würde es gleich umbauen damit kannst Du Dir auch für die Zukunft alle Möglichkeiten offen halten.

msblacky

Danke! Ja ich denke - fürchte... es wird drauf nauslaufen dass ich alles in HTML+CSS mache. Zumindest versuche.

Wie mach ich denn so eine aufklappbare Menüleiste in CSS?
Die, die jetzt auf der neuen Seite ist, ist ja eine aus dem Dreamweaver.

Bin auf jeden Fall schon einmal froh hier so nette Leute gefunden zu haben die mir helfen können und wollen.

Grüße
Sebastian

EDIT: Das schwarze Design ist die alte Homepage! Das neue ist das mit dem vielen Grün.

Hab das in meinem ersten Post mit den Links nochmal etwas deutlicher geschrieben.

FreddyX2 · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Zum Menü:

Son of Suckerfish Dropdowns | HTML Dog

Oder Suchfunktion / Google. Stichwort: Suckerfish

Sebastian_86 · 16.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

FreddyX2 schrieb:
Zum Menü:

Son of Suckerfish Dropdowns | HTML Dog

Oder Suchfunktion / Google. Stichwort: Suckerfish

Danke Freddy!
Also das mit dem Menü an sich klappt schon einmal super!

So weit bin ich jetzt:

Habe jetzt nur 2 kleine Probleme, wo ich nicht weiter komm.

Zum einen:
Warum macht er mir unten keinen Abstand mehr rein? Hab dem wrapper oben und unten 10px gegeben. Oben hat er sie. Aber unten nicht.

Zum anderen:
Da wo jetzt "counter" steht, habe ich versucht meinen alten counter einzubauen. Das klappt auch soweit ganz gut, nur wenn der Counter drin ist, dann vergrößert sich das mittlere Feld nach unten. Somit ist es dann länger als der Rest. Hab mit padding und margin, alles auf 0 gesetzt, probiert. aber es geht einfach nicht. bring den bereich der oben und unter dem Counter entsteht nicht weg.
Ne Idee?

Auf jeden Fall schon mal vielen Dank für eure hilfe!

Grüße
Basti

EDIT: Ach genau. Eine Frage habe ich noch. Hatte da ja bei meinem Photoshop Design weiter oben einen Schlagschatten um den "Wrapper". Bekomm ich den in CSS auch wieder hin?

hedoo · 17.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hallo Sebastian 86,

den Schlagschatten musst du als Hintergrundgrafik einfügen.
Dazu um deinen "Wrapper" noch einen div in entsprechender Breite einfügen, Hintergrundbild definieren und deinem "wrapper" ein margin-left mit geben.

Sebastian_86 · 18.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Sodale,

also das mit dem Schlagschatten muss ich noch ausprobieren. Kann mir da leider noch nicht so ganz vorstellen wie die Grafik ausschauen muss wenn sich der "Wrapper" ja in der Höhe verändert. Aber das ist jetzt erst mal egal. Trotzdem Danke. Werd ich morgen oder so mal ausprobieren.

Mich nervt dieser blöde Counter. Wenn ihr in meinem letzten Post auf meine Seite klickt, seht ihr das Problem. Der Counter ist zu groß. Aber oben und unten am Counter sind grüne Streifen. Die wenn weg wären, würde das super reinpassen.

Einzige Möglichkeit, die ein stimmiges Gesamtbild ergeben hat, war den Counter mit width und height auf eine kleinere Größe zu schrumpfen. Was jedoch zur Folge hat, dass er unscharf wird.

Geht das denn nicht anders? Die Grünen Streifen müssen doch irgendwie weg gehn.

Danke für Eure Geduld und Hilfe!

Grüße
Sebastian

FreddyX2 · 18.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Sebastian_86 schrieb:
Sodale,

also das mit dem Schlagschatten muss ich noch ausprobieren. Kann mir da leider noch nicht so ganz vorstellen wie die Grafik ausschauen muss wenn sich der "Wrapper" ja in der Höhe verändert. Aber das ist jetzt erst mal egal. Trotzdem Danke. Werd ich morgen oder so mal ausprobieren.

Mich nervt dieser blöde Counter. Wenn ihr in meinem letzten Post auf meine Seite klickt, seht ihr das Problem. Der Counter ist zu groß. Aber oben und unten am Counter sind grüne Streifen. Die wenn weg wären, würde das super reinpassen.

Einzige Möglichkeit, die ein stimmiges Gesamtbild ergeben hat, war den Counter mit width und height auf eine kleinere Größe zu schrumpfen. Was jedoch zur Folge hat, dass er unscharf wird.

Geht das denn nicht anders? Die Grünen Streifen müssen doch irgendwie weg gehn.

Danke für Eure Geduld und Hilfe!

Grüße
Sebastian

Code:

div#fussbereich a (linie 239)
{
color: black;
background-color: #446b00;
[B]padding-top:  5px;[/B]
padding-right: 0pt;
[B]padding-bottom: 5px;[/B]
padding-left:  0pt;
border-left-width-value: 1px;
border-left-style-value: solid;
border-left-color-value:  #000000;
border-left-width-ltr-source: physical;
border-left-width-rtl-source:  physical;
border-left-style-ltr-source: physical;
border-left-style-rtl-source:  physical;
border-left-color-ltr-source: physical;
border-left-color-rtl-source:  physical;
border-right-width-value: 1px;
border-right-style-value: solid;
border-right-color-value:  #000000;
border-right-width-ltr-source: physical;
border-right-width-rtl-source:  physical;
border-right-style-ltr-source: physical;
border-right-style-rtl-source:  physical;
border-right-color-ltr-source: physical;
border-right-color-rtl-source:  physical;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:  #000000;
}

Setz diese Padding-Angaben mal auf 0.

Dein Counter ist ein Link. Und hier definierst Du für Links im Bereich #footer 5px Innenabstand oben und unten. Und das müssten Deine grünen Balken sein

Sebastian_86 · 18.03.2010

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Soweit so gut

.

Danke für den Tip. Das war der Schubs in die richtige Richtung.
Hatte zwar dann das Problem dass die Felder unterschiedlich hoch waren.

Das hab ich aber gelöst indem ich in die HTML datei zu jedem feld kurz nen style mit padding angegeben hab. danach wars supi.

Also vielen Dank nochmal an alle!
Ohne euch wäre ich sicher noch nicht so weit.

Das Forum ist schon echt hilfreich!

Werd dann mal weiter bauen. Wenn ich wieder Fragen/Probleme hab dann meld ich mich wieder.

Grüße Basti

PS: Wie findet ihr sie bis jetzt?

Sebastian_86 · 01.03.2011

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hallo zusammen,

mittlerweile hatte ich die Homepage (Hovawarte - Vom Hagenauer Forst) erfolgreich fertig gestellt und alle waren zufrieden.

Da ich nun Semesterferien habe und etwas Zeit übrig ist, möchte ich mir die Sache etwas erleichtern.

Beispielsweise habe ich nun das Laufband über den Befehl readfile aus php und einer Textdatei realisiert, damit ich nicht immer alle Dateien ändern muss.

Jetzt habe ich mir gedacht, man könnte das ganze auch mit dem Navigationsmenü machen, da ab und zu das Menü um einen Wurf erweitert werden muss. Hab das ganze ebenfalls mit dem readfile Befehl und einer Textdatei ausprobiert, was auch ganz gut funktioniert hatte.

Nur bin ich dabei auf Probleme gestossen, da meine Bildergalerien 3 bis 4 Ebenen tiefer liegen und ich dadurch die Links jeweils ändern müsste. Somit bliebe es nicht mehr bei einer Textdatei die ich einlesen könnte sondern bräuchte für jede Ebene eine neue. Zwar immer noch weniger Arbeit, als alle Dateien zu ändern, aber irgendwie auch nicht besonders schön.

Ausserdem frag ich mich, ob das wirklich schön umgesetzt ist, mit dem Befehl readfile und einer Textdatei.

Hab leider auch NULL Erfahrung mit PHP, drum wollte ich hier mal nachfragen, wie man mein Vorhaben am besten realisieren könnte. Da "dynamische" Links schon eine feine Sache wären.

Vielleicht könnt ihr mir ja kurzfristig weiterhelfen und langfristig ein Buch für PHP-Lernen empfehlen.

Grüße und vielen Dank
Sebastian

PS: Nicht wundern wegen der Mischung der Links zwischen *.php und *.html.

Mir ist die Idee mitten im Umbau gekommen. Drum ist es aktuell etwas durcheinander.

simix · 03.03.2011

AW: alte Homepage soll ein neues Design bekommen (Komplettumbau)

Hey,
gleich vorweg wenn du keine ahnung von php hast dann lass es doch einfach weg. (ist nicht böse gemeint, aber besser ist erstmal bei einer Sprache zu bleiben).
zum layout allgemein würd ich sagen, dass die farbwahl und die sortierung der Bilder nicht optimal ist. Das grün ist zu "schwer" und die bilder sollten schon bündig verlaufen. Wichtig ist das das Design schön und verständlich ist. Helle Farben sind immer freundlicher. nimm doch ein sattes rasengrün. "Weniger ist mehr" ist kein dummer spruch sondern hilfreich bei der Gestaltung. Du hast nicht viele Links, daher kannste die sehr einfach einbinden.
Ich würde damit beginnen die Bilder in der horizontalen bündig zu machen. kannste mit PS skalieren. dann kannst du (wenn du html nutzt) z.B. eine Tabelle als Grundlage nehmen und eine feste größe zuweisen. (Dynamische anpassung an den Browser würd ich nur verwenden wenn die leute sich die Bilder in Originalgröße anschauen wollen. was ich bei dir nicht feststellen kann das dies möglich ist / oder du ein HG-Bild über den gesamte browser nutzen willst.) Ich persönlich mag es nicht unnötig scrollen zu müssen (und die usability auch nicht) von daher würd ich schauen das dein Design die Standardgrößen nicht überschreiten. also in einem rahmen von 800x600, 1280x1024 etc. arbeiten. orientiere dich dabei einfach an deinem Monitor, so das alles lesbar ist. den Besucherzähler raus! pott hässlich und überflüssig. Die typo im Header ist zu sehr comic sans style. Schau mal im Netz gibt genug schöne, bessere Fonts.
so mehr fällt mir gerade nicht ein hoffe ich konnte dir (beim layout zumindest) weiterhelfen.

mfg