Frage bezüglich Homepage erstellen - an die Profi's

Hallo zusammen,

habe mal eine nicht ganz unerhebliche Frage. Momentan arbeite ich daran eine neue Firmenwebsite zu erstellen. Wir haben vorher ein Offline-CMS verwendet, welches wir aber Designtechnisch angepasst haben. Nun soll die Seite frischer gestaltet werden. Da ich mehr Möglichkeiten habe, wollte ich die ganze Sache per Editor programmieren und nach Möglichkeit viel CSS verwenden. Nun habe ich festgestellt, das manche Sachen in CSS teilweise etwas schwierig zu erstellen sind, da ja gewährleistet sein muß das die Seite sowohl im IE 6-8 sowie auch im Firefox problemlos laufen soll. Natürlich macht der IE die meisten Probleme bei der Programmierung. Nun bin ich hingegangen und habe das Grundlayout im Tabelledesign erstellt und in diesem verscheidene DIV-Boxen platziert. Da ich in CSS noch nicht ganz so gut Bescheid weiß wusste ich mir momentan nicht anders zu helfen. Was ich nun festgestellt habe ist, das es teilweise etwas mühselig ist gewisse Sachen so umzusetzen, das es gut aussieht. Tabellen sind veraltet bzw. werden ja normalerweise nicht für das Design eingesetzt aber dadurch das ich teilweise auch mit einem WYSIWYG-Editor arbeite verführt es schon sehr.

Meine Frage: Wie würdet ihr eine Firmenhompage erstellen? Mit dem Editor von Hand? Eine Mischung zwischen Tabellen und CSS-Layout? Ein Online-CMS?

Was könnt ihr empfehlen? Gibt es einen Editor der ähnlich wie ein WYSIWYG-Editor arbeitet für CSS, sodaß es mit dem programmieren etwas einfacher wird?

Teilweise muß ich leider noch ziemlich “herumprobieren” bis etwas passt. Wäre super wenn ihr mir dazu was raten könntet.

Ich nutze generell nur einen normalen Editor, natürlich mit Syntax Highlight und schreibe dann alles Per Hand. Liegt wohl auch daran, dass ich generell nur mit PHP Arbeite, und der HTML/CSS krams eher nebenbei erstellt wird ^^"
WYSIWYG-Editoren haben den Nachteil, dass man nicht immer vollkommen unter Kontrolle hat, was dort in HTML/CSS erstellt wird. Umständliches Nacheditieren ist da nicht selten.

Also mal abgesehen davon, daß die Verwendung von Tabellen
für sowas natürlich unsinnig ist, ist das hinsichtlich der
Anzeige in verschiedenen browsern sicher nicht einheitlicher,
schlicht weil nirgends präzise definiert ist, wie man konkret
Tabellen darstellt. Im Gegenteil, das soll so umgesetzt werden,
daß der Nutzer tabellarischen Inhalt am besten verstehen kann,
ist also eine ganz andere Anforderung als ein einheitliches
Design.

Und natürlich kann man ein CSS-Layout so robust erstellen, daß es
in allen CSS-fähigen browsern (mal abgesehen von netscape4
vielleicht) anständig aussieht. Eventuell muß man da für MSIE
5 und 6 per ‘conditional comments’ etwas nachhelfen, wenn das
Layout etwas aufwendiger wird.
Und wenn der eigentliche Seiteninhalt sinnvoll struktuiert ist,
funktioniert es ja sogar alternativ auch noch ohne CSS.

Insofern ist Tabellenlayout+CSS eine ganz böse Mischung, die
sicher gar nicht stabil ist. Da Tabellenlayout inhaltlich unsinnig
ist, bleiben einem also nur die Alternativen, es bei dem zu
belassen, was die browser von sich aus für eine Darstellung
ohne CSS haben (ist auch nicht schlecht) oder eben CSS etwas
konservativ und effektiv einzusetzen, ohne allzu ausgefeilte
Tricks zu nutzen, die den Kram wieder instabil machen.

Wie man die Firmenseite nun effektiv macht, kommt darauf an,
wie stabil und zuverlässig das laufen soll und wie interaktiv der
Inhalt ist.

