Nützliche Links (Tutorials, Beispiele, Doku)

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
NaN

Nützliche Links (Tutorials, Beispiele, Doku)

Post by NaN »

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  :)
Last edited by NaN on Tue Mar 09, 2010 5:00 pm, edited 1 time in total.
cyberman

Re: Nützliche Links

Post by cyberman »

Besten Dank für die ausführliche Zusammenstellung!
SimonSchaufi

Re: Nützliche Links

Post by SimonSchaufi »

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

http://www.yaml.de
nhaack

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by nhaack »

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

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by cyberman »

nhaack

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by nhaack »

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

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by SimonSchaufi »

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
Last edited by SimonSchaufi on Mon Dec 29, 2008 6:47 pm, edited 1 time in total.
NaN

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by NaN »

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
Last edited by NaN on Sat Feb 20, 2010 7:28 pm, edited 1 time in total.
cyberman

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by cyberman »

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
Forum Members
Forum Members
Posts: 34
Joined: Thu Nov 12, 2009 11:23 pm

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by greeng »

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

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by nhaack »

Gerade drüber gestolpert:
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

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by NaN »

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
Last edited by NaN on Sat Mar 20, 2010 4:46 am, edited 1 time in total.
cyberman

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by cyberman »

Und noch was für die Liste - gerade reingezwitschert

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

Nützliche Tools

Post by NaN »

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.
Last edited by NaN on Wed Apr 21, 2010 2:36 pm, edited 1 time in total.
MoYapro

Re: Nützliche Links (Tutorials, Beispiele, Doku)

Post by MoYapro »

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.
Last edited by MoYapro on Wed Apr 21, 2010 2:43 pm, edited 1 time in total.
Locked

Return to “Layout und Design”