Auf einen Blick. 1 Ein eigener Webauftritt in drei Minuten Wer braucht was die eigene Website planen... 31

Transkript

1 Auf einen Blick Auf einen Blick 1 Ein eigener Webauftritt in drei Minuten Wer braucht was die eigene Website planen Ein besserer Webauftritt in drei Stunden Die ersten Schritte mit HTML und CSS Die eigene Website erstellen Die eigene Website im Internet Ein Kontaktformular anlegen Mehr Interaktivität mit JavaScript Die Site spielend finden und benutzen Suchmaschinenoptimierung, Usability, Accessibility Noch mehr Inhalt Videos, Fotos, Karten und soziale Netze einbinden Marketing und Werbung Gutes tun und darüber reden Mit der eigenen Website Geld verdienen Starke Werkzeuge so nutzen Sie Ihr neues Wissen für noch bessere Websites

2 Für wen ist dieses Buch? Ein eigener Webauftritt in drei Minuten Die Visitenkarte des Zauberers Auswahl des Anbieters Anmeldung Welche Technik lässt das Web ticken? Seite oder Site? Domain Fazit Wer braucht was die eigene Website planen Wie sieht eine gute Website aus? Warum wollen Sie eine Website? Was? Wen? Wie? Womit? Was wollen Sie erreichen? Wen wollen Sie ansprechen? Wie wollen Sie Ihr Ziel erreichen? Womit wollen Sie arbeiten? Beispiel: Tangoschule»Aro Argentino« Umsetzung planen Sitemap Seitenübersicht Zeitplan Fazit

3 Inhalt 3 Ein besserer Webauftritt in drei Stunden 43 5 Die eigene Website erstellen Für den Dienst anmelden und die Site einrichten Nutzerkonto und Blog anlegen Den Seitenaufbau festlegen Die Bilder festlegen Das Layout umsetzen Fazit Die ersten Schritte mit HTML und CSS Die Vorteile einer eigenen Website Alle Webseiten bestehen aus HTML Sie schreiben selbst HTML Woher kommt die Gestaltung? Das style-attribut Das style-element Die externe CSS-Datei Das richtige Werkzeug der HTML-Editor Was sollte ein HTML-Editor für Einsteiger können? Empfehlenswerte HTML-Editoren Besser lesbares HTML für Browser und Mensch Woher kommen HTML und CSS? HTML5 was bedeutet das? Der doctype Das charset Schaffen Sie Platz für mehr Übersicht Notizen für Sie selbst: Kommentare Validieren Sie Ihre Seiten Fazit Das Konzept Die Ziele formulieren Den Inhalt konzipieren Die Gestaltung konzipieren Den Inhalt mit HTML anlegen Die Startseite Die Praxisseite Die Teamseite Die Kontaktseite Die Gestaltung mit CSS Die Layoutelemente und ihre Darstellung im Browser Feste oder flexible Abmessungen? Die Abmessungen der Layoutelemente Die Position der Layoutelemente Die Gestaltung verfeinern Fazit Die eigene Website im Internet Die Website ins Internet bringen Speicherplatz auf einem Webserver FTP Dateien auf den Webserver kopieren Berechtigungen und die.htaccess-datei so konfigurieren Sie, was Besucher sehen können Eine eigene Domain Ihre Adresse im Web Das Favicon Browser ist nicht gleich Browser Die Unterschiede in der Darstellung herausfinden Die Unterschiede in der Darstellung ausgleichen Bildschirm ist nicht gleich Bildschirm Was passiert bei veränderter Fenstergröße? Relative Angaben statt pixelgenauer Werte

4 Inhalt Mehrere Layouts mit festen Werten oder ein Layout mit flexiblen Werten? Ein separates Stylesheet für schmale Bildschirme Gerät ist nicht gleich Gerät Was muss man bei Touchbedienung beachten? Ein separates Stylesheet für Drucker Mit Neugier zu immer besseren Websites Fazit Arrays Mehrdimensionale Arrays Ereignisse Beispiel: Ein schlaues Formular Den Cursor versetzen Kommentarfeld prüfen Alternative zum Prüfen des Kommentarfelds Adresse prüfen Text auf der Seite einfügen Text auf der Seite elegant ändern Ein Kontaktformular anlegen Kontaktformular oder -Adresse? Pflichtangaben zum Kontakt Auf Fehlersuche Debugging Debuggen mit Firebug Debuggen mit Safari Fazit Die Standardlösung Ein einfaches Kontaktformular Planung und Gestaltung Planung Gestaltung Der HTML-Code für unsere Arzt-Beispielsite Das Script auf dem Server Fazit Mehr Interaktivität mit JavaScript Das erste JavaScript Was tun, wenn JavaScript nicht aktiv ist? Ein schnelles Skript für die Beispielwebsite JavaScript und HTML trennen Funktionen Die Site spielend finden und benutzen Suchmaschinenoptimierung, Usability, Accessibility Suchmaschinenoptimierung Wie sucht eine Suchmaschine? PageRank Suchmaschinen wollen auch nur Menschen sein Schwarze Magie hilft nicht Bezahlte Suchergebnisse? SEO für die eigene Website Usability Benutzerfreundlichkeit Der wichtigste Grundsatz: Nachdenken Usability von Anfang an Die häufigsten Fehler vermeiden Accessibility Barrierefreiheit Fazit Variablen

5 Inhalt 10 Noch mehr Inhalt Videos, Fotos, Karten und soziale Netze einbinden Google Maps YouTube Ein Video einbinden Ein Video hochladen Alternativen zu YouTube Fotodienste Flickr und Google Photos Slideshare Soziale Netzwerke Facebook und Twitter Facebook-Buttons Datenschutz bei Facebook Twitter Fazit Google Places, Facebook-Angebote und Foursquare Wikipedia PR-Portale Fazit Mit der eigenen Website Geld verdienen Welche Möglichkeiten gibt es? Der Webshop Produktunabhängige Zahlsysteme Direkte Spenden und Abrechnung über Flattr Ein Beispielwebshop Aro Argentinos Fanshop Die Situation Die Lösung Die Umsetzung Fazit Marketing und Werbung Gutes tun und darüber reden Klassische Werbung Werbung im Internet Google AdWords Facebook-Anzeigen Marketing im Internet Organische Links Linktausch Verzeichnisse Facebook Twitter Zeitungen, Zeitschriften, Blogs Kommentare in Blogs und Foren XING Podcasts Starke Werkzeuge so nutzen Sie Ihr neues Wissen für noch bessere Websites Was Ihnen Ihr neues Wissen ermöglicht Werkzeuge für Einsteiger Can I use HTML5 Please HTML Color Codes ColorZilla Farbpipette Adobe Color CSSmatic Werkzeuge für Fortgeschrittene normalize.css Individuelle Schriftarten Glyphicons FREE Font Awesome

6 Adobe Topcoat JSLint HTML5 Shiv Werkzeuge für Profis HTML5 Boilerplate CSS3 PIE Modernizr jquery FitText Nivo Slider jquery UI jquery Mobile Bootstrap Fazit Anhang A Übersicht der wichtigsten HTML5-Elemente, CSS3-Eigenschaften und -Selektoren A.1 HTML5-Elemente A.2 CSS3-Eigenschaften A.3 CSS3-Selektoren B Glossar Index