Handelt es sich um eine Seite, die keine interaktiven Inhalte hat
und sehr stabil laufen soll, kann man das auf seinem Rechner
zuhause mit PHP zusammenbasteln, daraus statische Dateien
erzeugen und die dann hochladen.
Wenn es was zu aktualisieren gibt, macht man das auf dem
Rechner zuhause und läd dann wieder die statischen Seiten hoch.

Je interaktiver der Kram wird und desto geringer die
Anforderungen sind, was die dauerhafte fehlerhafte Erreichbarkeit
anbelangt, desto mehr Kram kann man da dynamisch laufen
lassen. Etwa kann man dann auch gleich das PHP auf dem server
nutzen, um Inhalte zusammenzusetzen. Und wenn man es noch
ein wenig riskanter mag und es braucht, kann man ja sogar auch
Datenbanken einsetzen.
Mit jeder interaktiven Komponente, die man hinzufügt, wird das
Endresultat natürlich anfälliger für Störungen und die
Verfügbarkeit sinkt, die Anforderungen an den server hingegen
steigen.

Du schmeisst hier Dinge in einen Topf, die nichts miteinander zu tun haben.

Ob du die Inhalte von Hand im Editor erstellst, oder ein CMS verwendest - das ist die eine Frage.
Ob du Tabellen zum Layouten missbrauchst, oder es vernünftig machst - das ist die andere.

Weder HTML noch CSS werden „programmiert”.

Und solche Editoren haben so gut wie immer Probleme, wirklich sinnvollen Code zu produzieren. Das hat sich zwar teilweise in den letzten Jahres etwas gebessert - aber generell gibt es keine Maschine, die einem die Aufgabe, wirklich guten HTML- und CSS-Code zu verfassen, abnehmen kann - so weit ist die KI noch nicht.

Dann mach’ das. Und nenne es nicht „Herumprobieren”, sondern „Lernen”.
Fange mit dem Lernen bei HTML an, wenn dir noch nicht klar ist, wie man Inhalte strukturell sinnvoll auszeichnet. (Bei jemandem, der bisher Tabellenlayouts gemacht hat, ist das zumindest zu vermuten.)

Und überlege anschliessend (gemeinsam mit den Verantwortlichen), ob man die Erstellung der eigene Firmenhomepage wirklich jemandem überlassen will, der sich noch in seiner Lernphase befindet - oder ob man das nicht doch lieber einen Profi machen lässt.

Nach meiner Erfahrung kommt auch bei vielen ‘Profis’ (die das
beruflich machen, Geld dafür bekommen) oft grober Unfug bei
heraus, der nicht richtig funktioniert, vielleicht auch weil die
zuviel oder zumindest die falschen Dinge gelernt haben ;o)

Insofern kommt es sich auf die richtige Auswahl an - also
entweder der Profis, die das richtige gelernt haben und sinnvoll
umsetzen können oder auch was man selber lernen sollte, um
etwas sinnvoll umzusetzen ;o)

Und wenn es eben die Tanke um die Ecke ist, die eine eigene
internet-Seite zu brauchen meint, ist es ja vielleicht auch gar nicht
angemessen, da viel Geld in ‘Profis’ zu investieren, weil da
ohnehin nicht so viele Leute auf die Seite gucken, jedenfalls
weniger als direkt vorbeikommen ;o)

Hallo zusammen,

ich glaube ich habe mich teilweise etwas “unglücklich” ausgedrückt. :wink:

[quote]Weder HTML noch CSS werden „programmiert”.

Und solche Editoren haben so gut wie immer Probleme, wirklich sinnvollen Code zu produzieren. Das hat sich zwar teilweise in den letzten Jahres etwas gebessert - aber generell gibt es keine Maschine, die einem die Aufgabe, wirklich guten HTML- und CSS-Code zu verfassen, abnehmen kann - so weit ist die KI noch nicht.[/quote]

Ja ich weiß schon das weder HTML noch CSS “programmiert” werden, da es ja eine “Sprache” ist zumindest für den WEB-Browser. Ich nenne es einfach mal Programmiersprache ist vermutlich auch nicht ganz richtig aber ihr wisst ja was gemeint ist. :smiley:

