Professionelle Homepage Layout

Hallo Kerstin,

oh, das ist eine Frage, die sich nicht so einfach beantworten läßt. Grundlegend lässt sich aber sagen: Übung macht den Meister.

Ich empfehle Dir, ein paar Dir professionell erscheinende Websites anzuschauen, genau unter die Lupe zu nehmen, was Dir daran gefällt, Layout, Navigation Bedienung etc. und dann zu versuchen, diese nachzubauen, natürlich mit Deinem persönlichem Touch. Also praktisch nur Ideen zu sammeln.

Eine professionelle Webseite entsteht immer zunächst auf dem Blatt Papier. Zeichne dort auf, wie die grundlegende Sturktur sein soll. Wann ist wo die Navigation, welche Elemente gibt es auf der Webseite etc.

Schau auch mal, wenn möglich in den Quelltext der Webseiten, die Dir gut gefallen, und analysiere, mit welcher Technik es dort gemacht wird. Denk dabei aber immer daran, dass es nicht erlaubt ist Quelltext zu kopieren.

Du solltest Dich für eine Professionelle Webseite intensiv auseinandersetzen mit:

• HTML
• Verwendung von Tabellen in HTML als Mittel zur ausrichtung von Elementen (Menü, Content etc.)
• CSS
• Grafikbearbeitung und Methoden im Web

Sehr gut helfen könnte Dir dabei folgende Seite, die ein absolutes Muss in meinen Augen ist.
::] http://www.drweb.de

Wenn Du dann spezielle Fragen hast, helfe ich gerne weiter.

Zitat von Beatz

oh, das ist eine Frage, die sich nicht so einfach beantworten läßt. Grundlegend lässt sich aber sagen: Übung macht den Meister.

Das ist soweit richtig, üben ist das Wichtigste. niemand kriegt eine professionelle Website auf Anhieb hin.

Zitat von Beatz

Du solltest Dich für eine Professionelle Webseite intensiv auseinandersetzen mit:

• HTML
• Verwendung von Tabellen in HTML als Mittel zur ausrichtung von Elementen (Menü, Content etc.)
• CSS
• Grafikbearbeitung und Methoden im Web

Tabellen sind eigentlich nicht zur Ausrichtung von Elementen gedacht. Dazu gibt es die Positionkerung mettels CSS. Wenn mal irgendetwas nicht mit CSS geht, dann kann man immer noch Tabellen zur Hilfe nehmen, aber eigentlich sollte man Tabellen nur zur Darstellung tabellarischer Daten verwenden

Gerade Einsteigern würde ich empfehlen, zunächst ausschließlich mit Div/CSS zu arbeiten und erst später dann Tabellen als Ergänzung dazuzunehmen.

Zu deinen Punkten würde ich noch folgende hinzufügen:

• Benutzbarneit/Bedienbarkeit (Usability)
• Zugänglichkeit (Accessibility)
• Grundlagen über Design/Farbenlehre

Stefan

.. css ist to much vorerst. man sollte lieber mit den grundlagen beginnen. css ist davon ab auch nicht mit allem zeugs kompatibel. css ist dann wohl mehr ne stilfrage.

Über die Frage "Positionierung mit CSS oder Tabellen" läßt sich bekanntlich streiten. Jeder hat seine eigenen Vorlieben und jede Methode hat seine eigenen Vor- und Nachteile Es ist natürlich auch okay, das ganze, rein mittels CSS zu machen. Wenn Du eine professionelle Webseite machen möchtest, musst Du Dich eh mit beiden Thematiken intensiv auseinandersetzen und dann entscheiden, welche für Dein geplantes Layout die geeignetere Methode ist.

Grundlegend lässt sich zu den beiden Methoden sagen:
Rein CSS ist sinnvoll, wenn man sich für ein schlichtes Layout ohne viel Schnickschnack entscheidet. Wenn man ein komplexes Design mit vielen Details im Auge hat, sind Tabellen die geeignetere Methode.

Zitat von jaaam

.. css ist to much vorerst. man sollte lieber mit den grundlagen beginnen. css ist davon ab auch nicht mit allem zeugs kompatibel. css ist dann wohl mehr ne stilfrage.

Ja, erst mit den Grundlagen. Das bedeutet, dass man zunächst lernen muss sein Dokument mittels (X)HTML logisch zu strukturieren.

Im zweiten Schritt kommt dann die optische Gestaltung mittels CSS dran.

erst danach kommt vertiefender Stoff, z.B. Gestaltung mittels Tabellen, selten gebrauchte Tags oder CSS-Eigenschaften etc.

Das halte ich so für die didaktisch Vernünftigste Lösung, auch wenn die kurzfristigen Erfolgserlebnisse ausbleiben.

Zur Kompatiblität von CSS muss man folgendes sagen: Die aktuellen Browser, also IE ab 5.0, Mozilla ab 1.4, Netscape ab 7.0, Opera ab 6.0 etc, unterstützen alle gemeinsam eine gewisse Teilmenge von CSS, mit der man gut arbeiten kann. Sie ist völlig ausreichend, um wirklich gute tabellenfreie Layouts hinzukriegen.

Hinzu kommen neben den technischen Argumenten noch gestalterische. In der letzten Zeit merkt man doch, dass den Designern wenig Neues einfällt. Sie weichen auf Flash und andere Spielereien aus, was oft zu Lasten der Usability geht. Wirklich innovatives Design ist heutzutage häufig CSS-basiert.

Stefan

Hallo Kerstin,

wie ich schon oben beschrieben habe, ist es ein langer Weg. Diesen kannst Du nur durch praktische Erfahrung machen. Fange klein an und arbeite Dich langsam nach oben.

Wenn Du eine professionell gestaltete Seite selbst machen willst, gibt es nur diesen einen Weg. Und die Wörter mit denen wir hier "um uns schlagen" können Dir doch nur dabei helfen, die richtigen Fragen zu stellen.

Du hast sicherlich nicht erwartet, dass Du nach ein paar Antworten eine professionelle Seite selbst machen kannst. Dazu bedarf es jahrelanger Erfahrung.

also ich muss schon sagen ihr kennt euch schon aus mit html, respekt!
aber um einem anfänger die allumfassende frage zu beantworten, wie man so ein "professionelles homepage-layout" erstellt, hilft es glaube ich nicht gerade, diesen mit fachgesimpel zu bombardieren...
ich bin genau so wie ihr der meinung dass "learning by doing" fürs erste die einfachste methode ist um in html einzusteigen. später kann man sich feinheiten immer noch aneignen.
aus meiner erfahrung mit html kann ich nur sagen: man sollte erstmal anfangen sich mit der grundlegenden syntax auseinanderzusetzten (schrift gestalten, bilder einfügen, frames und tabellen erstellen usw...). man braucht dafür nicht unbedingt gleich bücher zu studieren, im internet gibt es hunderte von seiten auf denen das erklärt ist. ich habe meine ersten schritte z.b. mit http://selfhtml.teamone.de/ gemacht, sehr zu empfehlen!
wenn man dann schonmal etwas übung hat, kann man sich daran machen details und zusätzliche funktionen einzubinden. ob jetzt zuerst mit css oder mit tabellen arbeiten... meiner meinung nach gibt es keine genaue strategie, nach der man vorgehen MUSS. das ist einfach eine frage der übung.
und richtig, wer noch überhaupt keine ahnung hat wie html funktioniert, der sollte sich halt einfach mal n paar professionelle HP's und ihren quelltext anschauen, da kann man auch schon schlau draus werden.
also: klein anfangen, dann wird man bald auch verstehen was die jungs hier mit den "fachbegriffen" meinten

und im übrigen: html ist zwar schon sehr zeitaufwendig aber "jahrelange erfahrung" ist ja wohl ein bisschen übertrieben!

Für Anfänger empfielt sich auch dieser (sehr einfach beschriebene) HTML Grundkurs:

http://www.lerneniminternet.de/

(Einfach auf "HTML Grundkurs Free" klicken, rasch anmelden, einloggen, und den Kurs downloaden.)

Inhalt des Kurses:

1.) Einführung
Was brauchen Sie für den Kurs und wo bekommen Sie dies. Was steckt hinter HTML, was kann HTML nicht.
2.) Grundkörper einer HTML-Datei,
Formatierung, Absätze, Schriftarten, Farben, Überschriften
3.) Grafiken
Grundlagen Grafik
Grafikformate, Einbinden von Grafiken
4.) Hyperlinks
Pfadangaben in HTML-Dokumenten
Hyperlinks: Anker, E-Mail, Grafiken als Hyperlink
5.) Listen, Aufzählungen in HTML
6.) Tabellen Teil 1
7.) Tabellen Teil 2
8.) Metatags
Publizieren, Anmeldung bei Suchmaschinen, Bekanntmachen der Seite
9.) Test der Seite
Optimierung
Tips für das Seitenlayout
10.) Ausblicke
Wie gehts weiter: Wie baue ich eine Seite mit Frames? Formulare? Wo bekomme ich Unterstützung? Geld verdienen mit Werbung?

MfG,

So, jetzt komm ich und muss mal ein paar Köpfe rollen lassen

Zitat

.. css ist to much vorerst. man sollte lieber mit den grundlagen beginnen. css ist davon ab auch nicht mit allem zeugs kompatibel. css ist dann wohl mehr ne stilfrage.

CSS ist grundsätzlich kompatibel. Leider sind die Leute von Microsoft zu dumm auch den Internetexplorer so langsam mal auf HTML/CSS Richtlinien anzupassen. Dort sind aber auch nur wenige Details nichtkompatible.
CSS ist Grundlage. Wenn ich jemanden sage, er solle mit Tabellen ein Layout gestalten ist das eigentlich völlig inkompetent. Zwar gestalte auch ich hin und wieder wenige Seiten mit Tabellen, aber das ist wie bereits gesagt völlig schei....
CSS ist keine Stilfrage. Du verwechselst da was!
Wie reden nicht davon Farben in Schriften u.s.w. anzupassen, sondern mit CSS (Span/Div) zu layouten. Das ist mindestens genauso einfach wie HTML und lässt sich mit W3C Richtlilinien vereinbaren.
Zuviele Seiten sind bereits im Internet, als das man auch noch Anfängern sagen sollte, das proffesionelles Design mit Tabellen beginnt.

Zitat

Ja, erst mit den Grundlagen. Das bedeutet, dass man zunächst lernen muss sein Dokument mittels (X)HTML logisch zu strukturieren.

Im zweiten Schritt kommt dann die optische Gestaltung mittels CSS dran.

erst danach kommt vertiefender Stoff, z.B. Gestaltung mittels Tabellen, selten gebrauchte Tags oder CSS-Eigenschaften etc.

Man kann mit Tabellen nicht logisch gestalten >>> siehe weiter unten.

Zitat

Über die Frage "Positionierung mit CSS oder Tabellen" läßt sich bekanntlich streiten. Jeder hat seine eigenen Vorlieben und jede Methode hat seine eigenen Vor- und Nachteile Es ist natürlich auch okay, das ganze, rein mittels CSS zu machen

CSS Layout mit Div und Span sind keine Vorliebe. Tabellen sind dazu da, um Tabellarische Daten darstellen zu können.
So können im Web auch z.B. Umsatzplanungen oder Lebensläufe vernünftig dagestellt werden. Für Layouting ist aber eine Tabelle auf keinen Fall gedacht.

Mit CSS lässt sich alles exakt genauso machen, wie man es ebenfalls auch von den Tabellen her kennt.
Gerade in mein bereits verteidigtes Thema, der Barrierefreiheit, lassen sich Tabellen nicht mit Layout vereinbaren.

So wird bei einem Textbrowser, der zum Beispiel von Blinden genutzt wird, der Text einer Tabelle von Link nach Rechts gelesen, unabhängig von den Spalten oder Zeilen. So wird also der Text aus der Linken Zeile zuerst vorgelesen und danach der aus der Rechten Zeile, auch wenn diese nicht zusammen gehören.

Eine Tabelle wird übrigens auch erst dann angezeigt, wenn der komplette Inhalt geladen ist. So wird also ein stark mit grafischen Inhalt versehende Tabelle erst nach Minuten angezeigt >>> z.B. in Andacht an Modembesitzer (die armen Schweine)

Ausserdem sind CSS Layer wesentlich flexibler. So sind also auch Prozentangaben völlig HTML konform.

.
.
.
und
und
und

Ich denke mal für einen reinen Anfänger ist die Erstellung einer Homepage in Tabellen Form einfacher. Viele können da mit HTML noch nicht einmal viel Anfangen und CSS ist ein Bömisches Dorf für die
Auch die meisten Programme verwenden Tabellen für die Darstellung.
So ist zumindest meine Erfahrung.
Angefangen hatte ich damals mit Front Page mit dem ich gar nicht klar kam. Dann bin ich auf Net-Fusion umgestiegen, so weit so gut, auch hier wurde viel mit Tabellen gearbeitet. Für mich der bis dahin ja keine Ahnung von HTML hatte auch ganz praktisch, meine Kenntnisse von HTML beschränkten sich damals auf nur ein bißchen Textformatierung in Foren.
Bis dann das Programm mir eine Fehler reinschrieb. Mit Hilfe eine Bekannten versuchte ich das den Fehler im HTML Code rauszubekommen und mußten feststellen, daß uns das Programm uns da nicht dran läßt.
Oben drein wie ich dann später noch erfuhr, schreibt Net-Fusion sehr umständlich und zu große Dateien. Ich habe mir dann auf Empfehlung ein Buch über HTML4 gekauft und mich da rein gearbeitet, ok meine Kenntnisse reichen jetzt soweit, das ich HTML Texte auslesen kann und Fehler bei meiner HP entdecken kann aber ich Stoße auch immer wieder auf Grenzen.
Ich bin dann auf Dreamwaver umgestiegen, da kann ich wahlweise nur Einfügen und dem Programm die arbeit überlassen oder ich wechsle die Ansicht uns schreibe das selbst in HTML.
Auf jeden Fall arbeite ich nach wie vor mit Tabellen und z.T. mit Ebenen,
weil ich dies einfacher und leichter finde, gerade für Anfänger. An CSS habe ich mich noch nicht dran gewagt und ehrlich gesagt auch noch gar nicht befaßt. Ich habe zwar eine CSS-Datei auf meiner HP aber dies habe ich nicht selbst geschrieben, sondern wurde für mich geschrieben. Diese ist aber rein für die Texte und Links gedacht, damit ich nicht auf jeder Seite die Links und Texte extra formatieren muß.
Wie gesagt CSS ist sicher eine feine Sache und für viele die sich damit auskennen ein muß, aber meiner Meinung nach für Anfänger nicht unbedingt geeignet.

Zitat von Shila

Ich denke mal für einen reinen Anfänger ist die Erstellung einer Homepage in Tabellen Form einfacher.

Davon würde ich dringend abraten. Die meisten Profis haben HTML zu einer Zeit gelernt, als der IE 4 und Netscape 4 die gängigen Browser waren. Diese Browser konnten nur sehr wenig CSS, om Tabellenlayout kam man nicht herum.

CSS-Layout funktioniert aber konzeptionell völlig anders. Es ist nicht komplizierter, aber wer jahrelang mit Tabellen gearbeitet hat, kriegt einfach ein Tabellenlayout schneller hin als ein CSS-Layout. Dadurch empfindet er CSS-Layout als schwerer. Tatsächlich ist ein etnfaches Layout mit CSS und mit Tabellen etwa gleich schwer, je komplexer aber das Layout wird, um so einfacher wird er mit CSS im Vergleich zu Tabellen.

Zitat von Shila

Viele können da mit HTML noch nicht einmal viel Anfangen und CSS ist ein Bömisches Dorf für die

Die haben aber auch im Profibereich nichts verloren.

Zitat von Shila

Auch die meisten Programme verwenden Tabellen für die Darstellung.

Welche Programme meinst du? Falls du z.B. in PHP geschriebene Foren oder Gästebücher meinst, dann kann man das getrost unter "gewachsenen Code" abhaken, ebenso wie 90% aller Profi-Websites im Internet.

Aber seht euch mal http://csszengarden.com an. Es gibt dort eine Navigation, durck Klicken auf die Links dort verändert sich das Aussehen drastisch. Der HTML-Code bleibt gleich, nur das CSS wird ausgetauscht. Wenn nun z.B. eine Forensoftware das auch könnte, könnte man sie doch viel besser an das Layout der Homepage, in die das Forum eingebunden werden soll, anpassen.

Zitat von Shila

Bis dann das Programm mir eine Fehler reinschrieb. Mit Hilfe eine Bekannten versuchte ich das den Fehler im HTML Code rauszubekommen und mußten feststellen, daß uns das Programm uns da nicht dran läßt.
Oben drein wie ich dann später noch erfuhr, schreibt Net-Fusion sehr umständlich und zu große Dateien.

Du hast gerade wunderbar beschrieben, warum diese WYSIWYNG-Editoren nichts taugen. Gerade, wenn es darum geht, den Code zu warten, versagen diese Programme kläglich.

Zitat von Shila

Auf jeden Fall arbeite ich nach wie vor mit Tabellen und z.T. mit Ebenen, weil ich dies einfacher und leichter finde, gerade für Anfänger.

Auch Dream
weaver selbst besteht aus gewachsehem Code, ebenso wie die anderen WYSIWYNG-Editoren. Diese Programme so abzuändern, dass sie CSS-Layout statt Tabellenlayout generieren, ist sehr aufwändig, daher werden da wohl noch einige Versionsschritte erforderlich sein.

Zitat von Shila

An CSS habe ich mich noch nicht dran gewagt und ehrlich gesagt auch noch gar nicht befaßt.

Und wie willst du dann beurteilen, ob CSS für Anfänger geeignet ist, wenn du dich damit noch nie befasst hast?

Stefan

Hallo zusammen,

wenn ich da an meine Entwicklungsschritte zurückdenke

Also mir hätte es sehr gut getan wenn ich gleich mit gutem Html und CSS begonnen hätte!
Aller Anfang ist schwer, aber es hat auch noch niemand behauptet dass das ganze leicht sei.
Kinder die zweisprachig erzogen werden lernen doch auch alles problemlos nebenher.

http://selfhtml.teamone.de/ DRINGEND EMPFOHLEN

Viel Spaß

Martin

Hallo

DIe Anfänge geschehen eh mit HTML. Also solltest du dich auch als erstes dort einlesen. Das eine Navileiste so gut aussieht, ist völlig unabhängig von der Art der Programmierung (Auszeichnung), sondern hängt an deinem gestalterischen Können.

Ein gutes Programm wäre Dreamweaver von Macromedia. Heisst aber nicht, das deine Homepage dann auch proffesionell oder schön wird. Das ist, wie gesagt, von dir abhängig.

Nachsatz: Proffesionalität hängt auch von der Masse des Kontent ab. Ausserdem sollte man diese ganzen beschi....nen Gif Bilder dringend sein lassen.

Hallo Kerstin alias Nissi,

ein Buch zum Thema CSS kann ich nicht unbedingt empfehlen, würde ich ohnehin von abraten. Im WWW findest Du nun wirklich alles notwendige zum dem Thema. Außerdem hast Du dabei den Vorteil, dass DU so langsam aber sicher alle guten Seiten kennenlernst und evtl. auch mal einen Ansprechpartner hast, den Du anmailen kannst. Dafür Geld auszugeben ist - aus meiner Sicht - herausgeschmissenes Geld.

Ein sehr gutes Programm zum erstellen von Homepages ist Macromedia Dreamweaver. Allerdings kostet das auch nicht besonders wenig. Wenn Du Dich in das Thema einarbeiten willst, empfehle ich Dir auf jeden Fall auch den HTML-Editor von Ulli Meybohm (Freeware).
::] http://www.macromedia.com
::] http://www.qhaut.de

Wie man so schöne Navigationsleisten hinbekommt??? Übung, Übung, Übung. Mehr lässt sich dazu im Grunde genommen nicht sagen. Jeder hat einen anderen Geschmack. Surfe im Netz rum, schaue was Dir gefällt und lasse Dich insperieren.

Also ich würde, wenn man Html lernen will, kein WSYWYG Programm einsetzen. Für mich ist und bleibt Phase5.3 das ultimative Tool um Html-Seiten zu erstellen. (http://www.qhaut.de = offizielle Seite für den Html Editor, dort bekommst Du ALLE Fragen zum Phase5 beantwortet. Download des Editors ist dort ebenfalls möglich.) .
Für CSS bietet sich TopStyle light an (ebenfalls auf http://www.qhaut.de verlinkt), solltest Du es nicht finden frag nochmal, dann suche ich den Link raus.

Als Nachschlagewerk immer noch SelfHtml und vor allem das INTERNET => Google, oder im Forum nachfragen.

Wegen des Layouts: fang erst mal an die ersten Gehversuche zu machen, der Rest folgt irgendwann von selbst.

Martin

Ich würde einemn WYSIWYG-Editor wie Dreamweaver nicht für Anfänger empfehlen. Als Anfänger sollte man zum Lernen erst mal einen Quelltext-Editor wie Phase 5 einsetzen.

Stefan