tomtombon
Goto Top

Web-Seiten gestaltung

Moin.

Ich weiß, ich weiß,
Schande über mich das ich solch eine Frage stelle.
Aber Webseiten-Gestaltung ist schon etwas länger her, und ich bin deshalb etwas eingerostet.
Jetzt möchte ich eine eigene Seite erstellen.
Die Befehle wie für Fett etc suche ich mir aus selfHTML noch raus, kein Ding.

Wenn ich Spezial-Probleme habe frage ich speziell auch noch einmal nach.

Aber könnte mir einer noch einmal einen groben Aufbau/Struktur einer vernünftigen Seite geben?
Den Grundkram einfach, damit ich wieder einsteigen kann und mir an den Kopf schlagen kann wie dämlich ich war face-wink
"War doch loooogiiiisch..."
;o)


Bitte keine Hinweise auf Google oder EinführungsSkripte.
Am besten/mir am liebsten wäre das Skript für eine kleine Seite mit 2 Frames und ein bißchen Kleinkram.


Wäre sehr verbunden face-smile


Tom

Content-ID: 9893

Url: https://administrator.de/contentid/9893

Ausgedruckt am: 05.11.2024 um 20:11 Uhr

crash-muc
crash-muc 24.04.2005 um 01:03:35 Uhr
Goto Top
Moin auch,
kleiner Tip... ich würde von Frames abraten... wenn du dich eh erst wieder einlesen musst, fang gleich mal mit DIV´s an, versuch Content und Text mit CSS zu trennen, und nimm bitte keine Tabellen zum Ausrichten deiner Site her. Grund des ganzen ist, dass es auch Menschen gibt, die kaum sehen können bzw. blind sind oder nur mit sonder Geräten ihren PC nutzen können. Um es z.B. einem Farbenblinden die Möglichkeit zu geben deine Site besser lessen zu können, gibt es in den meisten Browsern eine Funktion die die CSS (also die Styles) deaktiviert und er sieht schwarze Schrift auf weissem Hintergrund. Wenn du es dann ganz genau machen willst nimm XHTML bzw. XML das ganze strict und so gut wie jeder Browser zeigt dir das selbe Layout deiner Page an. Falls du dazu noch Fragen hast kann ich dir gerne weiterhelfen.

cu
crash
aviles2
aviles2 24.04.2005 um 07:40:59 Uhr
Goto Top
Hallo.

Ich kann Divs auch nur wärmstens empfehlen! Erleichtern die Arbeit, machen den Quellcode modern und übersichtlich.


Kleine Aneleitung zum Einarbeiten:
http://www.4websites.de/tricks/artikel/70
cdtn235
cdtn235 24.04.2005 um 11:18:04 Uhr
Goto Top
Hi, ich glaube nicht, dass deine Seite von so vielen Halbblinden und Farbenblinden besucht wird.

Ich mein, wenn ein Blinder, der son Programm hat, das die Seite vorliest, hier auf administrator.de kommt, dreht der doch durch face-wink

Also folgendes:

< HTML>
< HEAD>
< TITLE>Was auch immer< /TITLE>
evtl. hier vielleicht noch das < STYLE>tag rein, wo dann das ganze CSS-Gematsch kommt, oder auch ein < LINK>-Tag, was ne externe CSS-File einbinden kann... oder halt das ganze Rumgescriptezeuch ;)
< /HEAD>
< BODY> mit den normalen Inline-Viechern, BODY allerdings nur, wenn du keine Frames machst.
Dein Text halt
Tabelle geht folgendermaßen:
< TABLE> mit width, border, cellpadding, cellspacing usw
< TR> für ne Tabellenzeile
< TD> für ne Spalte, dann halt deinen Text, mit < /TD> natürlich wieder beenden, genauso konsequent dann auch mit < /TR> beenden und zu guter letzt, falls du nicht noch mal ne Zeile machen willst (was im Übrigen mit nem zweiten < TR>< TD>< /TD>< /TR> geht ;) ), einfach noch mit < /TABLE> beenden.
und dann halt noch < /BODY> und < /HTML>

wenn du Frames haben willst, siehts folgendermaßen aus:
Kopf is derselbe, bzw. ähnlich ;)
< HTML>
< HEAD>
< TITLE>blablabla< /TITLE>
sonstiger ###
</ HEAD>
ACHTUNG jetzt:
< FRAMESET> mit cols für Spalten und rows für Zeilen. Schreibweise: cols="235,*" für zwei Spalten, die links is 235 pixel breit, die rechts hat den Rest. border gibts auch noch, das lässt den hässlichen Spaltentrenner verschwinden.
< FRAME> mit src, wo du die Datei angibst, die reinsoll und evtl. name, um den Frame anzusprechen. Für jede definierte Spalte bzw. Zeile ein < FRAME>-Tag, beenden so wie ein < IMG>-Tag, also so: < IMG blablabla /> Oder wenn mans ganz genau machen will: < IMG blablabla>< /IMG>, wobei ich mir bei letzterem nicht ganz sicher bin ;)

