Homepage erstellen lernen!

Wenn Habitat flash, dann noch eine Frage.

Wie verwalten die dann die Page? Also hinzufügen von Artikeln etc.
Das geht mit Flash doch nicht so einfach oder?
 
@QuickSilverEX

...nimm dir einen Texteditor oder sowas wie BBEdit oder Textwrangler und fang an Sites zu bauen.

Erst statische (html) dann fängst du an dynamische Sachen ein zu binden (php) usw.
Damit fährst du relativ gut und hast, wie oben erwähnt, 'learning by doing' –
dann bleibt es auch da, wo es rein soll > in Kopp! :)

Gruß Difool
 
Erst mal am Anfang anfangen und erst mal alles von Hand schreiben nur im Texteditor, kein WYSIWYG.

Erst mal (X)HTML/CSS.

Dabei solltest du dir von Anfang an angewöhnen Inhalt/Struktur und Layout zu trennen und "semantischen" (X)HTML-code zu schreiben. Das bedeutet, eine Überschrift ist eine Überschrift und diese haben auch Ordnungen (h1 bis hn), man nimmt nicht einfach eine Überschrift weil man mal was größer und fett haben will, ein Absatz ist ein Absatz (p) und Tabellen sind Tabellen (und nicht zum Layouten gedacht). Wenn du das verinnerlicht hast sparst du dir in Zukunft schon sehr viel Arbeit beim einfügen neuer Inhalte.
Guter Artikel hierzu

Wenn du deinen Inhalt geschrieben hast, gehts daran das ganze mitttels CSS ordentlich aussehen zu lassen. Da würde ich dann hier bei Selfhtml anfangen.

Viel zu lernen gibts da eigentlich nicht. Zu Anfang eigentlich nur ein wenig verwirrend, wie das Box-Model aussieht (mit seinen Browserspez. Unterschieden), welche unterschiedlichen Arten von Selektoren es gibt und dann auch noch Klassen und IDs. Aber auch das geht schnell. Die wichtigsten Style-Angaben lernt man mit der Zeit, alle kann man eh nicht immer auswendig kennen.

Wenn du die Trennung von Inhalt und Layout mittels semantischem HTML und CSS machst kannst du ein paar nette Dinge machen. So kannst du den selben Inhalt völlig anders aussehen lassen nur indem du ein neues Stylesheet (und entsprechnde Grafiken) erstellst. Hier das ultimative Standardbeispiel dazu. Der HTML-Code ist immer der selbe nur die Styles/Grafiken sind andere.

Ab jetzt könnte PHP interessant werden wegen dem schon erwähnten include. Viel mehr brauchts aber da erst mal nicht, es nimmt halt Arbeit ab.

Wenn du Dynamik haben willst solltest du dich mit JavaScript beschäftigen, grundlegende Programmierkenntnisse in einer objektorientierten Sprache sind da natürlich von Vorteil.

Wenn du in PHP mehr als nur includes machen willst, kommst du um Datenbanken nicht herum, also ist auch Datenbankdesign und SQL angesagt.

Für den nötigen Eyecandy gibts nat. zum einen die Grafiken, also Bildbearbeitung und dann natürlich noch Flash.

Es gibt unzählige Infos überall im Netz verstreut. Hier mal Einige Seiten die ich ganz Nützlich finde:

Selfhtml wie schon erwähnt Top Referenz, nur zum lernen nicht ganz so gut. Aber gerade als Referenz für CSS und JavaScript unschlagbar (Syntaxverzeichnis).

Culturedcode CSS 2.1 Referenz ist eine nett gemachte CSS Referenz, nicht so ausführlich wie Selfhtml, aber ggf. schneller.

W3Schools Tutorials zu allen möglichen Webstandards, englisch.

XHTMLForum ist ein gutes Forum dass sich nur mit XHTML/CSS beschäftigt, da findest du auch viele Infos, Tipps und Tricks. Die Seitenbesprechungen finde ich da oft gut, da man schön aus den Fehlern anderer lernen kann.

Quirksmode ist eine Seite die sich mit den unterschiedlichen Interpretation von Webcode durch die einzelnen Browser beschäftigt.


Lernen kann man das alles meiner Meinung nach nur durch machen. Einfach mal anfangen.

Gruß

Stephan
 
habitat ist flash-basierend, nur die erste seite ist HTML, wobei alle "texte" als bilder in photoshop erstellt worden sind.

flash ist wieder was anderes.
hier brauchst du KEINE html kenntnisse, sondern bastelst alles in der animation, beim exportieren bekommst du die "träger-datei", also das HTML file, und darin eingebettet ist dann das SWF file, das den gesamten film beinhaltet (BEIN-halten?)

du musst dich also entscheiden, was du willst.
statische seite, dynamische seite oder flash seite.
flash mit CMS zu kombinieren ist extrem aufwändig und kompliziert ... du musst PHP, MySQL beherrschen UND noch gute flash-kenntnisse haben.

als anfang ist das ein wenig hochgegriffen :)
 
hallo allerseits. grüße an markus! (dein entwurf ist inzwischen sogar auch cd gesichert)

was ich nicht verstehe, wenn ich mir im golive eine seite per wysiwyg zusammenstelle, dann muss ich doch nicht unbedingt code lernen. (nur leider hat bei mir wysiwyg auch nicht so funktioniert) also, wenn es programme wie dreamweaver, golive oder freeway gibt, mit denen man seine Ebenen und Hintergründe, Texte und Bilder auf der Website zusammenschieben kann, warum muss ich denn dann noch telefonbuchdicke Code-Wälzer lernen? damit bleibt das webdesign den cracks vorenthalten oder für die anderen auf dem klickklackniveau von rapidweaver, iweb oder sandvox.
gibt es da keine kompromiss, denn merke, der kompromiss ist erreicht, wenn alle unzufrieden sind.

mit gerissenem band im fuß und vielem gruß

leowe
 
leowe schrieb:
was ich nicht verstehe, wenn ich mir im golive eine seite per wysiwyg zusammenstelle, dann muss ich doch nicht unbedingt code lernen. (nur leider hat bei mir wysiwyg auch nicht so funktioniert) also, wenn es programme wie dreamweaver, golive oder freeway gibt, mit denen man seine Ebenen und Hintergründe, Texte und Bilder auf der Website zusammenschieben kann, warum muss ich denn dann noch telefonbuchdicke Code-Wälzer lernen?
Zum Vergrößern anklicken....
Weil eben diese wysiwyg-Editoren in die Seiten "taggen"!
Bestimmte Sachen gehen dann schief.
Es ist vorteilhafter den Code auch "lesen" zu können – es stehen viel mehr Möglichkeiten offen.
 
Difool schrieb:
Weil eben diese wysiwyg-Editoren in die Seiten "taggen"!
Bestimmte Sachen gehen dann schief.
Es ist vorteilhafter den Code auch "lesen" zu können – es stehen viel mehr Möglichkeiten offen.
Zum Vergrößern anklicken....

das ist natürlich auch wieder wahr. ich lese schon eine weile css und es sind wirklich böhmische dörfer für mich.
 
@schdeffan

Danke für deine sehr ausführlichen Tipps!
Dieses Zen ist ja wirklich unglaublich, dass das ein und der selbe code ist, nur eine andere CSS Datei.

Ich werde dann jetzt recht bald mit dem lernen anfangen. Learning by doing ist aber glaube ich wirklich der beste weg.

Nur zum Spaß: kennt ihr ein paar homepages die mit flash gemacht sind?
Ich hatte mal eine Page gefunden, die immer wöchentlich die neusten und besten Flash sites sucht, das war sehr interessant.
Vielleicht kennt ihr eine solche ja.
 
