Erstellung einer Homepage

[sunnyw86]

Hallo,

ich hoffe ihr könnt mir helfen. Ich habe mir eine Layout für meine Homepage überlegt. Umgesetzt habe ich dies mit Frames.Jeder Frame hat ein Hintergrundbild. Ich habe es jetzt endlich geschafft, das das Gesamtbild paßt. Problem ist jedoch, wenn ich die Größe meines Firefox Fenster ändere verschieben sich die Hintergrundbilder und überlappen z.B.: den oberen Bereich. Wie kann ich das verhindern? Schon mal vielen Dank!

LG sunnyw86

 

[Gilles]

Erst mal grundsätzlich. Frames sind was böses. Die gestaltung einer Homepage macht man mit CSS CSS 4 You - The Finest in Stylesheets.
Du musst es so sehen. HTML ist nur für die Auszeichnung des Inhaltes.
Hab ich ne Tabelle, erstell ich eine. Ein Bild, erstell ich. Also es geht nur um den Inhalt. Sobald ich den Inhalt fertig habe, kann ich das ganze Designen :)
Dafür benutzt man dann CSS.
Da es bei dir ja Hintergrundbilder sind und somit Design, machst du das mit CSS.
Hats du vielleicht mal ein Bild davon wie die Seite ungefähr aussehen soll?
Inhaltlich (heisst: überschriften, Menu mit Links, Bilder die nicht dem Design dienen, usw.) als auch von Design her (Wo stehen die Elemente? Wo sollen die hintergründe platziert werden)

Edit:
Nur noch nebenbei. Solche Probleme treten des öfteren auf, wenn man Frames benutzt, also am besten die Finger davon weg ;)

 

[sunnyw86]

Ok, danke für den Tipp. Werde mir die Seite mal anschauen.
Hier meine Idee für das Layout:

 

[Gilles]

leider seh ich auf dem bild keinen inhalt. Um dsa ganze Auszeichnen zu können brauch man auch wenigstens Teilinhalt.

ich nehme mal an es könnte so aussehen:

Oben kommt ein Logo als hauptüberschrift (also Bild und Headline1)
Links kommt eine navigation. (Eine Liste mit Links)
Rechts kommt eine Gruppierung aus Überschrift (Headline2) und dem Inhalt. Zum beispiel ein Text (Absatz)

Weisst du, wie du das in HTML umsetzen könntest? (Ohne jegliches Design erst mal)
Je nachdem ob du es könntest oder nicht, werde ich dir verschiedene Antworten geben

 

[Efchen]

Hier meine Idee für das Layout:

Ja, das ist ein klassisches Layout.

Jetzt nimmst Du Deinen Inhalt und schreibst den in ein HTML-Grundgerüst.
Dann zeichnest Du diesen Inhalt semantisch sinnvoll aus, so wie HTML sich das vorstellt.

DANN ERST nimmst Du CSS und setzt Dein Layout mit den Elementen um, die Du in HTML definiert hast.

Dann bekommst Du eine gute Website und hast richtig was gelernt. Wenn Du mit dem Layout anfängst, wird das Ergebnis als Anfänger eine Katastrophe.

 

[sunnyw86]

Oben kommt ein Logo als hauptüberschrift (also Bild und Headline1)
Links kommt eine navigation. (Eine Liste mit Links)
Rechts kommt eine Gruppierung aus Überschrift (Headline2) und dem Inhalt. Zum beispiel ein Text (Absatz)

Genau :-)

Die gestaltung einer Homepage macht man mit CSS CSS 4 You - The Finest in Stylesheets.

Sehr gute Seite. DANKE!

Ok, erst die Seite mit Inhalt füllen, dann das Design. Aber könnt ihr mir schonmal ein Tipp geben wie ich diese Rundungen hinbekomme und das sich das Menu mit dem Kopf-Teil überlappt?

 

[Gilles]

Das mit dem Überlappen ist nicht schwer, jedoch das mit den Rundungen. Wenn du keine Bilder als Kästen nimmst (Was äußrst ungünstig ist, da sie eine feste Größe haben), müsstest du für jeden Kasten 9 Kleine Bilder machen. Mit dem Firefox gibt es eine schon eine schöne Eigenschaft die -moz-border-radius heisst. Damit definiert man den radius der rundung
Wenn es nicht das Layout zerstört, wenn es nicht abgerundet ist, kann man diese Alternative wählen. Besser ist aber immer ein einheitliches layout ;)
Würde aber an deiner Stelle erst mal auf die Abrundungen verzichten. Die kannst nämlich immer noch nachträglich hinzufügen.

 

