Knowledgebase:Webdesigner Ressourcen
Nützliche Ressourcen für Webdesign und Webmaster
Contents
Webdesign
Favicon
Ein Favicon (von Favorit und Icon) ist ein kleines, meist 16×16 oder 32×32 Pixel großes Bildchen, welches in der Adresszeile eines Browsers links vom URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Es taucht auch in der Lesezeichenleiste (Favoriten) und unter Windows beim Speichern einer Seite auf dem Desktop auf.
- Favicon.de
- Favicon-Suchmaschine
- Suche nach 200.000 Icons
- Patchwork-Projekt (Sammlung von 1024 Favicons)
- [1]
Online Tools
Templates Portale
- http://templates.arcsin.se/
- http://cssgalerie.net/
- http://www.dark-i.com/
- http://www.designshack.co.uk/
- http://www.casablanca.cz/
- http://www.free-css-templates.com
- http://www.oswd.org/
- http://www.openwebdesign.org/
- http://www.4templates.com/
- http://www.templatemonster.com/
- http://www.freelayouts.com/
- http://templatenavigator.com/
CSS Layouts
- große CSS Quellensammlung von DrWeb.de
- stu nicholls | CSS PLaY
- YAML - Sehr flexibles CSS Framework
- CSS-Vorlagen zum Kopieren (mit Ansichtsbeispiel)
- CSS-Listings mit Beispielen und Tutorials
- CSS-Listings mit Beispielen und Tutorials
- CSS-Boxen mit Beispieldarstellung
- CSS-Baukastenseite für Listen - in Navigationsmodulen einsetzbar
- Cascading Stylesheets Stil mit <stil> (Es gibt auch ein Buch)
- CSS-Templates kostenlos
- DHTML-, JS- und CSS-Tricks
Farben (Abstimmung)
ColorBlender - die kostenlose online Farbabstimmung und der Farbpalettendesigner
Horizontale Menüs
Vertikale Menüs
Programmierung
Ajax
Bilder (Fotos & Grafiken)
- Stock.XCHNG
- pixelio.de ist Ihre kostenlose Bilddatenbank für lizenzfreie Fotos
- Google Bildsuche
- Royalty free photos
- Photocase
- Flickr
- Stock.XCHNG
Icons
Gute sammlung zu vielen Icon Ressourcen http://sw-guide.de/webdesign-und-entwicklung/icon-sammlungen/
SILK Icons (free) http://www.famfamfam.com/lab/icons/silk/
Werbung
PageEar (Eselsohr)
Mustercode zum Einbinden
<head> <title></title> <script src="/dein_pageear_server_pfad/AC_OETags.js" type="text/javascript"></script> <script src="/dein_pageear_server_pfad/pageear.js" type="text/javascript"></script> </head> <body> <!-- Dein Inhalt Anfang --> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <!-- Dein Inhalt Ende--> <script type="text/javascript"> writeObjects(); </script> </body> </html>
Ändern der Bilder und des Links
Das ändern der Bilder ist sehr einfach, man muss nur ein Bild mit der richtigen Grösse haben für das kleine (100px * 100px) und ein Bild für das aufgeklappte Banner(500px * 500px). Man kann die Grössen natürlich auch variieren, dies sind aber die Standard Grössen.
Um die Bilder zu ersetzten, muss man die Datei pageear.js mit einem Editor öffnen und auf Zeile 18(pagearSmallImg), sowie Zeile 23(pagearBigImg) die Bilder ersetzen. Das Bild auf Zeile 18 ist das kleine, das angezeigt wird wenn die Werbung nicht aufgeklappt ist, das Bild auf Zeile 23 ist das grosse, das angezeigt wird wenn die Werbung aufgeklappt ist. Nun kann man einfach das alte mit dem neuen ersetzen.
- Datei pageear.js
// URL zum kleinen Bild / URL to small image var pagearSmallImg = '/pageear_s.jpg';
// URL zum großen Bild / URL to big image var pagearBigImg = '/pageear_b.jpg';
Ändern des Links
Um den Link zu ändern, auf den die Werbung verweist, geht man mit einem Editor ins pageear.js auf Zeile 38(jumpTo), dort kann man einfach die URL ersetzen. Um den Link in einem Neuen Fenster zu öffnen oder im selben wie die Werbung, gibt es auf Zeile 41(openLink) die Möglichkeit dies zu ändern: 'self' für im gleichen Fenster, 'new' in einem neuen Fenster.
// Zu öffnende URL bei klick auf die geöffnete Ecke // URL to open on pageear click var jumpTo = 'http://www.beispiellink.com' // Öffnet den link im neuen Fenster (new) oder im selben (self) // Browser target (new) or self (self) var openLink = 'self';
Accessibility Links (Barrierefreiheit)
- Grundlagen und Know-How
- Windows Tool, bietet unterstützung bei barrierefreier Designentwicklung
- Accessibility Validator
- Noch ein anderer Validator
- Tablin - HTML Table linearizer
Flash
Hier findest Du alles über Flashs. Flash Community :: Forum - Downloads - Tutorials Flashhilfe.de
SWFObject: Javascript Flash Player detection and embed script
Software (Tools)
FTP Programme
Editor Programme
- Online CSS StyleSheet Generator
- Ein Online-Generator zur Erstellung eines Basis-StyleSheets. Für externe oder interne StyleSheets, mit Vorschau.
- TopStyle CSS-Editor
- Ein Editor der beim Erstellen der CSS für DeDi in der freien Lite-Version durchaus ausreicht. Die erstellten CSS-Dateien können dann ohne weiteres in DeDi importiert werden. Wer noch mehr möchte kann sogar die Pro-Version vor Kauf testen.
Webbrowser Firefox Nicht zu vergessen, ein ordentlicher Browser für alle gängigen Betriebssysteme.
fireFTP 0.88 Erweiterung für Firefox um einen FTP-Client.
PSPad - Editor für den Entwickler Editor der Superklasse. Für Layoutarbeiten sehr zu empfehlen.
Offline Browser Tools
Nachschlagewerke
- SELFHTML
- Referenz zu HTML, PERL, CSS, Java Script usw.