hallo nochmal,
nach genauem durchlesen des Artikels von Schdeffan (http://www.vorsprungdurchwebstandards.de/theory/retro-coding/)
bin ich von der Site ZenGarden noch schwerer beeindruckt!
Wenn man sich dort den reinen HTML-Code ansieht, merkt man wie schnell/simple dieser eigentlich geschrieben ist und was mit CSS alles möglich ist.

Jetzt muss ich nur noch CSS ein wenig besser verstehen und ich kann mir vorstellen dann gute Fortschritte zu machen.
 
hallo,

schön dass mein Posting hilfreich war. Nur für's Protokoll: Der Artikel ist natürlich nicht von mir, ich hab nur den Link bereitgestellt.

CSS ist eigentlich gar nicht so schwer. Am besten machst du dir für den Anfang mal ne simple HTML-Datei, beachte dabei die Semantik. Dann überlegst du dir wie du das schöner machen willst (andere Schrift, andere Farben, etc.)

Im Netz findest du auch jede Menge Tutorials. Arbeite da ein zwei durch und du bekommst schnell ein Gefühl für die Sache. die Ideen kommen dann ganz schnell von alleine.

Einen kleinen Tipp hab ich noch für den Anfang. Füge folgende Zeilen immer in deine Stylesheets ein (Am Anfang):
Code: 
*
{
 margin: 0;
 padding: 0;
}

Das "resettet" für alle Elemente die Aussen- und Innenabstände. Das musst du jetzt am Anfang zwar nicht unbedingt verstehen, das kommt ganz schnell. Das ganze hat zwei Vorteile:

1. Die unterschiedlichen Browser verwenden teilweise unterschiedliche defaults für diese Abstände. Da wundert man sich oft, warum das in unterschiedlichen browsern unterschiedlich aussieht. So fängt man bei allen bei 0 an und ist zumindest was diesen Aspekt angeht überall gleich.

2. Dadurch dass alles Abstände 0 sind ist man auch gezwungen sich über all diese Abstände Gedanken zu machen.

Gruß

Stephan
 
Zuletzt bearbeitet:
Hab gerade noch was schönes gefunden:
http://jendryschik.de/wsdev/einfuehrung/

Am Anfang wird viel auf Historie und so eingegangen, das kann man überspringen, aber ansonsten nicht schlecht gemacht.

Nur auf Browserunterschiede wird nicht eingegangen, das ist gerade bei CSS wichtig, da nicht jeder browser jeden Selektor und auch nicht jedes Attribut kennt.

Gruß

Steohan
 
Kann man mit CSS auch solche reiter machen?

www.macrabbit.com

Wenn nicht, würde ich gerne wissen, wie das genau gemacht wurde.

Ansonsten komme ich schon ganz gut voran mit HTML und CSS.
Man kommt schon relativ gut und schnell rein muss ich sagen.
 
Klar geht das, die im Beispiel sind sogar mit XHTML und CSS gemacht. Da bei jedem Click auf einen Reiter die Seite neu geladen wird ist das recht einfach.

Schau dir mal den Quelltext an. Die Reiter sind im HTML eine ungeordnete Liste (ul). Du musst dann nur noch sehen, wie du die Listenelemente nebeneinander bekommst (u.a. mit float: left) und dann die Hintergrundgrafiken entsprechend laden, entweder dunkel grau für die inaktiven oder heller für den aktiven Reiter. Der Reitereffekt kommt quasi nur durch die unterschiedlichen Hintergrundgrafiken zustande.

Für den Firefox empfehle ich noch die Webdeveloper-Extension. Damit kannst du dir z.B. einfach das Stylesheet der Seite anzeigen und sogar "on the fly" bearbeiten. Extrem nützlich.

Gruß

Stephan
 
wirklich sehr interessant was alles möglich ist!
Danke für deine Erklärungen übrigens.
Wenn du möchtest, kannst du mal gucken, was ich bis jetzt geschafft habe.

http://www.geocities.com/invisible_Force2000/Test/MeineERsteHP.html
CSS habe ich noch im Head, würde ich dann erst zum schluss auslagern.

Habe schon so einiges verstanden. Wie gesagt, ist eigentlich gar nicht soooo schwer,
allerdings, ohne Referenz etc (selfhtml) könnte ich jetzt wohl nicht nochmal so eine Site bauen, ich muss da schon immer noch mal was nachgucken.

Was ich noch nicht richtig verstanden habe, ist die Positionierung.
Da gibt es wohl sehr viele verschiedene möglichkeiten, von wegen: Float, Position,margin mit "em" etc. pp.
Manchmal sind die auch völlig ohne Angaben in der richtigen Reihenfolge.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten