Informationen für CMS/made simple

cyberman · 19. September 2010 16:32

Da immer wieder Fragen zum Layout kommen, die eher allgemeiner Natur sind und häufig ahnen lassen, dass der Fragende über keinerlei Erfahrungen im Bereich Webdesign verfügt, hier eines vorab:

CMS Made Simple nimmt einem nicht die Aufgabe des Webdesigners ab.
Es ist ein Content Management System. Diese dienen zur Verwaltung von Inhalten.
Es bedeutet nicht "Website Made Simple".

Natürlich kann man mit den mitgelieferten Standard-Templates bzw. den Templates, die hier zum Download bereit stehen, schnell und einfach eine Webseite ohne Webdesign-Kenntnisse erstellen. Möchte man aber Änderungen am Layout vornehmen oder selbst ein Template erstellen, sind Grundkenntnisse im Bereich HTML und CSS zwingend erforderlich.

Im folgenden daher eine Liste mit nützlichen Links zu diesem Thema im weitesten Sinne, die gern erweitert werden kann:

umfangreiches Nachschlagewerk für HTML/XHTML/JavaScript/CSS (sowohl für Anfänger als auch für Fortgeschrittene):
http://de.selfhtml.org (deutsch) (ein Muss für jeden, der sich mit Internetseiten beschäftigt)
deutschprachige CSS Referenz: http://www.css4you.de
Umfangreiches Nachschlagewerk mit Anleitungen und Beispielen zum Thema Webdesign:
http://www.w3schools.com/ (englisch)
12 Schritte zu einem einfachen CSS Layout: http://www.subcide.com/tutorials/csslayout (englisch)
Der Artikel ist inzwischen durch ein vollständiges Redeisgn leider nicht mehr verfügbar, aber die Seite http://www.subcide.com/articles/ bietet weiterhin interessante Artikel zum Thema
praktische Beispiele zum Thema Positionierung und Farben: http://www.barelyfitz.com (englisch)
Tutorials zum Formatieren von Listen, Float-Elementen etc.: http://css.maxdesign.com.au (englisch)
http://www.andreas-kalt.de/webdesign/tu … -erstellen (deutsche Übersetzung eines Tutorials von Maxdesign)
Tutorials, Code-Beispiele, Tipps & Tricks zu CSS http://www.css-technik.de
Wieder eine Seite von Grundlagen bis zu speziellen Lösungen: http://www.style-sheets.de
Webdesgin mit CSS, (X)HTML und Javascript http://www.mediaevent.de
Beispielseiten + Buchvorstellung "Webdesign mit CSS": http://meiert.com/de/publications/books/978-3897214224/
Microsoft und der liebe Internet Explorer ... einige typische Browserfehler + Linklisten, wie man diese beheben kann:
http://barrierefrei.e-workers.de/worksh … index.html
Tipps und Tricks zur Cross-Bowser-Kompatiblität: http://www.cross-browser.net
Grundlegenen Aspekte der Webseitenerstellung (sowohl für Layout als auch php-Programmierung)
http://www.1ngo.de/index.html
Runde Ecken http://www.andreas-kalt.de/webdesign/tu … unde-ecken
Einfache valide Vorlagen (Dinge, worauf man bauen kann ) - http://blog.html.it/layoutgala/
Für HTML - http://www.html-seminar.de/befehlsuebersicht.htm
Templates layouten: http://www.yaml.de
Quellensammlung für xhtml und CSS - http://www.drweb.de/magazin/quellensamm … tutorials/
Buch "Einführung in XHTML, CSS und Webdesign" des Webworkers Michael Jendryschik online lesen - http://jendryschik.de/wsdev/einfuehrung/
Einführung in die Webgestaltung - http://www.peterkropff.de/site/einfuehr … ehrung.htm

Damit solltet ihr für das eine oder anderen Probleme schneller eine Lösungen finden wink .

Tobias_Gl · 16. November 2010 19:10

Eine weitere schöne Quellst ist:
http://standards.webmasterpro.de/index- … Hacks.html
Dort werden Wege gezeigt um durch selektoren den Internet Explorer bzw. alle außer den Internet Explorer anzusprechen. Somit kann man gezielt die Browser beeinflußen und deklarieren.
Ansonste gibt es ja noch den Weg über Conditional Comments
http://de.wikipedia.org/wiki/Conditional_Comments

Einige Bekannte Hacks wurden auch in YAML eingebracht und dort behoben. Im YAML Buch ist dies sehr gut erklärt auf der Webseite findet man immerhin einige Wege um die bekanntesten Bugs zu beheben.

http://www.yaml.de/de/dokumentation/css … ungen.html

cyberman · 16. November 2010 21:44

Danke für deine Ergänzung!

NaN · 22. März 2011 02:19

Da man die meisten Themen und Beiträge im .org-Forum, die von ehemaligen Mitgliedern erstellt wurden nicht direkt verlinken kann, füge ich hier mal weiter ein, was wir drüben schon geschrieben haben:

