[Web-design]: klein+schnell+schön... Möglich? Wie?

[yankee]

Hi @ll.

Ich will mir (bzw. meiner Stufe) eine I-Net seite basteln. Praktischerweise habe ich schon einen funzenden Linux-Server, der direkt neben meinem steht (=>hat zwar alles drauf (MySQL´, PHP,...), ist allerdings an einer "langsamen" DSL-Verbindung (16kb/s) angebunden und die Verbindung wird ja nicht nur von dem Server, sondern auch von mir, meiner Schwester und meiner Mutter genutzt. Ich rechne zwar nicht mit vielen Anfragen an die Seite, aber trotzdem würde ich unter diesen erschwerten Bedingungen gerne ein Seite mit wenig Bildern und so basteln. Trotzdem soll das dann noch halbwegs vernünftig aussehen. Nur leider habe ich grundsätzlich sehr wenig ahnung von webdesign (html und php und ein bißchen javaskript kann ich schon) und wäre über ein paar hilfreiche Tipps äußerst dankbar!

[moritz]

Hallo,

ich hab die folgende Website letzlich gebastelt. Sie ist gerade mal 20KB groß, insgesamt mit Bildern usw: (Gallery und Blogs ausgeschlossen)
http://www.gaehnen.net und dann noch ein /index.php anhängen.

Gruß, mo

Edit: Schmarrn, höchsten 15KB
Edit2: -10KB Bild, das nur einmal geladen werden muss

[Meflin]

hi,
mit css kann man so einiges anstellen. siehe dazu der css zen garden
http://www.csszengarden.com/?cssfile...116.css&page=0

[Chewie]

Wenn du Kontrolle über den Server hast, bietet sich auch an, die Inhalte GZIP zu komprimieren. Hier gibts Infos dazu.

[RuX]

am einfachsten und stylishsten gehts wenn du einen einzigen farbverlauf verwendest, breite 1 pixel (bzw höhe ein pixel, je nach gewünschter richtung) und den dann per tag automatisch wiederholen lässt. damit lassen sich dann sehr passable balken, rahmen usw erstellen. oder für rahmen einfach standard html border width = 1 setzen oder ein 1x1 pixel breites bild. kleine feine rahmen schauen ziemlich gut aus. ein gutes beispiel für eine seite die mit wenigen grafiken viel erreicht ist z.b www.euro-tribesplayers.com. auf html generatoren wie frontpage (*hust*) würde ich zur vermeidung von overhead auch verzichten.
gl

[yankee]

Code:

*gähn*

Hier entsteht gähnen.net.

*gähn*s

Naja, bilder sehe ich garnicht und 3 zeilen, ok, dass ist klar, das die Seite klein ist...

also ich knn ja so ein bißchen css. Aber afaik kann man damit doch nur so sachen ändern, wie dass h1-tags immer mittelbündig sind usw. Aber so richtig Seitengestalltung? Also ich meien etwa mehr als etwas mittelbündig statt linksbündig ausgeben?

[Meflin]

nimm dreamweaver, der macht garantiert keinen overhead. (wusst garnicht dass man das bei html auch schaffen kann...)

[moritz]

ich hab doch geschrieben, /index.php anhängen :)
Okay, hier der ganze Link: http://www.gaehnen.net/index.php

[moritz]

Zitat:

Zitat von Meflin

nimm dreamweaver, der macht garantiert keinen overhead. (wusst garnicht dass man das bei html auch schaffen kann...)

Alle Websiteneditoren dieser Art machen Overhead, sonst würden sie sich nicht mehr im Code auskennen. Ich habe lnage Zeit mit Dreamweaver gearbeitet, und hatte fast immer 5KB overhead.

[Meflin]

Zitat:

Zitat von yankee

Code:

*gähn*

Hier entsteht gähnen.net.

*gähn*s

Naja, bilder sehe ich garnicht und 3 zeilen, ok, dass ist klar, das die Seite klein ist...

also ich knn ja so ein bißchen css. Aber afaik kann man damit doch nur so sachen ändern, wie dass h1-tags immer mittelbündig sind usw. Aber so richtig Seitengestalltung? Also ich meien etwa mehr als etwas mittelbündig statt linksbündig ausgeben?

nunja schau dir den link an. da wird keine einzige tabelle verwendet! folglich ist der code ziemlich schlank... mit css ist eben weit mehr möglich als du dir im moment vorstellen kannst!

[Meflin]

Zitat:

Zitat von moritz

Zitat:

Zitat von Meflin

nimm dreamweaver, der macht garantiert keinen overhead. (wusst garnicht dass man das bei html auch schaffen kann...)