dann kommt noch der Teil für Leute mit uralten Browsern:
< NOFRAMES>
blablabla
Ihr Browser ist zu alt, Pech gehabt, laden Sie sich doch Firefox runter face-smile Lassen Sie aber lieber die Hände vom IE...
blablabla
< /NOFRAMES>
dann das FRAMESET noch beenden
< /FRAMESET>
und fertig.
< /HTML>



Das wär halt ma so in ungefähr der Aufbau einer Seite. Ich bin jetzt auf die Gestaltungselemente nicht weiter eingegangen, da muss ich dich dann doch auf ein Tutorial verweisen face-wink aber obiges sollte für ne einfache Seite schon ma genügen.

cdtn235
crash-muc
crash-muc 24.04.2005 um 12:23:12 Uhr
Goto Top
Morgen auch,
@ cdtn235

1. Wenn man richtig programmiert, kann jeder Browser... ob nun text... wap... oder auch spezielle maschienen zum vorlesen der Page, die seite richtig interpretieren. Das liegt daran, dass für jedes Medium was man ansprechen will, eine CSS definiert werden kann. Ist nicht schwer... macht nicht viel Arbeit... und ist eben barierrefrei. Nur weil ich eben die Möglichkeit habe, gewisse Hacks zu nutzen, ist es trotzdem ein Fehler in der Programmierung.Ich geh da von mir aus... wenn ich was mache sollte es doch... wenn Möglich richtig sein.

2. Der verzicht von Frames... erspart einem schon mal Skript´s in Bezug auf... sind alle Frames geladen... wird mein Frame geklaut... etc. Div´s sind da eben eine gute alternative.

3. Was ist wenn du selber mal blind wirst ... was natürlich niemand hofft... dann wärst du doch auch froh, wenn du dir das Internet zu nutzen machen könntest. Was mancher auch nicht weiss ist, das seit Anfang diesem Jahres, öffentliche Homepages barrierefrei sein müssen. Gut hat nix mit privaten Sites zu tun doch wenn man eben schon neu programmiert dann doch richtig ;)

Soll auch nur als Tip gelten... ;)

cu
crash
cdtn235
cdtn235 24.04.2005 um 18:22:47 Uhr
Goto Top
Wie, wenn man richtig programmiert? :notsure:

Ich kann schon programmieren, so is das nicht. Es kommt auch drauf an, welche Zielgruppe die Seite anspricht. Nur PC-Anwender, oder auch WAP, bzw. Handheld-Anwender. Meine eigene zum Beispiel würde nie von einem der beiden letztgenannten besucht werden, weil der eigentliche Grund der Seite Downloads sind. Da kann ein Handybenutzer wenig damit anfangen ;)

Und sind wir mal ehrlich: Wer würde schon mit einem Handy auf unsere Seiten gehen? ;) Ich hab mir deine mal eben angesehen, nicht schlecht, aber mitm Handy? Oder mitm Handheld? Ne echt net, ich hab ja selber beides...
crash-muc
crash-muc 24.04.2005 um 20:06:36 Uhr
Goto Top
Abend...
@cdtn235

also wenn du so gut programmieren kannst ,weisst du ja das man Layout und Text trennt. Du weisst sicher auch was der Tidy ist... dann geh mal mit dem über meinen Quelltext und sag mir wieviele Fehler bzw. Warnungen kommen... Es geht nun mal nicht unbedingt darum ob... wann... oder wer... mal auf meine Page geht... nur hab ich so die Möglichkeit in sagen wir mal 10 min. ein CSS für einen WAP-Browser zu definieren ohnen meinen Content zu ändern... das gleiche geht für eine Druckansicht oder jedes andere Ausgabegerät... versteh mich nicht falsch... wenn ich eine Site die schon ewig läuft hätte dann würd ich auch nix ändern... nur wenn ich schon eine neu erstelle... dann hock ich mich halt mal 3 Tage hin und les mir die Möglichkeiten durch die ich habe ... und versuche dann auch das ganze so gut wie ich kann zu erstellen... oder siehst du das anders...? ;) Und das positive an der ganzen Sache ist ja auch das es einfacher ist... und in jedem Browser gleich aussieht... was leider bei 90% der Seiten im Web nicht so ist...

cu
crash

ps: ach ja und warum würdest du nicht auf meine Page mit einem sagen wir mal WAP-Browser gehen... geg. es wär schon eine CSS für WAP da...? bzw. mit einem Handheld...? ich hab übrigens auch beides... *lol*
cdtn235
cdtn235 24.04.2005 um 20:18:11 Uhr
Goto Top
ömmm, meinst du jetzt oben in der Beschreibung oder wie? Das waren doch erklärende Texte face-wink Ich schreib doch nix zwischen die Tags :p

Aber wenn ich mir recht sicher bin, dass sowieso keiner meine Seite ausdrucken will bzw. mitm Handy besuchen will, kann ich mir doch die Arbeit sparen ;) In CSS programmieren (sozusagen) ist doch nun wirklich kein Problem ;) aber mit div prog ich nich so gern, weil das immer so dumme Absätze am Ende hat... face-sad da setz ich lieber meine class-viecher, die machen dasselbe. Was will ich denn mit Layern o.ä.?! es sei denn, ich will ein Layout haben, das exakt auf jeden Pixel abgestimmt ist, würde ich sie nicht verwenden.

Und als Anfänger würd ich mich erst mal an ner einfacheren Seite versuchen, nicht gleich mit div-Layern einsteigen ;) das is meiner Meinung nach noch ein bisschen zu hoch...

Nebenbei: mit HTML beschäftige ích mich schon seit Ewigkeiten nicht mehr, ich mach meine Seiten jetzt mit PHP, das is viel interessanter ;)
crash-muc
crash-muc 24.04.2005 um 20:31:40 Uhr
Goto Top
1. Was machst du mal wenn du eine blinde Freundin hast...? ;)

2. Wenn du nicht willst das ein Div einen Absatz erzeugt... dann sag ihm das einfach über die CSS und du bekommst ein 100% Pixel genaues Layout besser geht es (derweil) einfach nicht.

3. Was ist den an einem Div schwerer als an einer Tabelle...? Ich beschäftige mich jetzt seit ca. 4 Wochen mit Webdesign...

4. Nebenbei kannst du uns dann auch erklären was PHP ist... den damit erzeugt der Server ja auch nur HTML Quelltext... oder seh ich das irgendwie falsch...? ;)

cu
crash
cdtn235
cdtn235 24.04.2005 um 20:38:53 Uhr
Goto Top
ok.

1. der bring ich bei zu sehen, was glaubst denn du?! omg dumme Frage... Was mach ich, wenn mich ein Auto überfahren will?

2. OK, das wusst ich jetzt halt net genau oO und wie sag ichs ihm?

3. Ich sag ja net, dass div schwer ist. aber ich mein, bevor ich jedem Div sag, wohin es soll, hau ichs lieber in ne Tabelle, da seh ich dann auch den Aufbau im Quellcode sofort. So wie dus gemacht hast, muss ich erst in der CSS-File nachschauen...

4. PHP ist eine Interpretersprache. Du siehst das nicht falsch, dass PHP auch nur HTML-Quellcode erzeugt, aber ich würde sagen, er tut das auf einem höheren Level. Und nur weil ich mich nicht mehr mit HTML beschäftige, um es zu lernen, sondern mit PHP, brauchst du mich nicht für dumm halten.

Sagen wir einfach, DIVs sind eine Sache, die ich nicht mag, ich hau die ###e lieber in Tabellen. Die Geschmäcker sind eben verschieden.
crash-muc
crash-muc 24.04.2005 um 20:58:37 Uhr
Goto Top
1. Ich wollte damit nur sagen das man ja nicht weiss was mal kommt... bedeutet wenn du heute was programmierst muss das ja nicht heissen das dir das Layout immer so gefällt bzw. kann sich die Zielgruppe ja auch ändern... wenn das so ist dann muss man eben nur das CSS anpassen und nicht alles neu programmieren.

2. Das in die CSS rein:

div {margin:0px 0px 0px 0px;}

dann wären alle Divs ohne Abstand... wenn du nur eine bestimmte willst dann machst du einfach eine Class oder ID daraus...

3. Jepp und wenn ich was ändern will dann muss ich nur die CSS editieren ausserdem kannst du mit "style" auch direkt in den Quelltext alles rein schreiben....

4. Sag mir bitte woraus du ableitest das ich dich für dumm halte...? Ich wollte damit nur sagen das PHP nicht mit HTML zu vergleichen ist... meiner Meinung braucht man nun mal Ahnung von HTML um mit PHP was machen zu können. Bedeutet ohnen "HTML" würde nun mal keiner was auf eine PHP Seite sehen... zumindest mit einem Browser...

cu
crash
TomTomBon
TomTomBon 24.04.2005 um 21:41:42 Uhr
Goto Top
Danke für eure Antworten.

Ich muß mir mal die Zeit klauen und es ausprobieren.
Hab hier den Editor "Phase 5" wieder rausgekramt.
Erleichtert die Arbeit am Anfang nicht wirklich, aber später ganz praktisch fand ich.

Wie gesagt danke für eure reichlichen Infos face-wink

Tom


PS:
Solche Barrierefreie Gestaltung hatte ich auch schon überlegt.
Nicht weil ich denke das ich Besucher bekomme die sowas brauchen würden.
Aber rein Prinzipiell.
Mein Onkel ist Behindert, und da bekommt man so einige Probleme schon mit.
Hatte ich aber erst in Stufe 2 geplant face-wink

Aber wenn ihr meint das ich gleich in CSS einsteigen sollte...

Mal schaun.

Thomas D.
crash-muc
crash-muc 24.04.2005 um 21:56:30 Uhr
Goto Top
Abend,
jepp Phase5 benutze ich auch recht praktisch das Ding. ;)

Ja genau und darum geht es eben auch. ;)

Das Problem ist halt... wenn du jetzt ohne CSS anfängst.. wirst du sicher nicht mehr umsteigen wenn du mal eine Page fertig hast... ;)

Am einfachsten gehst du her und schreibst eine CSS und eine Vorlagenseite.... diese Vorlagenseite benutzt du dann immer für ein neues Dokument.