Was heutzutage natürlich bei kaum einem Layout mehr fehlen darf, sind Grafiken bzw. ganz genau genommen Icons.
Und sei es nur, um im Menü anzuzeigen, dass dieser oder jener Punkt gerade aktiv ist oder Unterunkte enthält.
Darüber haben wir hier ja noch garnichts gebracht.
Bin gerade aktiv auf der Suche nach kostenlosen Icons für eine Webseite und bin bisher über folgende interessante Seiten gestolpert.

Dr.Web:
http://www.drweb.de/magazin/symbole-but … -download/

Suchmaschinen speziell für Icons
http://www.iconfinder.net
http://www.iconlook.com
http://www.iconlet.com
http://icons-search.com
http://www.easyiconfinder.com

NaN · 22. März 2011 02:26

Nützliche Tools

Zwar schon mehrfach im Forum erwähnt, aber irgendwie doch nicht allen bekannt. . .

Nummer eins: Firefox
Das ist nicht nur ein Tool, sondern ein verdammt guter Web Browser, der sich durch verschiedene AddOns um sehr nützliche Funktionen erweitern lässt.
Im folgenden einige ausgewählte Firefox AddOns:

Firebug
Damit kann man jedes Element genau analysieren und dessen Eigenschaft - wie z.B. Stylesheets - ändern und das Resultat im Browser testen.
Die Änderungen werden nicht gespeichert sondern gelten nur für aktuelle Anzeige im Browser.
Ist man mit dem Resultat zufrieden, kann man die Stylesheets kopieren und in sein Seiten Styleshet einfügen.

Pixel Perfect
Ist eine Erweiterung für Firebug. Damit kann man ein Bild (z.B. ein Screendesign) als transparentes Bild über seine Seite legen und dann die Stylesheets seiner Seite auf den Pixel genau an das Bild anpassen.

Web Developer
Ein kleines Tool mit verschiedenen Werkzeugen.
Auch hier kann man sich verwendete Stylesheets anzeigen lassen, diese manipulieren und sich das Ergebnis als Vorschau im Browser ansehen.
Man kann Grafiken deaktivieren und sich ein Bild davon machen wie die Seite aussieht, falls die Grafiken (aus welchem Grund auch immer) nicht geladen werden können und vieles mehr.

HTML Tidy
Zeigt Validierungfehler an und bietet die Möglichkeit eine bereinigte HTML Version auszugeben.

NaN · 22. März 2011 02:26

Nachtrag:

Inzwischen sind die Browser Safari, Chrome bzw. Chromium, Opera und sogar Internet Explorer (zuminedst ab Version 8 ) ebenfalls ganz gut zu gebrauchen und bieten ebenfalls Werkzeuge, die ähnlich dem Firebug das genaue Inspizieren von HTML Elementen ermöglichen. Insbesondere in Hinsicht auf HTML 5 sollte man sich nicht mehr allzusehr stur auf den Firefox verlassen, sondern auch mal andere Browser (allem voran Chromium) zu Rate ziehen.
Ich persönlich neige bei der Entwicklung in letzter Zeit eher dazu, mich auf die Darstellung im Safari und IE zu verlassen, da diese etwas restriktiver bei Fehlerkorrekturen im Makup zu sein scheinen. Invalides Markup wird man dort eher zu Gesicht bekommen als im Firefox.

NaN · 22. März 2011 02:28

Weitere Nuetzliche Firefox-Plugins:
z.b. Validator Damit man auch alle html fehler finden kann.
Ausserdem waehre vielleicht noch Dust-Me Selectors zu nennen. Das Tool findet ungenutzten CSS code in eingebundenen CSS Files. Wenn man eine Sitemap.xml angelegt hat (natuerlich habt ihr das alle gemacht *G*) kann man auch alle seiten auf einmal durchforsten lassen. SEHR praktisch.

noober · 01. September 2011 18:28

Hier gibts viele Trends, Tips und Tricks rund um Arbeit als Webdesigner und Designer, Webdesign, Coding usw. definitiv ein Bookmark wert:
http://www.smashingmagazine.com

Webdesign Tips & Tricks
http://webdesignerwall.com/

Webdesign Tips & Tricks
http://www.grammiweb.de

Schriften aller Art:
http://new.myfonts.com

Systemschriften im Vergleich + entsprechender CSS
http://www.typetester.org

faglork · 12. Juni 2012 09:09

Wer mal ein paar Inspirationen braucht, was heute mit CSS möglich ist:

http://www.csszengarden.com/

--> ist immer dieselbe Seite, nur das Stylesheet ist jeweils anders.

Viele sehr interessante und brauchbare Artikel (englisch):
http://www.alistapart.com/
http://www.456bereastreet.com/
http://meyerweb.com/

Servus,
Alex

cyberman · 26. November 2014 21:01

Hier wieder mal ein Link zum Thema CSS (in englisch) - eine Anleitung, wie man saubere, einfach zu handhabende und skalierbare CSS schreibt

http://cssguidelin.es

Janl · 29. November 2014 23:31

Danke Super Thread,
da gibt vieles das ich noch nicht kenne.

http://www.google.com/fonts
kann ich noch dazu geben

MfG
Jan

cyberman · 29. Januar 2015 23:25

