Die Homepage-Schule - PDF

Transkript

1

2

3 Die Homepage-Schule - PDF Inhaltsverzeichnis Die Homepage-Schule Widmung Der effektivste Weg zur eigenen Website Impressum Inhaltsübersicht Inhaltsverzeichnis Vorwort Teil I: Grundlagen: Wissenswertes übers Web 1 Das Internet und das Web 1.1 Computer und Netzwerke Ein LAN ist ein kleines Netzwerk Router verbinden Netzwerke miteinander Ein großes Netzwerk ist ein WAN 1.2 Das Internet ist einfach nur ein Computernetzwerk 1969 Die Keimzelle des Internets Was man früher im Internet so gemacht hat: und FTP 1.3 Das World Wide Web: Hypertext im Internet 1.4 Hypertext ist Text mit Hyperlinks 1.5 Internet und Web sind also nicht wirklich dasselbe 1.6 Auf einen Blick 2 Das World Wide Web: Ein weltweites Gewebe 2.1 Das Web besteht aus Webseiten 2.2 Hyperlinks verknüpfen Webseiten miteinander 2.3 Begriffe:»Website«,»Webseite«und»Homepage«Eigentlich korrekt:»website«,»webseite«und»homepage«im Alltag:»Homepage«und»Webseite«statt»Website«Uns fehlt im Deutschen ein gutes Wort für»website«2.4 Orientierung im Web: Navigation Eine Website verhält sich anders als ein Buch Navigation dient zur Orientierung innerhalb der Site 2.5 Auf einen Blick 3 Die Browser: Surfen im Web 3.1 Die bekanntesten Browser 3.2 Die Browserbedienung im Überblick Blättern durchs Web: Die Symbole Zurück und Vor Die Symbole Abbrechen und Aktualisieren Zurück nach Hause: Das Symbol Startseite 3.3 Lesezeichen: Ihr Adressbuch für das Web Lesezeichen sammeln auf einer Symbolleiste Lesezeichen für Fortgeschrittene

4 3.4 Suchen und Finden im Browser 3.5 Auf einen Blick 4 Die Suchmaschinen: Zeichen vergleichen 4.1 Suchmaschinen durchsuchen nicht live das Web 4.2 Der Ablauf einer Websuche Schritt 1: Der Benutzer gibt die Suchbegriffe ein Schritt 2: Die Suchmaschine sucht und findet Schritt 3: Die Ergebnisseite wird angezeigt 4.3 Zeichen vergleichen: Suchmaschinen denken nicht 4.4 ToDo: Eine Liste mit Suchbegriffen erstellen 4.5 Auf einen Blick 5 Das Domain Name System: Die automatische Auskunft 5.1 IP-Adressen Die Telefonnummern des Internets 5.2 Domains und IP-Adressen: Namen statt Nummern 5.3 Der Aufbau von Domain Namen Die Top Level Domain Die Second Level Domain (und alle darunter) 5.4 Der Aufbau einer Webadresse (URL) 5.5 ToDo: Gedanken über eine Domain machen 5.6 Auf einen Blick 6 Die Webseiten: Quelltext auf dem Webspace 6.1 Der Quelltext ist der Bauplan der Webseite 6.2 Browser bekommen den Quelltext vom Webserver»Webspace«: Speicherplatz zum Veröffentlichen im Web Überblick: Der Browser holt eine Webseite Grafiken werden erst nach dem Quelltext abgeholt Grafiken ausstellen im Browser 6.3 Quelltext besteht aus HTML, CSS und JavaScript Die Ordnung: HTML ist nicht hübsch, aber flexibel Das Styling: CSS gestaltet die HTML-Elemente HTML und CSS: Die Trennung von Inhalt und Gestaltung JavaScript beeinflusst das Verhalten der Webseite 6.4 Auf einen Blick 7 Webpublishing: Der Weg zum Content Management 7.1 Webpublishing war ursprünglich statisch So funktioniert statisches Webpublishing Statische Webseiten sind umständlich zu pflegen 7.2 Statisches Webpublishing wird interaktiv Das Web ist ein interaktives Medium Ein Kontaktformular als Beispiel zur Interaktion Formulardaten werden von einer Webanwendung verarbeitet 7.3 Dynamisches Webpublishing: Content Management So funktioniert ein Content Management System (CMS) Ein CMS auf dem eigenen Webspace erfordert Know-how

5 Beispiele: WordPress, Joomla!, Contao, Drupal und TYPO3 7.4 Auf einen Blick 8 Social Media, Blogs und Baukästen 8.1 Social Media: Im Web aktiv ohne eigene Website Themenorientierte Communities statt eigener Homepage Soziale Netzwerke: Präsentieren Sie sich selbst Soziales Netwerk versus eigene Homepage 8.2 Blogger dir einen: Baukästen für Blogs Blogs sind einfache CMSysteme und leicht zu bedienen Beispiele: Fertigblogs vom Bloganbieter 8.3»Instant Websites«: Baukästen für Websites Für wen kommt ein Website-Baukasten in Frage? Beispiele: Jimdo, Webnode, Weebly & Co. Die Website zu den Baukästen:»websitetooltester.com«Offline-Baukästen: Teurer und nicht so flexibel 8.4 Auf einen Blick 9 Gute Seiten, schlechte Seiten 9.1 Die Webseite ist zu Gast beim Surfer 9.2 Überblick: Sieben Qualitätskriterien 1. Der Inhalt: Darum kommen die Besucher 2. Die Gestaltung: So sieht s aus 3. Die Navigation: Orientierung geben 4. Die Performance: Die Entdeckung der Langsamkeit 5. Die Zugänglichkeit:»Wie Sie sehen, sehen Sie nichts«6. Der Quelltext: Verborgene Qualitäten 7. Die Interaktion: Mit den Besuchern kommunizieren 9.3 Die Mischung macht s: Bibliothek und Galerie Die Bibliothek: form follows function Die Galerie: form without function Bibliotheken und Galerien haben unterschiedliche Prioritäten Fazit 9.4 Auf einen Blick Teil II: Vorbereitung: Die Homepage planen 10 Die Rahmenbedingungen festlegen 10.1 Überblick: Der rote Faden durch das Labyrinth 10.2 Die Rahmenbedingungen: Ziele, Zeit und Zaster Ihre Ziele und die der Besucher Die Zeit: Bis zur Freischaltung und danach Der Zaster: Für die Erstellung und für die Wartung 10.3 Selber bauen, bauen lassen oder Baukasten 10.4 ToDo: Surftour was machen die anderen? 10.5 Auf einen Blick 11 Die Konzeption: Gedanken ordnen 11.1 Die vier Bereiche zur Planung einer Website

6 11.2»Technik«: Das Fundament für die Website Die private Homepage Die Freiberufler-Homepage Die Homepage für Firmen, Vereine und Schulen Der kleine Online-Shop 11.3»Inhalte«: Darum kommen Ihre Besucher Schritt 1: Inhalte sammeln Schritt 2: Inhalte sortieren Kategorien und Hierarchien Schritt 3: Inhalte erstellen 11.4»Funktionen«: Interaktion und Verwaltung Schritt 1: Funktionen sammeln Schritt 2: Funktionen sortieren Schritt 3: Funktionen erstellen 11.5»Gestaltung«: So soll es aussehen Skizzen erstellen Das Layout erstellen 11.6» Wartung«: Die Pflege nach der Freischaltung Eine Website ist ein Prozess Wenn sich die Anforderungen ändern 11.7 Auf einen Blick 12 Webhosting: Domain und Webspace 12.1 Untermieter: Webspace mit Subdomain 12.2 Domain überprüfen: Ist»mueller.de«noch frei? 12.3 Wenn Ihr Wunschname vergeben ist Möglichkeit 1:»pmueller.de«eine andere DE-Domain Möglichkeit 2:»mueller.info«eine andere Top Level Domain Möglichkeit 3: Domain kaufen der Handel mit Domains 12.4 Der eigene Webspace Überblick über Webhoster: webhostlist.de Verwirrende Preise: Null Euro Sternchen Der Einstieg: Domain und Mail Die Mittelklasse: Webspace mit PHP und Datenbank Die Oberklasse: Premiumpakete für Experten 12.5 Fachbegriffe rund um Web- und Mailspace Wie viel Speicherplatz wird benötigt? Wie viel Traffic (Datentransfer) brauchen Sie? Der Zugang zum Webspace: FTP & Co. Serverseitige Skriptsprachen: PHP & Co. Datenbanken: MySQL und phpmyadmin Sonstige Fachbegriffe rund um den Webspace Der Mailspace: POP3, IMAP und Webmail 12.6 Auf einen Blick Teil III: Umsetzung: Eine Homepage erstellen 13 Eine Homepage mit Jimdo erstellen 13.1 Bevor Sie beginnen...