[quote]Dann mach’ das. Und nenne es nicht „Herumprobieren”, sondern „Lernen”.
Fange mit dem Lernen bei HTML an, wenn dir noch nicht klar ist, wie man Inhalte strukturell sinnvoll auszeichnet. (Bei jemandem, der bisher Tabellenlayouts gemacht hat, ist das zumindest zu vermuten.)

Und überlege anschliessend (gemeinsam mit den Verantwortlichen), ob man die Erstellung der eigene Firmenhomepage wirklich jemandem überlassen will, der sich noch in seiner Lernphase befindet - oder ob man das nicht doch lieber einen Profi machen lässt.[/quote]

Ja in der “Lernphase” bin ich natürlich noch. Man kann ja nicht alles sofort. Ich behaupte jetzt einfach mal von mir das ich HTML schon recht gut hinbekomme nur CSS da hatte ich bisher eher weniger mit zu tun. Da wir sonst immer mit einem Offline-CMS die Homepage erstellt hatten, welches tatsächlich teilweise Tabelle-Layouts benutzt hat war es immer ziemlich einfach. Zumal “fast” jeder Web-Browser das dann fehlerfrei dargestellt hatte. Das WYSIWYG-Editoren teilweise mal “etwas komischen” Code produzieren ist mir natürlich auch schon aufgefallen :smiley:

In Bezug auf Profi war das schonmal eine Überlegung aber wie schon richtig gesagt worden ist viele sogenannte “Profis” machen teilweise auch nur “Mist”. Und für irgendetwas muß ich ja auch in der Firma gut sein :smiley:

Vielen Dank erst einmal für eure Meinungen und die Beteiligung an diesem Thread. Wie würdet ihr denn eine Firmenhomepage “coden”? Eher per CMS oder alles per Hand?

Ich dachte daran per Hand, das Grundlayout mit Tabellen und die Formatierungen teilweise mit CSS. Bitte nicht erschlagen dafür aber besser weiß ich es momentan noch nicht. Wäre das eine Sache die “OK” wäre? Hatte vor die Inhalte der Homepage zu includen. Gute Lösung oder eher schlechte Lösung? Was kann im schlimmsten Fall passieren?

[quote=„ChaosRacer“]Ich behaupte jetzt einfach mal von mir das ich HTML schon recht gut hinbekomme […][/quote]ich behaupte mal - frech - das Gegenteil :ps:

Bitte lies dir den Tread und insbesondere

[quote=„hoffmann“]Insofern ist Tabellenlayout+CSS eine ganz böse Mischung, die
sicher gar nicht stabil ist. Da Tabellenlayout inhaltlich unsinnig
ist, bleiben einem also nur die Alternativen, es bei dem zu
belassen, was die browser von sich aus für eine Darstellung
ohne CSS haben (ist auch nicht schlecht) oder eben CSS etwas
konservativ und effektiv einzusetzen, ohne allzu ausgefeilte
Tricks zu nutzen, die den Kram wieder instabil machen.[/quote]noch mal durch :wink:

[quote]ich behaupte mal - frech - das Gegenteil
[/quote]

Also frech behaupten kann jeder… :ps:

Dann gibt es wohl nur Tabellenlayout OHNE CSS, was aber nicht unbedingt modern und Standard ist (allerdings recht einfach da auch mit WYSIWYG zu erstellen), zu nutzen oder ein reines CSS-Layout. Ok mal schauen was ich mit meinem „gefährlichem Halbwissen“ so hinbekomme :wink:

Kurze Frage nebenbei: Wenn Tabellen und CSS eine gefährliche Mischung ist, warum wird das dann bei einigen CMS-Systemen so erstellt? Warum ist dort teilweise Tabellenstruktur und teilweise CSS?

Doch doch, es gibt eben die semantische Alternative für Puristen.
Man verwendet die (X)HTML-Elemente, wofür sie gedacht sind ;o)
Ist eigentlich ganz einfach.
Schreibt man einen Absatz, verwendet man p, für eine Liste
ul, ol, dl. Hat man tabellarischen Inhalt, verwendet man
Tabellenelemente etc.