Noch ein Link - wieder zu CSS, dieses Mal ein Spickzettel zu den CSS-Feinheiten

http://t3n.de/news/erste-hilfe-css-590621/

cyberman · 17. Februar 2015 23:32

Twitters Bootstrap - wer kennt es nicht?! Ist es doch eines der am häufigsten genutzten CSS-Frameworks der Welt.

Hier eine Sammlung der besten (kostenlosen) Bootstrap Themes

http://t3n.de/news/kostenlose-bootstrap-themes-593928

Janl · 17. Februar 2015 01:12

http://www.htmllion.com/templates.html
Freie responsive templates

MfG
Jan

kampkrusty · 17. Februar 2015 08:39

Janl schrieb:

http://www.htmllion.com/templates.html
Freie responsive templates
MfG
Jan

Ich weiß, "einem geschenkten Gaul..." usw., aber die Seiten sind doch alle gleich im Aufbau, oder guck ich schief?

NaN · 17. Februar 2015 09:01

Ich weiß, "einem geschenkten Gaul..." usw., aber die Seiten sind doch alle gleich im Aufbau, oder guck ich schief?

Und?
Da Du in einem anderen Thema nach Beispielen für Media-Queries fragst, sollte genau das Dein Einstieg sein, um das Prinzip zu verstehen.

Ansonsten gäbe es da noch http://mediaqueri.es/
Da kann man sich auch noch eine Menge Inspiration holen.

Janl · 17. Februar 2015 09:04

@Kampkrusty,

am Untenseite sind noch Links mit weitere CSS Instruktionen.
Stimmt, Templates sind nicht gerade spannend aber sehr ordentlich so zu sehen.

MfG
Jan

Janl · 27. Juni 2015 14:17

Hier mal ein responsive Design das man in 1.11 und 1.12 so nutzen kann.
XML-Datei laden als Theme.
Wenn ich bei org wieder hoch laden kann geht es auch da.
Life auf http://stajl.xyz

MfG
Jan

responsive6.zip

cyberman · 28. Juni 2015 17:54

Danke fürs Einstellen hier ... erinnert mich daran, dass für die .de eine eigene Theme-Sektion auch nicht schlecht wäre.

cyberman · 06. Juli 2015 07:22

Hier mal ein ergänzender Link zu einem CSS-RGBA-Generator für die Berechnung von Farb-Transparenzen

http://www.css3-generator.de/rgba.html

cyberman · 06. Oktober 2015 10:04

Interessant - hat doch die US-Regierung einfach mal so einen Webdesign-Standard für deren Behörden festgelegt wink

https://playbook.cio.gov/designstandards/

natürlich mit voller WCAG 2.0 Kompatibilität. In DE als #Neuland undenkbar tongue ...

faglork · 06. Oktober 2015 14:07

Zugänglichkeit: Mythen und falsche Vorstellungen

https://yatil.de/zugaenglichkeit-mythen … tellungen/

Servus,
ALex

Beitrag geändert von faglork (06. Oktober 2015 14:08)

cyberman · 02. November 2015 00:29

Hier wieder mal eine Regelsammlung für (besseres) HTML, CSS und JavaScript

https://github.com/bendc/frontend-guidelines

cyberman · 19. April 2016 09:48

Um das Layout in allen Browsern einheitlich zu bekommen, werden üblicherweise Reset-Stylesheets wie zum Beispiel der von Eric Meyer eingesetzt

http://meyerweb.com/eric/tools/css/reset/

Aktuell stellte sich mir aber die Frage, mit welchen Voreinstellungen genau die gängigen Browser arbeiten - hier das Ergebnis

Firefox - https://mxr.mozilla.org/mozilla-central … s/html.css
Chrome - https://chromium.googlesource.com/chrom … s/html.css
Safari - http://trac.webkit.org/browser/trunk/So … s/html.css
Internet Explorer (ältere Versionen) - http://www.iecss.com/

#1 19. September 2010 16:32

Re:

#2 16. November 2010 19:10

Re:

#3 16. November 2010 21:44

Re:

#4 22. März 2011 02:19

Re:

#5 22. März 2011 02:26

Re:

#6 22. März 2011 02:26

Re:

#7 22. März 2011 02:28

Re:

#8 01. September 2011 18:28

Re:

#9 12. Juni 2012 09:09

Re:

#10 26. November 2014 21:01

Re:

#11 29. November 2014 23:31

Re:

#12 29. Januar 2015 23:25

Re:

#13 17. Februar 2015 23:32

Re:

#14 17. Februar 2015 01:12

Re:

#15 17. Februar 2015 08:39

Re:

#16 17. Februar 2015 09:01

Re:

#17 17. Februar 2015 09:04

Re:

#18 27. Juni 2015 14:17

Re:

#19 28. Juni 2015 17:54

Re:

#20 06. Juli 2015 07:22

Re:

#21 06. Oktober 2015 10:04

Re:

#22 06. Oktober 2015 14:07

Re:

#23 02. November 2015 00:29

Re:

#24 19. April 2016 09:48

Re:

Fußzeile des Forums