Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
#1 19. September 2010 16:32
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Nützliche Links für Webdesigner
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 Themapraktische 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.htmlTipps 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.htmlRunde Ecken http://www.andreas-kalt.de/webdesign/tu … unde-ecken
Einfache valide Vorlagen (Dinge, worauf man bauen kann ) - http://blog.html.it/layoutgala/
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 .
Offline
#2 16. November 2010 19:10
- Tobias_Gl
- probiert CMS/ms aus
- Ort: Siegen
- Registriert: 09. November 2010
- Beiträge: 69
- Webseite
Re: Nützliche Links für Webdesigner
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.
Offline
#3 16. November 2010 21:44
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Danke für deine Ergänzung!
Offline
#4 22. März 2011 02:19
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.435
Re: Nützliche Links für Webdesigner
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
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#5 22. März 2011 02:26
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.435
Re: Nützliche Links für Webdesigner
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.
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#6 22. März 2011 02:26
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.435
Re: Nützliche Links für Webdesigner
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.
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#7 22. März 2011 02:28
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.435
Re: Nützliche Links für Webdesigner
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.
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#8 01. September 2011 18:28
- noober
- kennt CMS/ms
- Registriert: 26. April 2011
- Beiträge: 151
Re: Nützliche Links für Webdesigner
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
Offline
#9 12. Juni 2012 09:09
- faglork
- arbeitet mit CMS/ms
- Ort: Fränkische Schweiz
- Registriert: 15. Dezember 2010
- Beiträge: 1.152
- Webseite
Re: Nützliche Links für Webdesigner
Wer mal ein paar Inspirationen braucht, was heute mit CSS möglich ist:
--> 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
Offline
#10 26. November 2014 21:01
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Hier wieder mal ein Link zum Thema CSS (in englisch) - eine Anleitung, wie man saubere, einfach zu handhabende und skalierbare CSS schreibt
Offline
#11 29. November 2014 23:31
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.227
- Webseite
Re: Nützliche Links für Webdesigner
Danke Super Thread,
da gibt vieles das ich noch nicht kenne.
http://www.google.com/fonts
kann ich noch dazu geben
MfG
Jan
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
#12 29. Januar 2015 23:25
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Noch ein Link - wieder zu CSS, dieses Mal ein Spickzettel zu den CSS-Feinheiten
Offline
#13 17. Februar 2015 23:32
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
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
Offline
#14 17. Februar 2015 01:12
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.227
- Webseite
Re: Nützliche Links für Webdesigner
http://www.htmllion.com/templates.html
Freie responsive templates
MfG
Jan
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
#15 17. Februar 2015 08:39
- kampkrusty
- Server-Pate
- Registriert: 03. April 2011
- Beiträge: 263
Re: Nützliche Links für Webdesigner
http://www.htmllion.com/templates.html
Freie responsive templatesMfG
Jan
Ich weiß, "einem geschenkten Gaul..." usw., aber die Seiten sind doch alle gleich im Aufbau, oder guck ich schief?
ff-jena-mitte.de
Offline
#16 17. Februar 2015 09:01
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.435
Re: Nützliche Links für Webdesigner
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.
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#17 17. Februar 2015 09:04
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.227
- Webseite
Re: Nützliche Links für Webdesigner
@Kampkrusty,
am Untenseite sind noch Links mit weitere CSS Instruktionen.
Stimmt, Templates sind nicht gerade spannend aber sehr ordentlich so zu sehen.
MfG
Jan
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
#18 27. Juni 2015 14:17
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.227
- Webseite
Re: Nützliche Links für Webdesigner
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
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
#19 28. Juni 2015 17:54
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Danke fürs Einstellen hier ... erinnert mich daran, dass für die .de eine eigene Theme-Sektion auch nicht schlecht wäre.
Offline
#20 06. Juli 2015 07:22
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Hier mal ein ergänzender Link zu einem CSS-RGBA-Generator für die Berechnung von Farb-Transparenzen
Offline
#21 06. Oktober 2015 10:04
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Interessant - hat doch die US-Regierung einfach mal so einen Webdesign-Standard für deren Behörden festgelegt
https://playbook.cio.gov/designstandards/
natürlich mit voller WCAG 2.0 Kompatibilität. In DE als #Neuland undenkbar ...
Offline
#22 06. Oktober 2015 14:07
- faglork
- arbeitet mit CMS/ms
- Ort: Fränkische Schweiz
- Registriert: 15. Dezember 2010
- Beiträge: 1.152
- Webseite
Re: Nützliche Links für Webdesigner
Zugänglichkeit: Mythen und falsche Vorstellungen
https://yatil.de/zugaenglichkeit-mythen … tellungen/
Servus,
ALex
Beitrag geändert von faglork (06. Oktober 2015 14:08)
Offline
#23 02. November 2015 00:29
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
Hier wieder mal eine Regelsammlung für (besseres) HTML, CSS und JavaScript
Offline
#24 19. April 2016 09:48
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Nützliche Links für Webdesigner
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/
Offline
#25 26. Januar 2018 12:38
- Pepe
- hat von CMS/ms gehört
- Registriert: 30. August 2017
- Beiträge: 15
Re: Nützliche Links für Webdesigner
Das ist ja mal ein Klasse Thread, der mir jetzt erst auffällt.
Niveau sieht nur von unten aus wie Arroganz.
Offline