7 13.2 Jimdo im Überblick 13.3 Die Registrierung bei Jimdo Schritt 1: Web-Adresse und Mail-Adresse eingeben Schritt 2: Captcha eingeben und Website erstellen Schritt 3: Die mit den Zugangsdaten 13.4 Jimdo kennen lernen First Contact Die Beispielsite von Jimdo in der Übersicht Die erste Anmeldung an Ihrer Homepage Zu Ihrer Sicherheit: Das zugeschickte Passwort ändern Die Layoutbereiche einer Jimdo-Page 13.5 Den Inhalt auf der Startseite ändern Die Überschrift auf der Startseite ändern Text auf der Startseite löschen und neu eingeben Einen Hyperlink erstellen 13.6 Ansichts- und Bearbeitungsmodus bei Jimdo 13.7 Auf einen Blick 14 Die Homepage bei Jimdo gestalten 14.1 Entdecke die Möglichkeiten in fünf Schritten 14.2 Schritt 1: Das Layout auswählen Die Layout-Vorschau Ein neues Layout zuweisen 14.3 Schritt 2: Den Hintergrund ändern 14.4 Schritt 3: Das Titelbild austauschen 14.5 Schritt 4: Den Titel der Website ändern 14.6 Schritt 5: Die Navigation anpassen 14.7 Auf einen Blick 15 Die Homepage bei Jimdo mit Inhalten füllen 15.1 Jede Seite beginnt mit einer»überschrift 1«15.2 Die Elemente»Textfeld«und»Bild mit Text«15.3 Nur ein Bild: Das Element»Bild«15.4 Mehrere Bilder: Das Element»Bilder-Galerie«15.5 Ein funktionierendes Kontaktformular 15.6 Weitere nützliche Elemente im Überblick 15.7 Auf einen Blick 16 Schreiben im Web für Menschen 16.1 Wie Menschen im Web lesen Und es hat Zoom gemacht: Lesen am Bildschirm Webseiten werden nicht gelesen, sondern überflogen Zwischenlandung: Scannen Skimmen Lesen 16.2 Verständliche Texte: Die Hamburger Pyramide Pulitzer und das Hamburger Verständlichkeitsmodell Die umgekehrte Pyramide: Das Wichtigste am Anfang 16.3 Übersichtliches Schreiben: Texte scannbar machen

8 Überschriften und Zwischenüberschriften Schreiben Sie kurze Absätze Heben Sie wichtige Worte hervor Benutzen Sie Listen 16.4 Abstände und Schriften: Fließtext gestalten Abstand halten im Fließtext Schnörkel oder nicht Schnörkel: Schriften und Serifen Sie können nicht jede Schriftart benutzen 16.5 Der Umgang mit Hyperlinks Linken Sie nicht nur des Linkens wegen Das»Hier«-Syndrom: Klicken Sie hier Benutzen Sie Linklisten Beschreiben Sie Downloadlinks deutlich 16.6 Zürich, die Stadt, die die Römer Turicum nannten 16.7 Übung: Caipirinha in Jimdo Rezept für Caipirinha die Ausgangssituation Die Überschrift:»Rezept für eine Caipirinha«Der Teaser: Blickfang und Einleitung Zutaten und Utensilien: Überschrift 2 und Aufzählung Die Zubereitung: Überschrift und Nummerierung Das Jimdo-Menü Style zur Gestaltung des Fließtextes 16.8 Auf einen Blick 17 Grafiken fürs Web vorbereiten 17.1 Webgrafiken Das Wichtigste in Kürze Grafiken laden länger als Text Frisch aus der Kamera: Bildgröße und Dateigröße Im Web sind nur GIF, JPEG oder PNG erlaubt 17.2 Grafiken Woher nehmen und nicht stehlen? Vorsicht bei Grafiken von anderen Webseiten Die Google-Bildersuche ist keine gute Quelle pixelio.de kostenlose Bilddatenbank für lizenzfreie Fotos CreativeCommons und flickr.com Andere Websites mit lizenzfreien Fotos 17.3 Fotos für das Web vorbereiten mit picnik.com Ohne Registrierung: Bilder mit Picnik online bearbeiten Ein Foto in Picnik bearbeiten»zuschneiden«: Einen Ausschnitt bestimmen»größe ändern«: Die Bildgröße verkleinern Die bearbeitete Grafik abspeichern 17.4 Know-how: JPEG, GIF und PNG im Detail Besonderheiten von JPEG: Kompressionsrate vs. Qualität Besonderheiten von GIF: Interlaced, Transparenz und Animation Besonderheiten von PNG: Alphatransparenz JPG, GIF und PNG im Überblick 17.5 Auf einen Blick 18 Schreiben im Web für Maschinen

9 18.1 Wie Maschinen im Web lesen Robots sammeln den Quelltext der Webseiten ein Suchmaschinen lesen auch den head-bereich 18.2 Übersichtliches Schreiben hilft auch bei Suchmaschinen Sprechen Sie die Sprache Ihrer Benutzer Einige HTML-Elemente sind wichtiger als andere Suchbegriffe in Überschriften Suchbegriffe in Hervorhebungen Suchbegriffe in Hyperlinks und Listen 18.3 Nicht zugänglich: Wie Sie sehen, sehen Sie nichts 18.4 Suchergebnis, Seitentitel und Seitenbeschreibung 18.5 Übung: Seitentitel und -beschreibung bei Jimdo Der Seitentitel Die Seitenbeschreibung 18.6 Auf einen Blick 19 SEO: Die Optimierung für Suchmaschinen 19.1 Ranking: Bei Google auf Platz 1... Google mag Hyperlinks Backlinks: Hyperlinks, die auf Ihre Homepage zeigen 19.2 Ein Beispiel: IKEA in Groningen Die Suche nach»ikea Groningen Öffnungszeiten«Die Site gibt es schon länger und der Inhalt wird gepflegt Es zeigen viele Links auf die Site Die Site ist suchmaschinenfreundlich geschrieben Fazit: Gut schreiben und fleißig linken 19.3 Ihre Homepage bei Google Die Maßnahmen bis jetzt im Überblick Einige nützliche Dienste von Google 19.4 Auf einen Blick Teil IV: Werkzeuge zum Selberbauen 20 Werkzeuge zum Selberbauen 20.1 Browser zum Testen von Webseiten Die aktuellen Browser in der Übersicht Verschiedene IE-Versionen auf einem Rechner 20.2 Editoren zum Erstellen von Webseiten Quelltext-Editor oder visueller Editor Übersicht: Editoren für den Quelltext Visuelle Editoren: Dreamweaver & Co. Editor und Browser im Alltag: Per Tastatur wechseln 20.3 Editoren zum Bearbeiten von Grafiken 20.4 FTP: Veröffentlichen von Webseiten 20.5 HTML und CSS:»Das große Little Boxes-Buch«Stichwortverzeichnis Ins Internet: Weitere Infos zum Buch, Downloads, etc.

10 Copyright Inhaltsverzeichnis

11 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschließlich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen: