XHTML und CSS3 mit DW CS5

[robbieW]

Hallo Freunde,

ich bin von iWeb wieder auf Dreamweaver zurück gegangen. Ich habe das Glück, CS5 besitzen zu dürfen.

Meine Erfahrungen im Homepagebau ist eine Seite erstellen (mit Tabellen) und den Inhalt einfügen, kopieren, Inhalt ergänzen etc..

Jetzt habe ich durch DW gelernt, Vorlagen zu erstellen. Mit Arbeitsbereichen etc.. klappt auch alles super.

Ich lese aber immer mehr, dass man mit CSS arbeiten sollte.... Wie soll man das verstehen?

Was macht CSS? nur die Textstruktur bearbeiten bzw. formatieren oder auch den Aufbau der Seite?

Im normalen XHTML bau ich meistens Tabellen und packe dort den Inhalt rein und formatiere den dort.

Hat jemand evtl. eine Empfehlung, wo man sich schlau lesen kann?

 

[Pascolo]

Hat jemand evtl. eine Empfehlung, wo man sich schlau lesen kann?

Ich kann dir folgendes empfehlen:
http://little-boxes.de/little-boxes-teil1-online.html

Die Bücher sind übrigens auch klasse, für den Einstieg optimal.

 

[cascade]

HTML für die Struktur, CSS für die Formatierung.

 

[robbieW]

cascade,

wie die Struktur? Wo setzte ich z.B. die benötigten Elemente wie Tabellen und Text ein? Im HTML oder im CSS? WO baue ich das Layout?

Beispiel:

Ich öffne eine neue HTML Seite, Speicher die als Test und setzte im Quellcode ein <link rel="stylesheet" type="text/css" href="stylesheet/return-me.css" />

öffnet sich dann die HTML Seite mit dem Layout vom CSS? Bzw. sollte?

 

[ImpCaligula]

HTML für Dein Aufbau der Webseite... Tabellen, DIVs, SPANs, Texte, Daten etc....
CSS ist die (Vorlage) zur Formatierung Deiner Webseiten... welche Stile, welche Schriften, wie sehen die Tabellen aus etc.

Schau Dir doch das an: http://de.selfhtml.org/css/index.htm

 

[cascade]

Ja. Mit "Struktur" meine ich den grundlegendenAufbau einer Seite. Blöcke, Text etc.

Farbe, Schriftart, Hintergrundbilder, ..., das macht man mit CSS.

 

[robbieW]

Nehmen wir mal Dreamweaver als Beispielprogramm.

Ich bau eine Seite (HTML) uns mache mit dem CSS Modul (in Dreaweaver) eine CCS Klasse. Passt das dann so auch oder ist es professioneller, eine eigenständige CSS Seite zu definieren und dann dran zu setzten?

Im Bild seht ihr evtl. was ich meine!

Oben links könnt ihr sehen Quellcoder und return-me.css

Rechts ist die Box mit den verschiedenen Werkzeugen z.B. CSS-Stile.

Wenn ich mit der Boy auf einer normalen html Seite einen Stil erzeuge und das als DW. Vorlage speichern und so meine HP aufbaue, ist da richtig... oder macht man das anders?

Habe noch eine evtl. blöde Frage. Soll man wenn ich eine Tabelle einsetzte die Werte als Pixel oder in % wählen?

Was ist besser?

 

[das_micha]

Moinsen, hoffe ich verstehe deine frage nicht falsch. Klingt für mich so als ob du deine Websites "klassisch" als Tabelle aufbaust. Dieses ist leider eine Unart die sich damals mal als praktikabel erwiesen hat. Heute baut mal Seiten eigentlich komplett ohne Tabellen. Tabellen sollten ausschließlich für tabellarische Inhalte genutzt werden.
Im wesentlichen baut man die grundgerüste mit verschiedenen Containern auf die man dann über CSS definiert. Prima Beispiele was man mit html und CSS machen kann findest du auf csszengarden.com
Alle Seiten die du dort findest haben einen identischen html Aufbau. Die einzelnen Seiten unterscheiden sich lediglich im CSS.

 

[gKar]

Hat jemand evtl. eine Empfehlung, wo man sich schlau lesen kann?

de.selfhtml.org

Außerdem zu Fragen wie „was ist CSS“: Wikipedia.

 

[ImpCaligula]

gKar .... das habe ich ihm auch schon empfohlen. Aber statt sich einfach mal 1-2 Stunden hin zu setzen und überhaupt sich ein zu lesen was CSS ist, was es kann, wie es aufgebaut ist und welchen Sinn es ergibt - damit er CSS auch versteht - versucht er im Dreamweaver an CSS irgendwie herum zu doktoren bis es irgendwie geht....

 

[hillepille]

Dreamweaver ist in meinen Augen eh ne Katastrophe, hinterher steht so viel,Müll im Quellcode, dad einem schlecht wird. Html und CSS lernt man am besten von de Picke auf, denn das ist grundlegend und sollte verinnerlicht undvor allem verstanden sein.

 

[das_micha]

Dreamweaver ist in meinen Augen eh ne Katastrophe, hinterher steht so viel,Müll im Quellcode, dad einem schlecht wird. Html und CSS lernt man am besten von de Picke auf, denn das ist grundlegend und sollte verinnerlicht undvor allem verstanden sein.

Stimme dir vollkommen zu! Wer sich ernsthaft mit der Materie beschäftigen will kommt eh nicht drum rum alles von der Pike auf zu lernen. Nicht nur das dw recht schnell an seine grenzen stößt, besonders in Bezug auf die wysiwyg Darstellung und die kleinen Kniffe die man braucht.

Aber das dw nur Murks fabriziert kann ich nicht bestätigen. Die Zeiten sind lange vorbei. Außer die haben mit dw 5.5 & 6 nen kapitalen Bock geschossen. Wird dw mit Sinn und verstand angewendet ist das Ergebnis sogar recht brauchbar.

Kram es alle jubeljahre mal wieder raus wenn ich mal komplexere imagemaps brauche.

Klick man allerdings wie Wild durch die Gegend und macht Dinge die so eigentlich nicht vorgesehen sind fabriziert er durchaus auch mal nen unnötigen Überhang besonders im css.

Dennoch bin ich der Meinung das ich ein mittelkomplexes Layout schneller und standfester von Hand coden kann.

 

[hillepille]

Aber das dw nur Murks fabriziert kann ich nicht bestätigen. Die Zeiten sind lange vorbei. Außer die haben mit dw 5.5 & 6 nen kapitalen Bock geschossen. Wird dw mit Sinn und verstand angewendet ist das Ergebnis sogar recht brauchbar.Kram es alle jubeljahre mal wieder raus wenn ich mal komplexere imagemaps brauche.Dennoch bin ich der Meinung das ich ein mittelkomplexes Layout schneller und standfester von Hand coden kann.

Hi, ja meine erfahrungen mit dw liegen schon gut 6 Jahre zurück,mkann also sein, dass dw inzwischen brauchbar ist. Ich bekomm das auch schneller von hand hin, habe das aber bis auf Testversuche mit diversen wysiwyg-editoren auch noch nie anders gemacht!.

 

[Slashwalker]

Dreamweaver ist in meinen Augen eh ne Katastrophe, hinterher steht so viel,Müll im Quellcode, dad einem schlecht wird. Html und CSS lernt man am besten von de Picke auf, denn das ist grundlegend und sollte verinnerlicht undvor allem verstanden sein.

Naja, nur wenn man ihn falsch bedient. In der Quellcode Ansicht, in der ich ausschließlich arbeite, macht der nix, aber auch gar nix, was nicht gewollt ist.

 

[wdominik]

http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/

Ist evtl. auch ganz interessant um zu verstehen, wie sich eine Webseite in die Teile HTML, CSS und JavaScript aufteilen sollte. Grundlegend gilt zu verstehen, dass HTML lediglich die Struktur der Informationen bzw. die Semantik wiedergeben sollte. Du zeichnest also die Bedeutung der Teile deine Webseite aus, und sagst somit *das* ist eine Überschrift, *dies* sei ein Paragraf, *jenes* ein Navigationselement, etc. und nicht der Text soll 24pt, fett und unterstrichen sein. Letzteres definierst du in CSS. HTML sollte es erst einmal egal sein, wie eine Überschrift (oder jedes andere Element) auszusehen hat.

 

[hillepille]

Naja, nur wenn man ihn falsch bedient. In der Quellcode Ansicht, in der ich ausschließlich arbeite, macht der nix, aber auch gar nix, was nicht gewollt ist.

Hi, ja das ist schon klar, nur dafür brauche ich dann auch keinen wysiwyg-editor.

 

[hillepille]

http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/Ist evtl. auch ganz interessant um zu verstehen, wie sich eine Webseite in die Teile HTML, CSS und JavaScript aufteilen sollte. Grundlegend gilt zu verstehen, dass HTML lediglich die Struktur der Informationen bzw. die Semantik wiedergeben sollte. Du zeichnest also die Bedeutung der Teile deine Webseite aus, und sagst somit *das* ist eine Überschrift, *dies* sei ein Paragraf, *jenes* ein Navigationselement, etc. und nicht der Text soll 24pt, fett und unterstrichen sein. Letzteres definierst du in CSS. HTML sollte es erst einmal egal sein, wie eine Überschrift (oder jedes andere Element) auszusehen hat.

Hi, ich empfehle selfhtml und css4you, damit sollte man einen umfassenden einblick in die materie erlangen!

 

[das_micha]

Hi, ich empfehle selfhtml und css4you, damit sollte man einen umfassenden einblick in die materie erlangen!

Stimmt! Wobei ich es bedauerlich finde das css4you nicht mehr gepflegt wird. Gerade jetzt wo css3 sich langsam etabliert für die Basics aber nach wie vor zu empfehlen. Und selfhtml nutze ich selber nur noch wenn ich mal wieder vergessen habe wie die Funktionen für reguläre Ausdrücke in js heißen... (kann mir das nie merken obwohl so naheliegend)

 

[Slashwalker]

Hi, ja das ist schon klar, nur dafür brauche ich dann auch keinen wysiwyg-editor.

Naja, ich finde beim DW das "related files" Feature ganz praktisch. Außerdem ist DW abgesehen von Eclipse der einzige Editor der CF9 Tags/Script Unterstützt

 

[Raziel1]

Drewamweaver ist auch kein WYSIWYG Editor, da fängst schon mal an

Es ist eine vollwertige IDE Umgebung für Coding von Javascript, PHP, HTML, CSS, etc. Zwar hat der DW auch WYSIWYG Features (Eine Vorschau in der man auch Elemente anklicken und verschieben, bzw den Code visuell ändern kann), aber das ist nur ein zusätzliches Feature was wohl die wenigsten nutzen werden.

Dagegen gibt es im DW echt gute Funktionen die in vielen anderen Editoren erst seit kurzem existieren: zb SVN Support, Related Files (extrem gutes Feature) etc. Autocomplete empfiehlt sogar eigene Funktionen auch wenn sich diese in anderen Dateien befinden die Teil des aktuellen Projekts sind.