Alle Websiteneditoren dieser Art machen Overhead, sonst würden sie sich nicht mehr im Code auskennen. Ich habe lnage Zeit mit Dreamweaver gearbeitet, und hatte fast immer 5KB overhead.

was meinst du mit overhead? wenn ich meinen code aus dreamweaver in editor kopiere und abspeichere ist das genuaso groß...

[yankee]

Zitat:

Zitat von moritz

ich hab doch geschrieben, /index.php anhängen :)
Okay, hier der ganze Link: http://www.gaehnen.net/index.php

Achso... mh, ja das habe ich missverstanden *g*

Ich muss ´sagen die Seite gefällt mir unheimlich gut. Der Quelltext ist einfach und kurz (und damit kann ich ihn in endlicher Zeit auch verstehen *g*) und trotzdem sieht die Seite gut aus. SUPER!

@Meflin: Bei draemweaver udn anderen automatischen Editoren ist es mit PHP usw. ein bischen schwiereig (korrigiere mich, wenn ich dummschwätze). Da soll auch ein kleines "Forum" rein und die ganzen Quelltexte liegen in 'ner MySQL-DB. So setze ich das mit PHP alles schön zusammen *g*

@RuX, die Seite gefällt mir auch, aber der Quelltext ist wieder unglaublich lang (was wohl eher an der größer der Seite liegt, als daran, dass der qt schlecht wäre, aber ich muss ihn ja auch verstehen...

@Chewie: Datenkomprission klingt gut, aber (habe ne 4 in englisch) kann das jeder Browser wieder dekomprimeiren? Ich will keinesfalls mich nur auf IE beschränken. Auh Opera-, Mozilla- undKonqueror-User sollen die Möglichkeit haben meine Seite lesen zu können. Und irgendwie sehe ich dort nirgends, wie es geht...

[moritz]

Zitat:

Zitat von yankee

Ich muss ´sagen die Seite gefällt mir unheimlich gut. Der Quelltext ist einfach und kurz (und damit kann ich ihn in endlicher Zeit auch verstehen *g*) und trotzdem sieht die Seite gut aus. SUPER!

Danke :) Vielleicht ein Denkanstoss, die Seite unsere SMV smv-gg.de, die hab ich allerdings schon vor einem Jahr gemacht -> nicht ganz so übersichtlich und um einiges größer und komplexer :)
Wenn du willst kann ich dir auch ein bisschen Code zukommen lassen, dann müsstest du dir nicht alles umständlich per HTTP saugen.
Ich kann dir ansosten nur CSS empfehlen, damit kannst du den Code schon übersichtlich und klein halten. Ansonsten würd ich dir fürs Forum 'n iframe ans Herz legen, das ist zwar umstritten, aber wenn du ansosten noch php in deiner seite verwendest ist es ziemlich problematisch, einen php code, den man nicht ausfürhlich an die seite angepasst hat, per include einzubinden, wenn du weißt was ich mein.

gruß

[Meflin]

iframes können nur im ie angezeigt werden und sind daher eine schlechte wahl... (korrigiert mich falls sich das inzwischen geändert hat)

[yankee]

soweit ich richtig informiert bin, ist die spalte, in der man sich die Smilys auswählt (hier in der DP bei "Beitrag schreiben" ein iframe...

iframe ist in der HTML 4.0 spezifikation enthalten

hast aber recht, es wurde mal mit dem IE3 von Microsoft eingeführt...

p.s.: Wenn ich tabellen als Gestaltungsmittel nehme, heißt das doch, dass cih die Seite immer komplett neu laden musst. Heißt das, das ich besser frames nehme?

[moritz]

IFrames werden von allen Browsern unterstützt, sie gehören sogar zur HTML4-Spezifikation. Siehe hier.

[himitsu]

@Meflin:
schau dir unser DP-Shoutbox an, die liegt in so 'nem IFrame und bis jetzt hat sich noch kein nicht IE-Nutzer beschwert, weil er die nicht sieht :zwinker:

[fiasko]

Zitat:

Zitat von yankee

@Chewie: Datenkomprission klingt gut, aber (habe ne 4 in englisch) kann das jeder Browser wieder dekomprimeiren?

Der Browser schickt einen Accept-Encoding Header mit der er anzeigt was er verstehen kann. Festgelegt sind gzip, compress, zlib und identity. Der Web-Server nimmt dann ein Encoding was beide verstehen (im schlimsten Fall die Identität).

[Chewie]

Anzumerken wär noch, dass sich Kompression nicht rentiert bei Daten, die schon komprimiert sind (z.B. JPG) und bei sehr kleinen Dokumenten, da dort der ZIP-Header evtl. größer ist als das Original!

[yankee]

k. Aber ich denke, dass ich datenkomprission auch später noch hinzufügen kann. Aber was für eine Technik nehme ich jetzt zu Seitengestaltung? Frames, Tabellen, oder was ganz anderes?

[nailor]

Zitat:

Zitat von Chewie

Anzumerken wär noch, dass sich Kompression nicht rentiert bei Daten, die schon komprimiert sind (z.B. JPG) und bei sehr kleinen Dokumenten, da dort der ZIP-Header evtl. größer ist als das Original!

aber bei sehr kleinen inhalten wird man auch keine kompression brauchen. und eine internetseite wird auch keiner sooft runterladen, dass sich ein zip-header als übermäßiger traffic bemerkbar machen wird.

das es mit jgp&co nicht klappt ist klar.

[yankee]

ich habe mir gerade mal angesehen, wie <div> funktioniert und ich muss sagen, dass ist echt 'ne tolle Sache! Frage wäre, ob mann wie bei frames die einzelnen div-Teile ausdateien laden kann (wäre natürlich perfekt). Bei google habe ich nichts gefunden, aber ich würde doch glatt mal sagen, dass ich das Seitendesign mit div mache :-))

[jfheins]

Srtatt frames, tabbellen usw. kannst du auch <div> nehmen, und das dann mit CSS position:absolute etc. positionieren ... (vielleicht n bissle umständlich, aber machbar :stupid: )

[moritz]

Ich empfehle dir Tabellen. Damit hast dui unbegrenzte Gestaltungsmöglichkeiten (fast), sie sind übersichtlich und leicht zu machen und sehen in allen Browsern gleich aus. Mit abosuluter positionierung hab ich hingegen andere Erfahrungen.

[himitsu]

Ich nehme jetzt auch viel lieber Tabellen und vorher hatte ich FrameSet's verwendet.

Mit Div's hab ich es nicht so, da sie mit einigen Positionierungsvarianten probleme haben.

Im Grunde genommen hat alles seine Vor- und Nachteile, vorallem da sich die verschiedenen Browserhersteller nicht einigen können und einiges unterschiedlich handhaben :cry:

[alcaeus]

Zitat:

Zitat von himitsu

Im Grunde genommen hat alles seine Vor- und Nachteile, vorallem da sich die verschiedenen Browserhersteller nicht einigen können und einiges unterschiedlich handhaben :cry:

Wobei IMHO Tabellen die beste Lösung sind, da die meisten Browser damit gut umgehn (außer unterschiedlichem Verhalten mit der height-Property beim table-Tag). Außerdem ist die Anordnung mit Tabellen sehr einfach.

Greetz
alcaeus

[yankee]

Nja, gemäß W3C soll man keine Tabellen zu Seitengestalltung mehr verwenden...
Wie auch immer: mit Div kann man doch wirklich so ziemlich ALLES machen und übersichtlicher als Tabellen finde ich das auch. Also ich bin überzeugt von <div>

Aber ihr habt mir unglaublich geholfen thx euch allen!!!!!! :hello: :hello:

Mit neuen erkenntnisen ans :coder: :spin:

[himitsu]

Also ich hab bei Div's immer Probleme, sobald es sich um "feste" Pixelwerte für die Größe handelt, wenn ich nur %-Werte nehm, dann ist's einfach.
Bei Tabellen ist das anders, dort geht's super.
Und seit ich versuche mein HTML, so weit wie möglich, in Strict zu machen gibt es sowieso keine Frames mehr.
Und der W3C-Validierungsservice hat sowieso nicht's gegen Tabellen ^^

[MarcusB]

Also ich benutze auch Blindtabellen für das grobe Layout der Seite.
Allerdings verschachtel ich diese (bis auf ganz wenige Ausnahmen) nicht mehr, sondern benutze <span> und <div> Tags
für die Formatierung.
Für Schrift/Form/Farb/Linien/etc-Formatierung benutze ich mittlerweile nur noch CSS, da sich so Änderungen recht leicht
vornehmen lassen, ausserdem hält es den Quellcode übersichtlich, wenn man häufig benötigte Formatierungen in einer
Style-Sheet-Datei unterbringt.

Was aber am meisten zu den Ladezeiten beiträgt sind ganz klar die Bilder, hier versuche ich soweit möglich gif's mit geringer
Farbtiefe und nicht zu unruhigen Mustern zu verwenden, da diese so recht klein werden.
JPGS nur dort, wo wirklich nötig (Fotos, etc.) und dann auch auf vernünftige Komprimierung achten.

:hi: