WebStyleBoard

Also erstmal ein herzliches Willkommen nachträglich an Bord, habe Dich noch garnicht registriert gehabt (Achja das machen die User ja auch selbst *hehe*, man war der Witz schlecht)

Also nun zu Deiner Seite:

Testsystem:
Hardware:
AMD Athlon 1200 Mhz
32 MB-Grafikkarte
TFT-Monitor

Software:
IE 5.5
Win 2000
Auflösung: 1024x768
Flash- und Java-Plugin

Design:
Wirklich sehr gelungen, schön gradlinig und das Corporite Design stimmt auch, wirklich top, nix dran auszusetzen. Einzigtes: Die Linkschrift, ist das Times New Roman?? Da solltest Du eine non-serife-Schrift nehmen.

Content / Funktionen:
Tja die Links funzen ale, aber Inhalt ist ja noch nicht da, deswegen werde ich dieses mal aus der Wertung rauslassen, da ich denke, dass Du erstmal das Design bewertet haben willst.


Ladezeit:
1A ging wirklich schnell, im webmasterplan-Test erhieltest Du folgende Note: 1

Quelltext:
Deinen QT solltest Du nochmal anschauen, er ist nicht valide, das solltest Du ändern.


Bewertung:

Design 1
Content / Funktionen -
Ladezeit 1
Quelltext -

Fazit:

Eine wirklich gelungene Seite, schlichtes aber schickes Design. Habe sie gleich erstmal gebookmarkt. Wirklich nett, haste schön umgesetzt.

Zitat

Seine Angaben: Schlicht und grau soll sie sein. Also bitte nicht das Grau kritisieren

Leere Blicke folgen gedankenlos dem Weg der Masse - leblos, farblos, grau
wage den Sprung auf deinen eigenen Weg - nicht farblos, bunt

OK, das grau darf ich also nicht kritisieren obwohl es das ist was mich am meißten stört. Irgendwie fehlt die Kontrastfarbe zum Grau - etwas knalliges. Nunja, war ja Kundenwunsch.

Dieses Titelbild "Christoph Hitsch" gefällt mir überhaupt nicht. Es passt gar nicht zum restlichen flach gehalteten Layout und müsste wie ich finde eine andere Schrift und keinen Reflief-Effeckt bekommen. Vielleicht stattdessen ein kleines Logo mit Text.

Naja, sonst sind für die eigentlich Bilder, die dein Design wohl ausmachen sollen, nur komische Platzhalter eingesetzt deswegen kann ich leider nicht viel zu sagen.

Mach mal ein wenig Content mit vernüftigen Bildern rein und dann sehen wir weiter.

Quelltext überprüfung überlasse ich selbstverständlich Mirko alias Memowe.

Tobias

@Jon

LeftMargin und TopMargin sind meines Wissens netscapespezifische Angaben. Daher die Fehlermeldung in einem Validator.

Der IE "übergeht" diese einfach.

Eleganter wäre es, alle Attribute des Bodys wie Ränder, Hintergrundfarbe oder Schriftfarbe in einer CSS-Klasse zu definieren.

Zum Design: Schlicht und übersichtlich. Über das Grau kann man natürlich streiten, aber Kundenwunsch ist Kundenwunsch...

(Mein Chef pflegt zu sagen: Wenn der Kunde es wünscht stecke ich mir beim Setzen (im Sinne des DTPs) eine weiße Feder in den Hintern, wenn er's bezahlt!)

Die Bernhard Fashion (Schrift oben links) für Bildschirmgestaltung zu verwenden ist immer eine heikle Angelegenheit. Ich denke um einen plastischen Effekt wirst Du alleine aus Gründen der Lesbarkeit nicht herum gekommen sein. Aber im großen und ganzen passt's eigentlich ganz gut.

Ich denke mit dem richtigen Inhalt lässt sich die Seite besser beurteilen, vor allem weil mit den Farben der Orginalbilder eventuell schöne Kontrastspielereien mit den Grautönen möglich sind. Ich denke da z.B. an Duplex-Versionen der Bilder, die dann bei Rollover farbig werden könnten.

Aber mit dererlei Spielerei ist natürlich mit Bedacht umzugehen. Sie lassen die Seite oft schnell überladen wirken...

LapisInfernalis

Zitat

LeftMargin und TopMargin sind meines Wissens netscapespezifische Angaben. Daher die Fehlermeldung in einem Validator.

Der IE "übergeht" diese einfach.

Nein. IE versteht diese Attribute. Aber diese Attribute gehören nicht zum HTML Befehls Umfang.

[edit]Was für Befehle *pfeif*
PS: Danke Mirko [/edit]

Zitat

Ich denke mit dem richtigen Inhalt lässt sich die Seite besser beurteilen, vor allem weil mit den Farben der Orginalbilder eventuell schöne Kontrastspielereien mit den Grautönen möglich sind. Ich denke da z.B. an Duplex-Versionen der Bilder, die dann bei Rollover farbig werden könnten.

Würde nicht wirklich zum Design passen, etwas kräftig farbendes, aber vielleicht mit hellblauem Layer überzogen. Also erst schwarz/weiß und dann leicht bläulich.

Aber wie schon gesagt: Es zählt was der Kunde will!

Bevor ich hier was zur Seite sage, muss ich IMHO erstmal einiges geradebiegen.

Zitat

Original von Jon
Die Warnungen im Quelltext versteh ich allerdings nicht.

Vergiss den Checker von Webmasterplan. Das einzige, was für grundsätzliche Richtigkeit des Codes zählt, ist ein Validator, der Deinen Quelltext gegen die in der Doctype-Deklaration angegebene Doctype-Definition prüft. Ich verwende einklich nur das Original: validator.w3.org.

Zitat

Sind leftmargin, topmargin, ... nicht Standard-HTML Befehle?

Uh. Nein, natürlich nicht. Erstens gibt es in HTML garkeine Befehle, sondern bestenfalls Elemente und Attribute, wobei erstere zumeist zwei sog. Tags haben, die Anfangstextmarke und die Endtextmarke. Daher auch Markup Language. Zweitens gibt es weder Elemente noch Attribute in HTML, die so lauten. Und drittens wäre das auch Unsinn. HTML ist eine Textauszeichnungssprache, in der man logisch Text strukturieren, "auszeichnen" kann und keine Layoutsprache. Präsentation von Webseiten macht man mit CSS. Diese Trennung ist nach Möglichkeit sehr strikt zu vollziehen, was saubere Quelltexte, klares Denken und Geschwindigkeitsvorteile ermöglicht. Lies dazu als Einstieg www.memowe.de/webauthoring/markup/.

Zitat

Zitat

Dieses Titelbild "Christoph Hitsch" gefällt mir überhaupt nicht.

Das ist ja auch ne komische Geschichte. Ich hab das nur mal so ganz schnell gemacht. Ohne drüber nachzudenken, sollte eigentlich ein Platzhalter fürs Logo werden. Aber als der Kunde das dann sah, meinte er, nein, das darf nicht mehr raus. Es gefällt ihm total und will es unbedingt haben. Aber ich werd am Mittwoch auch nochmal mit ihm darüber reden.

So ist das halt. Mache Kunden, die noch nicht viel mit Webgrafik oder generell im Web gemacht haben, finden es umso besser, je mehr alles bunt ist und blinkt und tutet. Wenn man mit rationalen Argumenten (CI ist zu wahren, Geschwindigkeitsnachteile, genervte Surfer, verschlechterte Zugänglichkeit, ...) nicht mehr weiterkommt, dann bekommt er halt, was er will -- und einen kleinen geheimen Schmerzensgeldaufschlag. Ob wir die Seite dann in die Referenzen aufnehmen, ist ja uns überlassen.

Zitat

Original von LapisInfernalis
LeftMargin und TopMargin sind meines Wissens netscapespezifische Angaben. Daher die Fehlermeldung in einem Validator.

Egal was sie sind: sie kommen nicht in den HTML-Standards vor und damit sind sie Fehler.

Zitat

Eleganter wäre es, alle Attribute des Bodys wie Ränder, Hintergrundfarbe oder Schriftfarbe in einer CSS-Klasse zu definieren.

Präsentation vom Markup zu trennen ist natürlich ein sehr elegantes und schon seit 1998 zeitgemäßes Konzept. Das schrieb ich ja schon oben. Und CSS ist ja auch gut. Aber das mit der Klasse ist Quark. Was gefällt Dir besser?

oder

Ersteres ist nicht nur umständlich, sondern auch Quatsch. Body: "Es kann nur einen geben"[tm].

Zitat

Original von Nash.Bridges

Zitat

LeftMargin und TopMargin sind meines Wissens netscapespezifische Angaben. Daher die Fehlermeldung in einem Validator.

Der IE "übergeht" diese einfach.

Nein. IE versteht diese Befehle. Aber die Befehle gehören nicht zum HTML Befehls Umfang.

Argh -- es gibt in HTML keine Befehle! Und in CSS auch nicht! Lernt doch beizeiten mal ein kleines bisschen HTML/CSS-Vokabular.

HTML: Element, Attribut (-wert), Anfangstag, Endtag
CSS: Regel (-satz), Selektor, Deklaration, Eigenschaft, Wert

Mehr findet Ihr vielleicht bei den Webauthoring-Lernen-Links.

Mirko

PS: zur Seite folgt auch noch was

Zur besseren Übersicht in zwei Beiträgen...

Zitat

Original von Jon
Ich hab für einen Kunden eine Gallerie gebastelt.

Achtung! In Deutschland wird das mit einem "l" geschrieben. Auch auf Webseiten.

Zitat

Seine Angaben: Schlicht und grau soll sie sein.

Ich denke, das ist Dir gelungen.

Zitat

Also bitte nicht das Grau kritisieren :)

Also, weißt Du, ich will ja nichts sagen und wenn Du da jetzt voll lange dran gebrütet hast, ist es ja auch OK, will Dich ja schließlich nicht entmutigen, vielleicht aber hilft es ja auch weiter, aber man weiß ja nie, jedenfalls, ich finde, auch wenn es jetzt vielleicht ein bisschen zu direkt rüberkommt, dass das grau ein bisschen zu dunkel ist, also nicht unbedingt helligkeitsmäßig, sondern eher so latent bösartig, ein freundlicheres Grau, aber das soll jetzt wirklich kein Angriff sein, könnte ja genau so aussehen, es ist nicht der technische Farbton, man sieht vielmehr an der Aura der Seite, dass Du beim Eingeben des Grautons kurzzeitig, also, das ist jetzt echt unterstützend gemeint, nicht dass Du denkst, ich wolle Deine Arbeit schlecht machen, Du, aber man sieht, wenn man ein bisschen in die Seite fühlt, dass Du beim Eingeben des Grautons einen kurzen Moment, und verstehe mich bitte nicht falsch, einen kurzen Moment jedenfalls an etwas böses gedacht hast. Da musst Du unbedingt nochmal dran und etwas Licht in die Seite schicken, Du. Möchte noch jemand Bachblütentee?
:D

Zitat

http://www.jonspage.de/gallery
Ein wenig konstriktive Kritik ist erwünscht ...

Dann will ich mal.

Wenn ich nach "ARESOL" ginge, müsste ich jetzt alle Architektur- und Hardwaredetails meiner Maschine aufzählen, aber ich beschränke die Angabe, mit was ich die Rezeption Deiner Webseite genoss, mal darauf, mitzuteilen, dass ich Mozilla 1.3 auf Linux ohne JavaScript in einem nicht-maximierten Fenster (wäre auch Quark bei meinen 1600px*1200px) verwendet habe.

Der erste optische Eindruck ist bei mir bei so schlichten Seiten schonmal generell positiv. Und trotzdem sind mir auf Anhieb zwei, drei Kritikpunkte bzw. Verbesserungsvorschläge eingefallen, die ich Dir nicht vorenthalten kann:

• Es wurde oben schon erwähnt, aber das muss jetzt sein: das Logo "Christoph Hitsch; Studio (R)evolution" passt überhaupt nicht zu der Seite. Die angenehme flächige Grau-Optik erfordert IMO an der Stelle ein ebenso flächiges Logo, das sich vielleicht optisch in die grauen Streifen des Contents einmischt. Ich denke da an eine sehr fettgesetzte serifenlose Schrift, das muss überhaupt nichts kompliziertes sein. Ich denke sogar, dass ein Schlagschatten deplatziert wäre. Alles, was auch nur ein Hauch in Richtung 3D spielt, hebt sich unangenehm hervor und passt nicht. Die Pseudo-3D-Schrift im jetzigen Logo ist (auch wenn der Kunde sie will) nicht nur absolut am Layout der Seite vorbei, sondern auch noch nicht gerade gut lesbar (resp. schnell erfassbar)
  
  
• Die Navigation passt überhaupt nicht. Die Farbe schwarz wäre ja OK, besonders unter dem Aspekt der Lesbarkeit, aber bei mir ist die Navigation nur eine Zeile winziger Serifenbuchstaben und daher nur sehr schlecht lesbar.
  Auf UNIXen sind relative Schriftgrößen wie Du sie verwendet hast aufgrund der höheren dpi am Blindschirm (96 vs. 72) noch kleiner als unter WinDOSen. Und dadurch, dass Du sie in der kleinsten relativen Größe, die mit dem FONT-Element (auf das ich noch zu sprechen kommen werde) machbar ist, verwendest, strafst Du genau die ab, die ihren Browser bedienen können:
  Das Killerargument, das häufig für kleine Schrift angeführt wird, ist, dass diese besser aussehe als größere. Wenn jetzt aber jemand, der auf die Seite surft, das genau so sieht und dementsprechend in seinem grafischen Browser den Schriftgrad nach unten korrigiert hat, dann ist die Schrift für ihn unlesbar. Bei mir ist die Navigation schon bei 100% eine Pixelsuppe, bei 90% schon ist sie ein nicht zu entziffernder Brei.
  Wenn Du also meinst, dass eine bestimmte Schriftgröße gut aussehe und sicherstellen kannst, dass sie lesbar ist, dann gib sie an, und zwar in Pixeln (und nicht in Punkten) absolut im Gegensatz zu relativ.
  
  Sowas wird mit CSS gemacht, worauf ich noch zu sprechen kommen werde.
  
  
• Die Leiste mit den Bildern auf der Startseite verwirrt. Man kann überhaupt nichts anklicken, obwohl die Leiste dafür sorgt, dass ich schon bei normalgroßer Fensterbreite einen gehörigen Rollbalken habe. Und das, obwohl da überhaupt keine Inhalte mehr sind! Zudem kommt noch, dass links und rechts ein verschwenderischer Platz ist. Du solltest nicht davon ausgehen, dass alle Surfer, die auf die Seite gehen, ein Browserfenster benutzen, das exakt so groß/klein ist wie Deines. Wenn ich das Fenster maximiere, sind die Bilder am linken Rand recht einsam und irgendwo unten wiederholt sich die graue Leiste. Wenn Du das nur zur Dekoration eingefügt hast, binde die Bilder als Hintergrundbild von irgendetwas ein. Mit CSS geht das ja recht flexibel, dann erzeugt das nämlich auch keine Rollbalken für nichts und wieder nichts.

Mehr Kritik habe ich für die Startseite nicht zu bieten. Ich gehe mal weiter.

Bei den News ist ja nicht viel zu sehen. Die Idee mit dem Bild und den verschiedengrauen Flächen ist optisch ganz OK, allerdings erfordert die ganze Konstruktion wieder eine unnötig hohe Fensterbreite. Der Text der News ist zu weit unten. Bei kleinen Bildschirmen/Fenstern unnötig weit und natürlich ist das dann auch wieder ein Scrollzwang. Ich persönlich finde, dass Du auf den Textseiten die wichtigen Inhalte (den Text!) mehr in den Vordergrund stellen solltest. Die Texte bei den News werden ja vermutlich noch geändert, oder?

Der Text ist auf allen Textseiten nicht wirklich schön. Zu der Optik passt IMO besser eine serifenlose Schriftart, die dann in der kleinen Größe (siehe oben!) auch besser lesbar wäre.

Bei der Galerie ist mir erst sehr spät aufgefallen, dass da noch mehr Fotos sind als auf der ersten Seite zu sehen sind. Du solltest Hyperlinks im Fließtext immer mit Unterstrich auszeichnen, damit man sie auch erkennt. Wenn man mit der Maus darüber schwebt, ist es schon zu spät, mit einer Unterstreichung darauf aufmerksam zu machen. Dann hat man den Link schon erkannt. Das muss IMO unbedingt sein. Sehr wichtig.

Auch bei der Newsseite ist mir wieder aufgefallen, dass sie sehr breit wird, dadurch, dass Du Auswahl und die Fotos ausgerechnet nebeneinander anordnen musst. Das raubt Platz und zwingt bei kleinen Bildschirmen/Fenstern zum Scrollen.

Etwas unbekömmlich erscheint mir bei den verschiedenen Unterseiten des Projekts die Inkonsistenz bei der Auswahl des Platzes für den Fließtext. Bei den News und bei der Galerie ist der wichtige Inhalt noch links, bei "clients" ist der Inhalt auf einmal rechts. Bei der "biography" ist alles durcheinander und beim "contact" rutscht der Text sogar noch weiter nach rechts, aus dem Blickfeld. Das ist inkonsequent und ein Usabilitymangel. Wer will schon auf Webseiten ständig suchen (womöglich noch mit Rollbalken?), wo denn der wichtige Inhalt ist?

Bei der "clients"-Seite sind die schwarzen "ununterstrichenen" Textbrocken ausnahmsweise mal keine Links. Stattdessen wird hier versucht, mit Minuszeichen eine Liste zu simulieren. Für Listen gibt es in HTML aber eigene Elemente, in Deinem Fall (ungeordnete Liste) UL. Nutze das statt Pseudolisten. Lies dazu auch www.memowe.de/webauthoring/markup/#beispiele -- ganz unten, Pseudolisten.
Wo wir gerade von Listen schreiben: auf der "biography"-Seite wäre eine "Definition List" (HTML-Elemente DL, DT, DD) das Markup der Wahl.

Ansonsten bieten die Seiten "clients" bis "contact" nichts erwähnenswertes.

Dann werde ich jetzt mal exemplarisch für alle Seiten den Quelltext der "biography"-Seiten zerpflücken. Ich hoffe, dass Dich das nicht abschreckt, was mir manchmal vorgehalten wird...

• Es fehlt ein Character Encoding. Wie man das angibt, kannst Du dort nachlesen: http://www.w3.org/TR/html4/charset.html#spec-char-encoding.
  
  
• Wenn man das Character Encoding angibt (ich habe freundlicherweise mal iso-8859-1 gewählt), findet der Validator immerhin 12 Fehler (auf die ich im Folgenden eingehe), und das bei der ohnehin sehr toleranten Transitional-DTD: http://validator.w3.org/check?uri=http%3…stern+Europe%29
  
  
• Die erste Fehlermeldung erklärt sich ja selbst. Die berüchtigten *margin*-Attribute, die Du im BODY-Element verwendest, gibt es garnicht. Das macht man mit CSS wesentlich eleganter. Überhaupt solltest Du Dein CSS auslagern, damit es nicht mit jeder Seite neu zum Browser geschickt werden muss: http://www.jendryschik.de/wsdev/einfuehr…einbindung.html
  Und wie geht das dann mit dem margin? Mit folgernder CSS-Regel:
  

  	Quellcode
  1 2 3 4	body { margin: 0; padding: 0; }

  
  Den Innenabstand (padding) gibt man an, damit auch Browser wie etwa Opera, bei denen im Browserstylesheet ein padding für BODY vorgegeben ist, berücksichtigt werden.
  
  
• Dass das TABLE-Element kein height-Attribut kennt, bedarf keiner Erklärung. An dieser Stelle sei grundsätzlich angemerkt, dass TABLE-Elemente nicht für Layoutzwecke konzipiert sind und genau gesehen bei Dir fehl am Platze sind. Tabellen sind zur Darstellung tabellarischer Daten da. Es gibt zwar noch Ausnahmefälle, wo man um simple Layoutabellen nicht herumkommt, aber die sind recht selten und bei Dir sehe ich sie nicht. Man kann mit CSS schon verdammt viel machen, auch ohne wilde Verunstaltungen des HTML-Codes mit Layouttabellen oder DIV-Suppen.
  Fehler Nr. 9 dito. Die CSS-Eigenschaften background-* sind Deine neuen Freunde.
  
  
• Warum man alternative Texte (Fehler 8) für Grafiken verwenden soll und wie sie missbraucht werden können, haben andere besser geschrieben, als ich könnte. Darum lasse ich an dieser Stelle Björn Höhrmann zu Wort kommen: http://www.bjoernsworld.de/html/alt-text.html
  
  
• Der Fehler 10 ist trivial und die Fehler in Zeile 94 sind Resultate lahcsf gesetzter Quotes.
  
  
• Dein CSS hingegen scheint größtenteils valide, aber auch dazu muss ich ein Wort verlieren. Erstmal gehört ein Stylesheet extern verlinkt mit dem LINK-Element um Traffic zu sparen (auf beiden Seiten), aber das schrieb ich schon. Und zweitens solltest Du nicht die Farbe der Rollbalken für IE-User verändern. Denn das ist ein tiefer Eingriff ins Userinterface und liegt nicht im Aufgabenbereich von Webseiten. Denn Rollbalken haben in der Regel die Farbe, die der User sich eingestellt hat. Wenn man sie verändert, läuft man Gefahr, dass unbedarfte Surfer die Rollbalken womöglich garnicht finden. Ich habe das live miterlebt. Und außerdem sind das garkeine CSS-Eigenschaften, sondern nur proprietäres Microsoft-Eigengebrötele.
  
  
• Das hier sehe ich als bedenklich an, wobei man da auch mal Investi zu hören könnte:
  

  	Quellcode
  1	<meta name="Copyright" content="Jon">

  Soviel ich weiß gibt man normalerweise bei einem solchen Projekt die Rechte an den Auftraggeber ab.
  
  
• Hier bitte ich, die Rechtschreibfehler zu entfernen. Wenn schon, denn schon:
  

  	Quellcode
  1 2 3 4 5 6	<meta name="Keywords" content="Gallery, Gallerie, Onlinegallery, photogallery, fotogallery, photogalerie, fotogallerie, fotostudio, photostudio, stuio, revolution, evolution, portrai, portrais, bild, bilder"> <meta name="Description" content="Photogallerie"> <meta name="Page-topic" content="Gallerie">

  
  
  
• Das kann man sich echt sparen. Dafür ist mir mrin Traffic zu schade. Wenn Du für ein bestimmtes META-Element keinen sinnvollen Inhalt hast, dann lass es weg:
  

  	Quellcode
  1	<meta name="Audience" content="Alle">

  
  
  
• Dieses hier möchte ich zumindest in Frage stellen:
  

  	Quellcode
  1	<meta name="Content-language" content="DE">

  
  Auf der Seite wird verdammt viel Denglisch wenn nicht sogar Englisch geschrieben (Navigation!). Du solltest Dich für eine Sprache entscheiden.
  
  
• Ein schönes Beispiel für presentational HTML:
  

  	Quellcode
  1 2 3 4 5 6	<body bgcolor="#999999" text="#000000" bgcolor="#999999" background="images/bg.gif" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <table width="992" border="0" cellspacing="0" cellpadding="0" height="580"> <tr height="120"> <td align="left" valign="top" bgcolor="#999999" width="410" height="120">

  
  All diese schönen bunten Eigenschaften solltest Du in ein Stylesheet auslagern, am besten so intelligent, dass am Ende die zuständigen CSS-Regeln noch eine Ecke kürzer sind, was nicht allzu schwer sein sollte.
  
  
• Usability-Crash in Reinkultur:
  

  	Quellcode
  1	<font face="Verdana" size="1">

  
  Und das für eine Navigation, die per Definition am zugänglichsten sein muss!!! Warum size="1" so problematisch ist, schrieb ich schon oben. Und solche FONT-Elemente erklären auch, warum die Schrift bei mir mit Serifen gerendert wird. Du hast nicht bedacht, dass längst nicht auf jedem Rechner die Schriftart Verdana zur Verfügung steht. Bei mir zum Beispiel nicht. Sowas löst man elegant mit einer einzigen CSS-Regel für alle Seiten mit der Angabe von präferierter Schriftart und generischer Schriftfamilie:
  

  	Quellcode
  1 2 3	body { font-family: Verdana, Helvetica, sans-serif; }

  
  
  
• Wie so kann man eigentlich den Punkt in der Navigation, bei dem man gerade ist, noch anklicken? Vermeide rekursive Links.
  
  
• Auf Deinen Seiten fehlen Überschriften. Verwendung von H1 dürfte ausreichen, H2 und weitere brauchst Du nicht. Die sind nicht nur für Suchmaschinen, sondern auch für andere UAs, die die logische Struktur von der Webseite erfassen wollen, nötig. Allein schon für Websurfer, die sehen wollen, wo sie gerade sind. Natürlich kannst Du die Optik von H* per CSS beliebig umstylen.

Damit habe ich mit das wichtigste zuletzt genannt: die logische Struktur der Webseite, die an vielen Ecken und Enden noch fehlt. Man sieht nicht, auf welcher Seite man ist, der Fließtext ist mal links, mal rechts, mal fett, mal normal, die Navigation zeigt einem nicht, wo man ist und kommt auch noch sehr klein daher. Wenn Du das verbesserst, wird die Seite eine ganze Ecke besser.

Ich hoffe, es war was dabei, das Dir geholfen hat und wünsche viel Erfolg. Bitte halte uns über Aktualisierungen auf dem Laufenden.

Schönen Abend. :)
Mirko

PS:[q=memowe]zur Seite folgt auch noch was :D[/q][x] done

siehst du hier:

http://www.css4you.pehlgrim.de/wslayout1/index.php

Zitat

Original von Jon
, nachdem ich das gelesen hatte war ich depremiert und ging ins Bett *fg*

Das war nicht meine Absicht. Ich hatte gehofft, auch Lösungsmöglichkeiten angeboten zu haben. Ich hoffe, das entmutigt Dich nicht, weiterzumachen.

Zitat

Aber da ich mir ja die Ratschläge durchs Herz gehen lasse, hab ich gestern versucht, das mal über CSS zu machen, Ich bekomm zwar das Logo, die Toplinks und grauen Streifen wunderbar in die Seite rein, aber dann rechts die Sache mit den andersfärbigen Tabellen, das wird nichts.

Ich weiß jetzt nicht genau, was Du meinst, aber ich werde gerne mit Dir zusammen versuchen, eine Seite, wie Du sie willst, in sauberem HTML+CSS umzusetzen.

Nenne mir einfach mal den URI zu einer Seite bei Dir, wo Du Probleme hast. Bedenke aber bitte dabei meine Kritikpunkte bezüglich darüber, Inhalt nicht wild über die ganze Seite zu verstreuen.

Zitat

Ich hab bisher immer mit Layouttabellen gearbeitet.

Nicht nur Du. Vor anderthalb Jahren war ich auch noch Tabellenpixelschubser.

Zitat

Mit CSS schaff ich das (noch) nicht.

Man kann damit verdammt viel machen und mit der Zeit wird es immer einfacher. Auch die Browserunterstützung nimmt zu.

Zitat

Oder gebt mir einen Link zu so Seiten, damit ich mir mal den Quellcode angucken kann.

Vielleicht interessieren Dich verschiedene Layouts von www.pro-lingua.com, www.memowe.de/css-clan/, www.atelierpaul.de (von mir, alle nur mit CSS gestyled) oder einige Seiten vom letzten <dciwam/>&<dciwpm/>-Wettbewerb, die auch schön anzusehen sind und IMHO zum Großteil präsentationsfreies Markup verwenden: www.dciwam.de/wettbewerb/2003/ und www.dciwam.de/wettbewerb/2003/ergebnisse/

HTH!
Mirko

Zitat

[i}O-Ton memowe:[/i]
Das hier sehe ich als bedenklich an, wobei man da auch mal Investi zu hören könnte:

Zitat

<meta name="Copyright" content="Jon">

Soviel ich weiß gibt man normalerweise bei einem solchen Projekt die Rechte an den Auftraggeber ab.

mem, ich bin erschüttert! ;-) Eigentlich solltest Du (mem) wissen, dass Urheber nur sein kann, wer ein Werk erstellt hat. Das impliziert, dass das Urheberrecht nicht veräußerbar/übertragbar ist. Allerdings können Nutzungsrechte eingeräumt werden; dies geschieht idR durch den Verkauf des erstellten Codes (usw).


§ 29 Urheberrechtsgesetz (UrhG):

(1) Das Urheberrecht ist nicht übertragbar [...].
(2) Zulässig sind die Einräumung von Nutzungsrechten [...] und Vereinbarungen zu Verwertungsrechten [...].


Die Nutzungsrechte sind in § 31 UrhG geregelt, wobei die an der Lösung zur obigen Fragen nichts ändern; ggf. den § 31 UrhG selbst nachlesen. Links gibt’s im Forum Internetrecht.


Beste Grüße,
Investorman

Exakt das meinte ich. Nutzungsrechte. Sorry für die Ungenauigkeit.
Wie ist es denn, wenn der Webautor nur die Inhalte von der Firma bekommt und sie technisch umsetzt? Dann hat er doch nicht das Urheberrecht, sondern der, der die Texte geschrieben hat, in dem Fall die Firma, oder?

Mirko

Es gibt ja an Webseiten mehrere Urheberrechte. Werden fremde Texte (erlaubtermaßen) verwendet, so behält der Autor an seinem Text das Urheberrecht. Der Seitenersteller erlangt aber zB das Urheberrecht am Design. Werden nun noch Fotos mit eingefügt, so bleiben auch hier die Urheberrecht bei dem Fotografen.

Ergo: Immer schön differenzieren!

Eben! Und daher finde ich eine Pauschal-Copyright-Äußerung wie die oben bedenklich. Zumindest die Texte dürften einklich vom Auftraggeber sein.

Mirko

Hi

Da ich auch leidenschaftlicher Lerner in Sachen HTML & CSS bin lese ich natürlich hier auch viel mit

was mich aber jetzt da vor allen intressiert ...

memo sprach da was, das man tabellen als layout eigentlich lassen sollte zumindest legte er Jon das nahe ?

Wieso denn ? Ist das nicht egal ob ich das jetzt mit versteckten Tabellen mache oder mit CSS ? was macht das für einen Unterschied oder wieso empfiehlst du Jon es gerade mit CSS zu machen ?

-> http://xtase.net/

ist nur ne reine HTML Seite ist meine Bin da noch viel am lernen aber wie man schon im Quelltext sehen kann viele Tables drinnen +g+

a) HTML dient zur logischen Textauszeichnung.
b) Tabellen dienen der Darstellung vieler zusammengehörender Daten (z. B. Statistik) in zweidimensionaler, übersichtlicher Form.
c) Navigation und Inhalt sind zwar viele Daten sind, allerdings in Textform. Hast du beispielsweise jemals eine Tabelle auf ein Blatt gezeichnet, um einen langen Text reinzuschreiben? Würdest du Geschäftsbriefe in Excel erstellen?
Layout sollte ohne Tabellen gehen... mit DIV-Containern. In einen machst du die Navigation rein, platzierst diesen, dann fließt der andere Text drum herum.

Willst du jetzt auf der Page die Navigation in allen Seiten rechts statt links haben, würde memowe folgendes machen: er würde statt margin-left:50px; einfach margin-right:50px; in die CSS-Datei schreiben und diese hochladen. (Gesamtdauer ~20-40 sec.) Und was macht der Tabellenfreak? Auf jeder HTML-Seite die Navigations-Tabellenzelle verschieben (Dauer bei 60 Seiten ein halbe Stunde).

Zitat

Original von hijacker666
memo sprach da was, das man tabellen als layout eigentlich lassen sollte zumindest legte er Jon das nahe ?

Wieso denn ? Ist das nicht egal ob ich das jetzt mit versteckten Tabellen mache oder mit CSS ? was macht das für einen Unterschied oder wieso empfiehlst du Jon es gerade mit CSS zu machen ?

Tabellen werden oft als Layout-Hilfsmittel genutzt, dafür sind sie aber nicht vorgesehen! - Die einzige sinngemäße Verwendung ist die Darstellung tabellarischer Daten.

Wenn man sich den Quelltext deiner Seite http://xtase.net/ anschaut, kommen ernsthafte Zweifel an einer konsequenten Verwendung von HTML und CSS auf. Du verwendest Tabellen um damit Layout-Bereiche unterschiedlich einzufärben - viel passend wäre hier aber die Verwendung von DIV-Bereichen, mit denen du ohne Tabellen das gleiche Ergebnis erzielen kannst.

Beispiele und Anleitungen für tabellenfreies Webdesign findest du z. B. hier:

• http://css.fractatulum.net/sample/layout1format.htm
  
• http://www.rrze.uni-erlangen.de/kurse/html/tablos/div2.html
  
• http://www.css4you.pehlgrim.de/wslayout1/index.php
  

Du könntest einfach zwei DIV-Bereiche mit der Eigenschaft "float:" nebeneinandersetzen, der linke enthält dann die Navigation und der rechte den Inhalt. Für die beiden farbigen Kästen ober- und unterhalb des Inhalts kannst du für den entsprechenden Absatz ( <p>Text</p> ) eine Hintergrundfarbe und einen Rahmen definieren. Das Ergebnis: eine Seite mit äußerst übersichtlichem Quelltext, deren Layout komplett über die CSS-Datei gesteuert wird.

Der Quelltext deiner Seite enthält einige Fehler, es fehlt z. B. die Doctype-Deklaration, was bei einigen Browsern zu argen Problemen führen kann!

Langsam weiche ich hier etwas stark vom Thema dieses Threads ab - wenn du weitere Tips zu deiner Homepage bekommen und deine Seite verbessern willst, eröffne doch einen neuen Thread im Bereich "Holt euch eine Meinung!" und lass deine Seite dort auf Herz und Nieren testen. )

Hallo.

Layouttabellen haben (leider) nur den Nachteil, dass sie konzeptionell nicht gut sind. HTML strukturiert (Überschriften, Listen, Absätze, Tabellen...) und zeichnet logisch aus (betont, hervorgehoben). Layout macht man mit CSS. Das bietet nicht nur den Vorteil von mehr Übersichtlichkeit und wesentlich verbesserter Pflegbarkeit, sondern auch einen Geschwindigkeitsvorteil.

Lies doch einfach mal www.memowe.de/webauthoring/markup/

Mirko