[Efchen]

Ok, erst die Seite mit Inhalt füllen, dann das Design.

Da hast Du aber was vergessen.

1. Inhalt
2. Semantische Auszeichnung mit HTML.
3. Layout und Design mit CSS.

Aber könnt ihr mir schonmal ein Tipp geben wie ich diese Rundungen hinbekomme

Z.B. mit proprietären Eigenschaften wie moz-border-radius oder mit background-images.

und das sich das Menu mit dem Kopf-Teil überlappt?

Evtl. mit relativer Positionierung und ggfs. z-index.

 

[Gilles]

Da hast Du aber was vergessen.

1. Inhalt
2. Semantische Auszeichnung mit HTML.
3. Layout und Design mit CSS.

Hab den inhalt ja direkt in trockene Tücher gebracht, indem ich schon erwähnt hatte, was für Elemente dafür gebraucht werden. Und am Ende habe ich ja gefragt ob sie weiß, wie man das in HTML umsetzt (also die semantische Auszeichnung)

Vielleicht kannst du ja nochmal die schöne Seite posten, bei der man richtig HTML lernt ;) CSS hat sie ja nun schon.

 

[Efchen]

Einführung | Webdesign mit XHTML und CSS

 

[sunnyw86]

Vielen Dank für eure Antworten!!!
HTML kann ich, da ich vor 3 Jahren schon eine Internetseite ins Leben gerufen habe. Den Inhalt habe ich auch schon. Die Seite ist praktisch fertig, wollte jetzt nur das Layout ein wenig ändern. Klappt gerade alles wunderbar :razz:.

 

[Efchen]

HTML kann ich, da ich vor 3 Jahren schon eine Internetseite ins Leben gerufen habe.

Bist Du sicher?

Versteh mich nicht falsch, sogar viele Agenturen und Menschen, die von sich behaupten, sie können HTML haben teilweise nicht die Spur einer Ahnung, was HTML genau macht.

In Deinen Beiträgen gibt es einige Hinweise, die darauf deuten, dass Du den eigentlichen Sinn womöglich doch noch nicht weißt: Du benutzt Frames, Du machst den Eindruck, als hättest Du noch nicht viel Kontakt mit CSS.

Wichtig für eine anständige Website ist aber, dass man sie richtig mit HTML & CSS erstellt. CSS funktioniert nur mit einer Basis aus validem und semantisch sinnvollem HTML.

Wenn Du mit dem Begriff "Semantik" was anfangen kannst, dann kannst Du HTML. Wenn Dir der Begriff nichts sagt, hast Du vermutlich keine Ahnung, was der eigentliche Sinn von HTML ist. Wenn Du glaubst, HTML ist für die Darstellung im Browser, ist Dir der Sinn bisher auch verborgen geblieben.

Darf ich mal eine Seite von Dir sehen?
Ich will Dich nicht vorführen, Dir einprügeln, dass Du ein Nichts seiest und meine Kenntnisse in HTML ach-so-viel besser sind als Deine, ich will nur, dass Du weißt, was HTML ist, weil das heutzutage die wenigsten wirklich wissen und sich deshalb auch mit CSS ungeheuer schwer tun. Ich will nur helfen.

 

[sunnyw86]

Das habe ich schon verstanden. Nein mit CSS kenne ich mich nicht wirklich aus, schon sehr lange her. Bin aber gerade fleißig am lernen. Die Seite ist echt gut die mir empfohlen wurde. Bin schon sehr gut voran gekommen. Naja für mein Verständnis ist Semantik, dass man mit HTML den Inhalt darstellt und mit CSS das Design. Also praktisch die beiden Sachen trennt.
Die Internetseite ist nicht mehr online, da ich sie für mein Freund gemacht hatte.

 

[Efchen]

für mein Verständnis ist Semantik, dass man mit HTML den Inhalt darstellt und mit CSS das Design.

Okay, Du machst das schon :-)

Ich würde zwar das "dargestellt" anmosern, weil HTML nichts darstellt, stattdessen würde ich "auszeichnet" geschrieben, aber das nur der Vollständigkeit halber für Mitlesende, die glauben, HTML wäre für die Darstellung. Das scheinst Du nicht zu brauchen.
Ich freu mich über jeden, der es verstanden hat und so das WWW zu einem besseren Platz machen kann. :-D

Liebe Grüße,
-Efchen