Nützliche Links (Tutorials, Beispiele, Doku)

NaN · **Posted:** Tue May 06, 2008 11:11 pm

Da hier immer wieder Fragen zum Layout kommen, die recht allgemeiner Natur sind und zudem ahnen lassen, dass der Betreffende über keinerlei Erfahrungen im Bereich Webdesign verfügt, möchte ich hier vorerst eines loswerden:

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 Dank der mitgelieferten Standard-Templates bzw. der Templates, die zum Download bereit stehen, schnell und einfach eine Internetpräsenz ohne Webdesign-Kenntnisse erstellen.
Möchte man aber die ein- oder andere Änderung an einem Layout vornehmen bzw. selbst ein Template erstellen, so sind wenigstens die Grundlagen im Bereich HTML und CSS zwingend notwendig.

Das heißt nicht, dass ich dazu keine Fragen mehr beantworten möchte, aber das Internet ist voll von Foren, Beispielseiten etc., die sich mit dem Thema Webdesign und CSS beschäftigen.
Wenn eine Antwort lautet "Schau mal im Head Deines Templates, ob das Javascript für das CSS-Menü eingebunden wird" und dann zurück kommt "Hä? Sorry, bin nicht so fit im..." oder "...bin kein Crack in Sachen..." dann sagt mir das, dass der Betreffende schon an einfachen Fachbegriffen scheitert, und er eine Lösung des Problems selbst dann nicht verstehen würde, wenn sie ihm direkt ins Gesicht springt.

Ich möchte hier eine Liste mit nützlichen Links aufzeigen, die ich zum Einen selbst oft zum Nachschlagen verwende/verwendet habe, und die im Laufe der Zeit gern erweitert werden können (und bitte auch sollen ;) ) .

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, Beispielen etc. zum Thema Webdesign:
http://www.w3schools.com/

12 Schritte zu einem einfachen CSS Layout:
http://www.subcide.com/tutorials/csslayout (englisch)

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 (deutsch)

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/

Dank an axl1975:

Für CSS
http://www.exine.de/htmlcss/css_befehle ... /print.tpl (link ist leider tot)

Für HTML
http://webwelt.horus.at/html/html-schwi ... l-v1.3.pdf (link ist leider tot)
http://www.html-seminar.de/befehlsuebersicht.htm

...

Das nimmt kein Ende.
Wem noch wahnsinnig tolle Seiten mit Beispielen, Anleitungen oder Nachschlagewerken einfallen, so möge er sie bitte hier zum Besten geben.

Ich hoffe, dass somit Lösungen für die ein oder anderen Probleme schneller gefunden werden können.

In diesem Sinne:
Frohes Layouten :)

cyberman · **Posted:** Tue May 13, 2008 1:15 pm

Besten Dank für die ausführliche Zusammenstellung!

SimonSchaufi · **Posted:** Tue Sep 30, 2008 9:53 pm

Hier noch ein sehr schöner Link zum Templates layouten:

http://www.yaml.de

nhaack · **Posted:** Tue Oct 28, 2008 4:14 pm

Auch ganz nützlich, habe ich zuletzt immer häfiger reingeguckt:

Deutsches Smarty Handbuch:
http://www.smarty.net/manual/de/

Beste Grüße
Nils

cyberman · **Posted:** Tue Dec 16, 2008 7:32 am

Und noch etwas für die Sammlung

http://www.drweb.de/magazin/quellensamm ... tutorials/

nhaack · **Posted:** Mon Dec 29, 2008 6:13 pm

Sehr praktisch um mit regulären Ausdrücken zu spielen: http://regexp-evaluator.de

SimonSchaufi · **Posted:** Mon Dec 29, 2008 6:44 pm

wo wir gerade bei RegEx sind finde ich den persönlich besser: http://gskinner.com/RegExr/

Vorteil: Man sieht immer gleich, ob was passt oder nicht

NaN · **Posted:** Thu Jun 04, 2009 6:17 pm

Hier habe ich noch etwas interessantes gefunden für all jene, die ihre Seite Valide machen wollen, aber mit den Fehlermeldungen nichts anzufangen wissen:

http://www.usability-design.at/validator.htm

cyberman · **Posted:** Wed Aug 05, 2009 10:37 am

Hier gibts das Buch "Einführung in XHTML, CSS und Webdesign" von dem bekannten Webworker Michael Jendryschik online / for free zu lesen.

http://jendryschik.de/wsdev/einfuehrung/

greeng · **Joined:** Thu Nov 12, 2009 11:23 pm **Posts:** 34

danke. ach und nen tritt in den hintern hätt ich schon verdient für die dummen fragen. das war ja mal wieder mega einfach!
DANKE

nhaack · **Posted:** Sat Jan 09, 2010 11:20 pm

Gerade drüber gestolpert:

Quote:

Welcome to Perishable Press! This article, Stupid htaccess Tricks, covers just about every htaccess “trick” in the book, and is easily the site’s most popular offering. In addition to this htaccess article, you may also want to explore the rapidly expanding htaccess tag archive. Along with all things htaccess, Perishable Press also focuses on (X)HTML, CSS, PHP, JavaScript, security, and just about every other aspect of web design, blogging, and online success. If these topics are of interest to you, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment

http://perishablepress.com/press/2006/0 ... ss-tricks/

Ist zwar auf Englisch aber sehr umfangreich und sicher für jeden, der öfters mal mit htaccess arbeitet, eine hilfreiche Ressource.

Beste Grüße
Nils

NaN · **Posted:** Sat Mar 20, 2010 12:12 am

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

cyberman · **Posted:** Wed Apr 07, 2010 10:06 am

Und noch was für die Liste - gerade reingezwitschert

http://www.dotwired.de/2010/04/06/wie-m ... igner-wird

NaN · **Posted:** Wed Apr 21, 2010 2:31 pm

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.

MoYapro · **Posted:** Wed Apr 21, 2010 2:38 pm

Auf Firebug wollte ich auch gerade hinweisen. Ich kann einfach nicht leben ohne dieses Tool... oder so aehnlich. Auf jeden Fall ist es sehr hilfreich und es gibt auch dafuer noch weitere Nuetzliche 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.

Nützliche Links (Tutorials, Beispiele, Doku)

Who is online