(X)HTML hat ein Modell eingebaut, wie Inhalte angezeigt werden.
Da kann allerdings für jeden Betrachter und jedes
Darstellungsprogramm anders aussehen, was ja nicht schlimm
sein muß, im Gegenteil.
Man braucht da weder Tabellen noch CSS für die Darstellung.
Das nackte (X)HTML reicht aus - Tabellenelemente verwendet
man da nur zur Vermittlung komplexer korrelierter Daten.
Die Methode ist die erste, die schon funktioniert hat, bevor es
CSS gab und auch sogar bevor (X)HTML Elemente für Tabellen
hatte ;o)

Wenn man solche Dokumente hinbekommt, fällt es einem auch
relativ leicht, diese dann zusätzlich mittels einer externen
CSS-Datei zu dekorieren.

Warum es CMSe gibt, die (X)HTML mißbrauchen? Offenbar weil
deren Programmierer was von PHP etc verstehen mögen, aber
nicht von (X)HTML. Die mögen ihre Kenntnisse auch als
Designer erlangt haben oder hinsichtlich (X)HTML zumindest
irgendwann um 1997 zum letzten Male aufgefrischt haben.
Und wenn die dann lernresistent sind, produzieren die nach über
zehn Jahren noch immer den gleichen Blödsinn ;o)

Für solche Litfaßsäulendesigner eignen sich Graphikformate
besser - oder office-Formate oder Pixelgraphik. Da können sie
exakt vorgeben, wie hoch und breit ihr Dokument sein soll und
wo jeder Pixel sitzen soll. Eine Darstellung, die sich an die
Möglichkeiten und Gewohnheiten des jeweiligen Betrachters
anpaßt, versetzt Litfaßsäulendesigner in Panik, weil Litfaßsäulen
in ihren Abmessungen genormt sind und sich nicht anpassen.
Für elektronische Formate ist es natürlich dumm, weil man die
Anzeige leicht an den jeweiligen Betrachter anpassen kann,
anders als Litfaßsäulen.

Ist dein Problem nicht dieses, dass du nicht von der Tabelle loskommst, weil du nicht weisst, wie man ein Design ähnlich wie in einer Tabelle strukturieren kann?

Auch mit reinem CSS kann man Tabellen machen - diese sind im Gegensatz zu

, und
für Designs gedacht und werden über den CSS-Wert display:definiert:

display:table; (eine Tabelle, gleich wie <table>) display:table-row; (eine Tabellenreihe, gleich wie <tr>) display:table-cell; (eine Tabellenzelle, gleich wie <td>)

Einfach mal damit befassen, ich hoffe, ich kann dir damit helfen. Eine Erklärung dazu findest du hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Falls diese Variante irgendwie nicht verwendet werden sollte, muss es mir gesagt werden - ich bin kein Profi. Auch treten unter Opera Probleme damit auf (was auf meiner Seite Homepage-SK zu sehen ist. Zusätzlich musste ich für IE den Doctype für HTML 5 verwendet, damit das ganze richtig angezeigt wird.)

MFG

[quote=“homepage-sk”]Auch mit reinem CSS kann man Tabellen machen - diese sind im Gegensatz zu

, und
für Designs gedacht und werden über den CSS-Wert display:definiert:

display:table; (eine Tabelle, gleich wie <table>) display:table-row; (eine Tabellenreihe, gleich wie <tr>) display:table-cell; (eine Tabellenzelle, gleich wie <td>)

Einfach mal damit befassen, ich hoffe, ich kann dir damit helfen. Eine Erklärung dazu findest du hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display[/quote]

Naja sagen wir mal so, per WYSIWYG-Editor ist es nunmal etwas einfacher ein Layout sehr schnell zu erstellen. CSS ist da in meinen Augen noch etwas schwieriger wobei ich aber den Vorteil schon erkannt habe, das ich bei einem CSS-Layout sehr schnell das komplette Design in nur einer Datei verändern kann. Das ist definitiv ein großer Vorteil deswegen habe ich auch ein wenig gegoogelt und ein gutes Tutorial bezüglich eines CSS-Layoutes gefunden.

Learning by doing ist angesagt. :smiley: Trotzdem eine Frage dazu. Ich möchte zwei div-container nebeneinander anzeigen lassen. Das klappt auch wunderbar. Nun möchte ich per Grafik es so erscheinen lassen, als wenn die Ränder abgerundet wären. Problem dabei ist, das ich das wiederum über ein erneutes DIV realisiere. Allerdings schiebt sich dann die rechte Box immer nach unten. Habt ihr einen Tip so aus der Erfahrung heraus?

Code kann ich erst morgen nachreichen, da ich nicht am richtigen Rechner sitze. Habe es ungefähr so aufgebaut:

[code]

blablabla
div id ="bottom_rand_unten">[/code]

Dazu natürlich das, so denke ich passende Stylesheet. Wenn ich top und bottom wegnehme wird alles richtig angezeigt, nur sobald ich top und bottom hinzufüge wird die Sidebar nach unten gedrückt. Veielleicht Ansatzweise eine Vermutung?

Wenn nötig kann ich morgen den Code nachreichen. Danke schonmal für die Tips.

homepage-sk - einen speziellen doctype für ‘HTML5’ gibt es nicht.
In der Tat haben wohl zumindest ältere Versionen des MSIE
Probleme mit Tabellenanzeigeeigenschaften, bzw. die ignorieren
diese - kann wohl auch bei neueren im Quirksmodus passieren.
Daß aber microsoft schon wieder einen neuen Modus erfunden
hätte, wäre mir neu, zumal der im Arbeitsentwurf für 'HTML5’
genannte doctype (der nicht spezifisch für ‘HTML5’ ist) extra
so ausgewählt wurde, daß er nicht erneut solche Schweinereien
wie den Quirksmodus auslöst, ähnlich wie die kompletten
doctypes zu HTML4 und XHTML1.x.

Balmung - da es ja nur um Dekoration mit CSS geht, ist es ja
letztlich egal, wofür man die Eigenschaften verwendet.
Natürlich, wenn man XML schreibt und eine Präsentation als
Tabelle braucht, gibt es kaum eine andere Möglichkeit als diese
Eigenschaften, wenn der browser für das spezielle XML-Format
nicht eine eigene entsprechende Stilvorlage hat.
Das heißt ja aber nicht, daß man das nicht auch in (X)HTML zu
rein dekorativen Zwecken verwenden könnte.
Die Art der Darstellung ändert ja nicht die inhaltliche Bedeutung,
wie sie mit (X)HTML angegeben ist, sonst dürfte man ja gar kein
CSS verwenden.
Tabellenanzeigeeigenschaften wurden in früheren Jahren nur eher
selten verwendet, weil MSIE6 das ignoriert hat.

Ich bekomme es nicht hin, das 2 DIV-Boxen inklusive Rahmen nebeneinander stehen. Wenn ich das div mit den Grafiken für den Rahmen einbaue, dann verscheibt sich die linke DIV-Box nach unten obwohl genug Platz an der rechten Seite ist. Hier mal der entsprechende Code:

[code]

<?php include('news.php'); ?>
[/code]

Hier die entsprechende CSS:

#container { background:url(images/schatten_main_760.gif) repeat-y left; text-align:left; width:710px; } #top { background:url(images/schatten_top_760.gif) no-repeat left; height:20px; width:710px; float:left; } #bottom { background:url(images/schatten_bottom_760.gif) no-repeat left; height:20px; width:710px; float:left; }

Kann mir da jemand einen Tip oder Rat geben was ich da genau falsch mache bzw. warum die rechte Seite nach unten rutscht sobald ich die DIV-Boxen mit den Rändern einfüge? Browser ist egal der Fehler tritt im IE und im Firefox auf also vermute ich mal irgendwo einen allgemeinen Fehler. Kann mir da jemand helfen?

Online-Beispiele haben den Vorteil, dass man als Leser keine Copy&Paste-Orgien starten muss, um das Problem nachzuvollziehen.

Hier mal ein Online-Beispiel. Die obere Navigation sieht noch ein wenig “zerschossen” aus liegt aber daran das ich nach und nach versuche das ganze in den Griff zu bekommen.

http://www.test.mocom-voerde.de/main/

Es geht um den Content-Bereich und die Sidebar. Wie gesagt ohne die Ränder sind die beiden DIV nebeneinander, nur wenn ich die Ränder da habe dann rutscht die Sidebar nach unten.

[quote=“hoffmann”]homepage-sk - einen speziellen doctype für ‘HTML5’ gibt es nicht.
[/quote]

Wie gesagt bin ich kein Profi, also entschuldigt mcih dafür, wenn ich Fehler mache. Allerdings möchte ich trotzdem noch fragen, was denn mit dem folgenden Code ist, der in vielen Quellen als HTML5 Doctype bezeichnet wird? :sunglasses: ;

MFG

Das liegt daran, dass du die „runden Ecken” ebenfalls gefloatet hast.
Positionierung statt float würde sich dafür eher anbieten.

[quote=“homepage-sk”]Wie gesagt bin ich kein Profi, also entschuldigt mcih dafür, wenn ich Fehler mache. Allerdings möchte ich trotzdem noch fragen, was denn mit dem folgenden Code ist, der in vielen Quellen als HTML5 Doctype bezeichnet wird? :cool: ;

Dieser Doctype macht keinerlei Angabe zur verwendeten HTML-Version. (Und das ist blöd.)

Er wurde gewählt, weil man herausgefunden hat, dass er aktuell auf dem Markt befindliche Browser nicht in den Quirksmode schickt - was mit einer „neuen” vollständigen Doctype-Angabe für HTML5 aber passiert wäre.

homepage-sk - das sagt im Wesentlichen aus, daß das
Hauptelement (root) ‘html’ heißt, mehr auch nicht. Das kann
man unter anderem auch so in jedes XML-Dokument schreiben,
solange eben nur das Hauptelement ‘html’ genannt wird.
Kurzum, das gibt nicht einmal eine Auskunft darüber, ob es sich
bei dem Dokument überhaupt um (X)HTML handelt.

Das muß dann anhand der Angabe des servers entschieden
werden, also die Zugehörigkeit zu HTML oder XHTML, oder
ansonsten, bei einem lokalen Dokument geraten werden, was
das sein könnte. Das ist ein generelles Problem bei neueren
Formaten ohne DTD. Ein Format wie SVG tiny 1.2 hat auch
keine DTD, aber man muß immerhin noch den Namensraum
angeben und die Version und das Profil kann man auch angeben.
Nur bei der XHTML-Variante von ‘HTML5’ kann man überhaupt
den Namensraum angeben, aber nicht die Version.

Warum das derzeit so ist, ist auch teilweise verständlich, wenn
man der Diskussion im email-Archiv der Arbeitsgruppe verfolgt,
denn microsoft wollte die Versionsangabe für einen weiteren
Quirksmodus nutzen. Daß microsoft nicht verstanden hat, daß
eine Angabe zum Format oder der Version nichts damit zu tun
hat, wie gut oder schlecht ihr browser ist, sondern Auskunft
darüber gibt, in welcher Sprachvariante das konkrete Dokument
abgefaßt ist, ergibt dann natürlich ein übles Problem, was
noch schlimmer ist, weil da einige Leute in der Arbeitsgruppe
in Allmachts- und Allwissenheitsphantasien schwelgen, die sie
glauben machen, daß es nie wieder rückwärtsinkompatible
Fortschritte in HTML geben wird, so daß eine Versionsangabe
überflüssig sei (wobei HTML5 selbst schon rückwärtsinkompatibel
zu HTML4 ist). Ferner führen diese Phantasien dazu, daß sie
glauben, daß sowieso alles irgendwie HTML5 sei, so daß es gar
keine Mehrdeutigkeiten geben könne und man es auch gar nicht
nötig hat, HTML5-Dokument als solche zu kennzeichnen, weil man
sowieso alle Dokumente durch den geplanten
Markierungssuppen-parser laufen lassen will und es ohnehin
ziemlich egal ist, wie die Autoren ihre Dokumente inhaltlich
gemeint haben, entscheidend ist allein die Existenz einer Regel,
wie jedes bit eines Dokumentes vom Suppen-parser zu
interpretieren ist - und wenn sich die Regel ändert oder erst
entsteht, nachdem der Autor sein Dokument schon seit Jahren
fertiggeschrieben hat, ist das ja allenfalls das Problem des
Autors, nicht aber das der Arbeitsgruppe ;o)

wenn es so wie hier aussehen soll(bin mir nocht ganz sicher):
die float-eigenschaft bei #top, #content & #bottom entfernen
dafür den ganzen #container links floaten lassen.

ps: ich empfehle dir das firefox addon firebug, mit diesem lassen sich solche dinge live im browser verändern.