Untenstehend finden Sie einige Ressourcen, die einem beim Erstellen einer Webseite weiterhelfen können.
HTML- und CSS-Tutorials und -Referenzen findet man zahlreich im Netz. Hier eine kleine Auswahl:
w3schools – bietet einerseits Lehrgänge zu allen möglichen Webtechnologien an (neben HTML und CSS, sogar zu Bootstrap), andererseits kann in der Referenz jedes HTML-Tag und jede CSS-Regel nachgeschlagen werden. Das Praktische: man kann alle Beispiele direkt in der Webseite ausprobieren und selbst abändern! (englisch)
codecademy – Online-Kurs mit Aufgaben direkt im Browser. (englisch)
code.makery – Online-Kurs zu HTML, CSS und Bootstrap. (deutsch)
Alle modernen Browser haben einen «Developer»-Modus eingebaut. Mit Hilfe dessen lassen sich Webseiten und ihr HTML- und CSS-Code genau untersuchen. Man kann sogar kleine Änderungen direkt im Browser testen. Diese werden gleich angezeigt, jedoch nicht abgespeichert.
Google Chrome | Safari Web Inspector | Firefox Page Inspector | MS Edge Developer Tools
Falls man Dateien zum Webserver kopieren muss, benötigt man ein FTP-Client. Die unten genannten Programme unterstützen neben FTP zahlreiche andere Übertragungsarten. Zugangsinformationen sollte man vom Hosting-Anbieter erhalten.
Die Farbwahl bei einer Webseite ist nicht immer einfach. Falls man ein Template verwendet, hat man ev. bereits Farben und sollte vielleicht die Farben im Firmenlogo entsprechend anpassen. Hat man noch gar keine Farben, so gibt es Seiten im Netz die einem bei der Paletten-Wahl unterstützen.
Colourlovers – Farbpaletten und einzelne Farben auswählen
Paletton – selbst eine Farbpalette zusammenstellen
Adobe Color CC – selbst eine Farbpalette zusammenstellen oder aus einer Vielzahl vorbereiten Paletten wählen
HTML Color Codes – Farb-Mixer und -Konvertierer. Zudem Infos und Tutorials zu Farben im Web
Passendes Bildmaterial ist nicht immer einfach zu finden. Es existieren aber immer mehr Sammlungen, die völlig Lizenz-freies Bildmaterial anbieten. Diese Bilder dürfen auch gewerblich verwendet werden.
Unsplash | Gratisography | Pexels | Snapwire Snaps | Foodies Feed | Life of Pix | Iso Republic | Designer Pics | Startup Stock Photos | Picjumbo | SplitShire | Stocknap | Picography | Pixabay | Kaboompics | Fancycrave | Coverr
Für Bootstrap findet man viele sogenannte Themes. Diese verändern das Aussehen einer Bootstrap-Seite, ohne dass man den HTML-Code anpassen muss – man verwendet einfach die bekannten Bootstrap-Komponenten und den -Grid.
Bootswatch | Official Themes | Start Bootstrap | Shapebootstrap | Wrapbootstrap | Bootstrap Templates
Bevor man sich für ein CMS- oder ein E-Commerce-Produkt entscheidet, sollte man dieses ausprobieren. Falls man dies nicht online tun kann, gibt es bei den meisten Produkten die Möglichkeit, diese selbst zu installieren. Hierzu benötigt man aber einiges an Software: einen Webserver mit einer Server-seitigen Skript-Sprache (wie PHP oder ASP) und eine Datenbank dazu.
Zum Glück gibt es vorgefertigte Systeme welche diese Dinge bereits mitbringen. Man kann sich also ein sogenanntes Betriebssystem-image herunterladen und in einem virtuellen Computer starten. Möchte man z.B. Wordpress lokal ausführen, geht man wie folgt vor:
Viele Templates sind zwar frei verfügbar, aber je nach Lizenz unter welcher sie veröffentlicht wurden, heisst das nicht, dass man sie gratis für gewerbliche Zwecke einsetzen kann! Bevor ein Template für die Webseite verwendet wird, sollte man das also genau abklären!
Das selbe gilt für verwendetes Bildmaterial. Am Besten erstellt man dieses selbst oder man verwendet eine Bilder-Bibliothek, welche die Rechte genau festlegt. Bei einer Google-Bilder-Suche ist meistens nicht klar, ob und unter welchen Bedingungen man die gefundenen Bilder verwenden darf.
Artikel «Beobachter» | Artikel «Computerwoche» | Broschüre zu Urheberrecht des IGE
Die in dieser Schulung verwendeten Bilder und Templates wurden nicht auf ihre Lizenz überprüft, da sie nur zu Schulungszwecken verwendet werden!