Die Homepage-Schule - Der effektivste Weg zur eigenen Website
von: Peter M. Müller
Markt +Technik Verlag, 2012
ISBN: 9783863250485
Sprache: Deutsch
320 Seiten, Download: 20520 KB
Format: EPUB, PDF, auch als Online-Lesen
geeignet für:
| Die Homepage-Schule | 1 | ||
| Widmung | 3 | ||
| Der effektivste Weg zur eigenen Website | 4 | ||
| Impressum | 5 | ||
| Inhaltsübersicht | 6 | ||
| Inhaltsverzeichnis | 8 | ||
| Vorwort | 18 | ||
| Teil I: Grundlagen: Wissenswertes übers Web | 22 | ||
| 1 Das Internet und das Web | 24 | ||
| 1.1 Computer und Netzwerke | 25 | ||
| Ein LAN ist ein kleines Netzwerk | 25 | ||
| Router verbinden Netzwerke miteinander | 26 | ||
| Ein großes Netzwerk ist ein WAN | 26 | ||
| 1.2 Das Internet ist einfach nur ein Computernetzwerk | 27 | ||
| 1969 – Die Keimzelle des Internets | 27 | ||
| Was man früher im Internet so gemacht hat: E-Mail und FTP | 28 | ||
| 1.3 Das World Wide Web: Hypertext im Internet | 30 | ||
| 1.4 Hypertext ist Text mit Hyperlinks | 31 | ||
| 1.5 Internet und Web sind also nicht wirklich dasselbe | 32 | ||
| 1.6 Auf einen Blick | 33 | ||
| 2 Das World Wide Web: Ein weltweites Gewebe | 34 | ||
| 2.1 Das Web besteht aus Webseiten | 35 | ||
| 2.2 Hyperlinks verknüpfen Webseiten miteinander | 36 | ||
| 2.3 Begriffe: »Website«, »Webseite« und »Homepage« | 37 | ||
| Eigentlich korrekt: »Website«, »Webseite« und »Homepage« | 38 | ||
| Im Alltag: »Homepage« und »Webseite« statt »Website« | 39 | ||
| Uns fehlt im Deutschen ein gutes Wort für »Website« | 39 | ||
| 2.4 Orientierung im Web: Navigation | 40 | ||
| Eine Website verhält sich anders als ein Buch | 40 | ||
| Navigation dient zur Orientierung innerhalb der Site | 41 | ||
| 2.5 Auf einen Blick | 43 | ||
| 3 Die Browser: Surfen im Web | 44 | ||
| 3.1 Die bekanntesten Browser | 45 | ||
| 3.2 Die Browserbedienung im Überblick | 46 | ||
| Blättern durchs Web: Die Symbole Zurück und Vor | 46 | ||
| Die Symbole Abbrechen und Aktualisieren | 48 | ||
| Zurück nach Hause: Das Symbol Startseite | 48 | ||
| 3.3 Lesezeichen: Ihr Adressbuch für das Web | 49 | ||
| Lesezeichen sammeln auf einer Symbolleiste | 49 | ||
| Lesezeichen für Fortgeschrittene | 50 | ||
| 3.4 Suchen und Finden im Browser | 51 | ||
| 3.5 Auf einen Blick | 52 | ||
| 4 Die Suchmaschinen: Zeichen vergleichen | 54 | ||
| 4.1 Suchmaschinen durchsuchen nicht live das Web | 55 | ||
| 4.2 Der Ablauf einer Websuche | 55 | ||
| Schritt 1: Der Benutzer gibt die Suchbegriffe ein | 55 | ||
| Schritt 2: Die Suchmaschine sucht – und findet | 56 | ||
| Schritt 3: Die Ergebnisseite wird angezeigt | 57 | ||
| 4.3 Zeichen vergleichen: Suchmaschinen denken nicht | 58 | ||
| 4.4 ToDo: Eine Liste mit Suchbegriffen erstellen | 59 | ||
| 4.5 Auf einen Blick | 60 | ||
| 5 Das Domain Name System: Die automatische Auskunft | 62 | ||
| 5.1 IP-Adressen – Die Telefonnummern des Internets | 63 | ||
| 5.2 Domains und IP-Adressen: Namen statt Nummern | 64 | ||
| 5.3 Der Aufbau von Domain Namen | 65 | ||
| Die Top Level Domain | 65 | ||
| Die Second Level Domain (und alle darunter) | 67 | ||
| 5.4 Der Aufbau einer Webadresse (URL) | 67 | ||
| 5.5 ToDo: Gedanken über eine Domain machen | 69 | ||
| 5.6 Auf einen Blick | 70 | ||
| 6 Die Webseiten: Quelltext auf dem Webspace | 72 | ||
| 6.1 Der Quelltext ist der Bauplan der Webseite | 72 | ||
| 6.2 Browser bekommen den Quelltext vom Webserver | 74 | ||
| »Webspace«: Speicherplatz zum Veröffentlichen im Web | 74 | ||
| Überblick: Der Browser holt eine Webseite | 75 | ||
| Grafiken werden erst nach dem Quelltext abgeholt | 76 | ||
| Grafiken ausstellen im Browser | 77 | ||
| 6.3 Quelltext besteht aus HTML, CSS und JavaScript | 77 | ||
| Die Ordnung: HTML ist nicht hübsch, aber flexibel | 78 | ||
| Das Styling: CSS gestaltet die HTML-Elemente | 80 | ||
| HTML und CSS: Die Trennung von Inhalt und Gestaltung | 82 | ||
| JavaScript beeinflusst das Verhalten der Webseite | 83 | ||
| 6.4 Auf einen Blick | 85 | ||
| 7 Webpublishing: Der Weg zum Content Management | 86 | ||
| 7.1 Webpublishing war ursprünglich statisch | 87 | ||
| So funktioniert statisches Webpublishing | 87 | ||
| Statische Webseiten sind umständlich zu pflegen | 88 | ||
| 7.2 Statisches Webpublishing wird interaktiv | 89 | ||
| Das Web ist ein interaktives Medium | 90 | ||
| Ein Kontaktformular als Beispiel zur Interaktion | 90 | ||
| Formulardaten werden von einer Webanwendung verarbeitet | 92 | ||
| 7.3 Dynamisches Webpublishing: Content Management | 93 | ||
| So funktioniert ein Content Management System (CMS) | 93 | ||
| Ein CMS auf dem eigenen Webspace erfordert Know-how | 94 | ||
| Beispiele: WordPress, Joomla!, Contao, Drupal und TYPO3 | 95 | ||
| 7.4 Auf einen Blick | 97 | ||
| 8 Social Media, Blogs und Baukästen | 98 | ||
| 8.1 Social Media: Im Web aktiv ohne eigene Website | 98 | ||
| Themenorientierte Communities statt eigener Homepage | 99 | ||
| Soziale Netzwerke: Präsentieren Sie sich selbst | 99 | ||
| Soziales Netwerk versus eigene Homepage | 101 | ||
| 8.2 Blogger dir einen: Baukästen für Blogs | 101 | ||
| Blogs sind einfache CMSysteme und leicht zu bedienen | 102 | ||
| Beispiele: Fertigblogs vom Bloganbieter | 103 | ||
| 8.3 »Instant Websites«: Baukästen für Websites | 104 | ||
| Für wen kommt ein Website-Baukasten in Frage? | 105 | ||
| Beispiele: Jimdo, Webnode, Weebly & Co. | 106 | ||
| Die Website zu den Baukästen: »websitetooltester.com« | 107 | ||
| Offline-Baukästen: Teurer und nicht so flexibel | 108 | ||
| 8.4 Auf einen Blick | 109 | ||
| 9 Gute Seiten, schlechte Seiten | 110 | ||
| 9.1 Die Webseite ist zu Gast beim Surfer | 110 | ||
| 9.2 Überblick: Sieben Qualitätskriterien | 111 | ||
| 1. Der Inhalt: Darum kommen die Besucher | 112 | ||
| 2. Die Gestaltung: So sieht’s aus | 113 | ||
| 3. Die Navigation: Orientierung geben | 114 | ||
| 4. Die Performance: Die Entdeckung der Langsamkeit | 115 | ||
| 5. Die Zugänglichkeit: »Wie Sie sehen, sehen Sie nichts« | 116 | ||
| 6. Der Quelltext: Verborgene Qualitäten | 117 | ||
| 7. Die Interaktion: Mit den Besuchern kommunizieren | 119 | ||
| 9.3 Die Mischung macht‘s: Bibliothek und Galerie | 119 | ||
| Die Bibliothek: form follows function | 120 | ||
| Die Galerie: form without function | 121 | ||
| Bibliotheken und Galerien haben unterschiedliche Prioritäten | 122 | ||
| Fazit | 123 | ||
| 9.4 Auf einen Blick | 124 | ||
| Teil II: Vorbereitung: Die Homepage planen | 126 | ||
| 10 Die Rahmenbedingungen festlegen | 128 | ||
| 10.1 Überblick: Der rote Faden durch das Labyrinth | 128 | ||
| 10.2 Die Rahmenbedingungen: Ziele, Zeit und Zaster | 131 | ||
| Ihre Ziele – und die der Besucher | 132 | ||
| Die Zeit: Bis zur Freischaltung und danach | 133 | ||
| Der Zaster: Für die Erstellung und für die Wartung | 134 | ||
| 10.3 Selber bauen, bauen lassen oder Baukasten | 134 | ||
| 10.4 ToDo: Surftour – was machen die anderen? | 135 | ||
| 10.5 Auf einen Blick | 136 | ||
| 11 Die Konzeption: Gedanken ordnen | 138 | ||
| 11.1 Die vier Bereiche zur Planung einer Website | 139 | ||
| 11.2 »Technik«: Das Fundament für die Website | 140 | ||
| Die private Homepage | 140 | ||
| Die Freiberufler-Homepage | 141 | ||
| Die Homepage für Firmen, Vereine und Schulen | 142 | ||
| Der kleine Online-Shop | 144 | ||
| 11.3 »Inhalte«: Darum kommen Ihre Besucher | 144 | ||
| Schritt 1: Inhalte sammeln | 144 | ||
| Schritt 2: Inhalte sortieren – Kategorien und Hierarchien | 145 | ||
| Schritt 3: Inhalte erstellen | 146 | ||
| 11.4 »Funktionen«: Interaktion und Verwaltung | 147 | ||
| Schritt 1: Funktionen sammeln | 147 | ||
| Schritt 2: Funktionen sortieren | 148 | ||
| Schritt 3: Funktionen erstellen | 149 | ||
| 11.5 »Gestaltung«: So soll es aussehen | 150 | ||
| Skizzen erstellen | 150 | ||
| Das Layout erstellen | 152 | ||
| 11.6 » Wartung«: Die Pflege nach der Freischaltung | 153 | ||
| Eine Website ist ein Prozess | 153 | ||
| Wenn sich die Anforderungen ändern … | 154 | ||
| 11.7 Auf einen Blick | 155 | ||
| 12 Webhosting: Domain und Webspace | 156 | ||
| 12.1 Untermieter: Webspace mit Subdomain | 157 | ||
| 12.2 Domain überprüfen: Ist »mueller.de« noch frei? | 158 | ||
| 12.3 Wenn Ihr Wunschname vergeben ist | 159 | ||
| Möglichkeit 1: »pmueller.de« – eine andere DE-Domain | 159 | ||
| Möglichkeit 2: »mueller.info« – eine andere Top Level Domain | 161 | ||
| Möglichkeit 3: Domain kaufen – der Handel mit Domains | 162 | ||
| 12.4 Der eigene Webspace | 163 | ||
| Überblick über Webhoster: webhostlist.de | 164 | ||
| Verwirrende Preise: Null Euro Sternchen | 164 | ||
| Der Einstieg: Domain und Mail | 166 | ||
| Die Mittelklasse: Webspace mit PHP und Datenbank | 167 | ||
| Die Oberklasse: Premiumpakete für Experten | 167 | ||
| 12.5 Fachbegriffe rund um Web- und Mailspace | 168 | ||
| Wie viel Speicherplatz wird benötigt? | 169 | ||
| Wie viel Traffic (Datentransfer) brauchen Sie? | 169 | ||
| Der Zugang zum Webspace: FTP & Co. | 170 | ||
| Serverseitige Skriptsprachen: PHP & Co. | 171 | ||
| Datenbanken: MySQL und phpMyAdmin | 172 | ||
| Sonstige Fachbegriffe rund um den Webspace | 173 | ||
| Der Mailspace: POP3, IMAP und Webmail | 174 | ||
| 12.6 Auf einen Blick | 176 | ||
| Teil III: Umsetzung: Eine Homepage erstellen | 178 | ||
| 13 Eine Homepage mit Jimdo erstellen | 180 | ||
| 13.1 Bevor Sie beginnen ... | 181 | ||
| 13.2 Jimdo im Überblick | 181 | ||
| 13.3 Die Registrierung bei Jimdo | 183 | ||
| Schritt 1: Web-Adresse und Mail-Adresse eingeben | 183 | ||
| Schritt 2: Captcha eingeben und Website erstellen | 184 | ||
| Schritt 3: Die E-Mail mit den Zugangsdaten | 186 | ||
| 13.4 Jimdo kennen lernen | 187 | ||
| First Contact – Die Beispielsite von Jimdo in der Übersicht | 187 | ||
| Die erste Anmeldung an Ihrer Homepage | 188 | ||
| Zu Ihrer Sicherheit: Das zugeschickte Passwort ändern | 190 | ||
| Die Layoutbereiche einer Jimdo-Page | 191 | ||
| 13.5 Den Inhalt auf der Startseite ändern | 193 | ||
| Die Überschrift auf der Startseite ändern | 193 | ||
| Text auf der Startseite löschen und neu eingeben | 194 | ||
| Einen Hyperlink erstellen | 196 | ||
| 13.6 Ansichts- und Bearbeitungsmodus bei Jimdo | 198 | ||
| 13.7 Auf einen Blick | 199 | ||
| 14 Die Homepage bei Jimdo gestalten | 202 | ||
| 14.1 Entdecke die Möglichkeiten in fünf Schritten | 203 | ||
| 14.2 Schritt 1: Das Layout auswählen | 203 | ||
| Die Layout-Vorschau | 204 | ||
| Ein neues Layout zuweisen | 205 | ||
| 14.3 Schritt 2: Den Hintergrund ändern | 206 | ||
| 14.4 Schritt 3: Das Titelbild austauschen | 207 | ||
| 14.5 Schritt 4: Den Titel der Website ändern | 209 | ||
| 14.6 Schritt 5: Die Navigation anpassen | 211 | ||
| 14.7 Auf einen Blick | 213 | ||
| 15 Die Homepage bei Jimdo mit Inhalten füllen | 214 | ||
| 15.1 Jede Seite beginnt mit einer »Überschrift 1« | 215 | ||
| 15.2 Die Elemente »Textfeld« und »Bild mit Text« | 215 | ||
| 15.3 Nur ein Bild: Das Element »Bild« | 218 | ||
| 15.4 Mehrere Bilder: Das Element »Bilder-Galerie« | 220 | ||
| 15.5 Ein funktionierendes Kontaktformular | 223 | ||
| 15.6 Weitere nützliche Elemente im Überblick | 225 | ||
| 15.7 Auf einen Blick | 226 | ||
| 16 Schreiben im Web für Menschen | 228 | ||
| 16.1 Wie Menschen im Web lesen | 229 | ||
| Und es hat Zoom gemacht: Lesen am Bildschirm | 229 | ||
| Webseiten werden nicht gelesen, sondern überflogen | 231 | ||
| Zwischenlandung: Scannen – Skimmen – Lesen | 232 | ||
| 16.2 Verständliche Texte: Die Hamburger Pyramide | 233 | ||
| Pulitzer und das Hamburger Verständlichkeitsmodell | 233 | ||
| Die umgekehrte Pyramide: Das Wichtigste am Anfang | 234 | ||
| 16.3 Übersichtliches Schreiben: Texte scannbar machen | 235 | ||
| Überschriften und Zwischenüberschriften | 235 | ||
| Schreiben Sie kurze Absätze | 236 | ||
| Heben Sie wichtige Worte hervor | 236 | ||
| Benutzen Sie Listen | 236 | ||
| 16.4 Abstände und Schriften: Fließtext gestalten | 237 | ||
| Abstand halten im Fließtext | 237 | ||
| Schnörkel oder nicht Schnörkel: Schriften und Serifen | 238 | ||
| Sie können nicht jede Schriftart benutzen | 240 | ||
| 16.5 Der Umgang mit Hyperlinks | 241 | ||
| Linken Sie nicht nur des Linkens wegen | 241 | ||
| Das »Hier«-Syndrom: Klicken Sie hier | 242 | ||
| Benutzen Sie Linklisten | 242 | ||
| Beschreiben Sie Downloadlinks deutlich | 243 | ||
| 16.6 Zürich, die Stadt, die die Römer Turicum nannten … | 243 | ||
| 16.7 Übung: Caipirinha in Jimdo | 245 | ||
| Rezept für Caipirinha – die Ausgangssituation | 245 | ||
| Die Überschrift: »Rezept für eine Caipirinha« | 246 | ||
| Der Teaser: Blickfang und Einleitung | 247 | ||
| Zutaten und Utensilien: Überschrift 2 und Aufzählung | 248 | ||
| Die Zubereitung: Überschrift und Nummerierung | 249 | ||
| Das Jimdo-Menü Style zur Gestaltung des Fließtextes | 250 | ||
| 16.8 Auf einen Blick | 253 | ||
| 17 Grafiken fürs Web vorbereiten | 254 | ||
| 17.1 Webgrafiken – Das Wichtigste in Kürze | 254 | ||
| Grafiken laden länger als Text | 254 | ||
| Frisch aus der Kamera: Bildgröße und Dateigröße | 255 | ||
| Im Web sind nur GIF, JPEG oder PNG erlaubt | 256 | ||
| 17.2 Grafiken – Woher nehmen und nicht stehlen? | 257 | ||
| Vorsicht bei Grafiken von anderen Webseiten | 257 | ||
| Die Google-Bildersuche ist keine gute Quelle … | 257 | ||
| pixelio.de – kostenlose Bilddatenbank für lizenzfreie Fotos | 258 | ||
| CreativeCommons und flickr.com | 259 | ||
| Andere Websites mit lizenzfreien Fotos | 260 | ||
| 17.3 Fotos für das Web vorbereiten mit picnik.com | 261 | ||
| Ohne Registrierung: Bilder mit Picnik online bearbeiten | 261 | ||
| Ein Foto in Picnik bearbeiten | 262 | ||
| »Zuschneiden«: Einen Ausschnitt bestimmen | 263 | ||
| »Größe ändern«: Die Bildgröße verkleinern | 264 | ||
| Die bearbeitete Grafik abspeichern | 264 | ||
| 17.4 Know-how: JPEG, GIF und PNG im Detail | 266 | ||
| Besonderheiten von JPEG: Kompressionsrate vs. Qualität | 266 | ||
| Besonderheiten von GIF: Interlaced, Transparenz und Animation | 267 | ||
| Besonderheiten von PNG: Alphatransparenz | 268 | ||
| JPG, GIF und PNG im Überblick | 268 | ||
| 17.5 Auf einen Blick | 269 | ||
| 18 Schreiben im Web für Maschinen | 270 | ||
| 18.1 Wie Maschinen im Web lesen | 271 | ||
| Robots sammeln den Quelltext der Webseiten ein | 271 | ||
| Suchmaschinen lesen auch den head-Bereich | 272 | ||
| 18.2 Übersichtliches Schreiben hilft auch bei Suchmaschinen | 273 | ||
| Sprechen Sie die Sprache Ihrer Benutzer | 273 | ||
| Einige HTML-Elemente sind wichtiger als andere | 275 | ||
| Suchbegriffe in Überschriften | 275 | ||
| Suchbegriffe in Hervorhebungen | 276 | ||
| Suchbegriffe in Hyperlinks und Listen | 277 | ||
| 18.3 Nicht zugänglich: Wie Sie sehen, sehen Sie nichts | 278 | ||
| 18.4 Suchergebnis, Seitentitel und Seitenbeschreibung | 279 | ||
| 18.5 Übung: Seitentitel und -beschreibung bei Jimdo | 281 | ||
| Der Seitentitel | 281 | ||
| Die Seitenbeschreibung | 283 | ||
| 18.6 Auf einen Blick | 284 | ||
| 19 SEO: Die Optimierung für Suchmaschinen | 286 | ||
| 19.1 Ranking: Bei Google auf Platz 1 ... | 286 | ||
| Google mag Hyperlinks … | 287 | ||
| Backlinks: Hyperlinks, die auf Ihre Homepage zeigen | 288 | ||
| 19.2 Ein Beispiel: IKEA in Groningen | 289 | ||
| Die Suche nach »Ikea Groningen Öffnungszeiten« | 290 | ||
| Die Site gibt es schon länger und der Inhalt wird gepflegt | 291 | ||
| Es zeigen viele Links auf die Site | 291 | ||
| Die Site ist suchmaschinenfreundlich geschrieben | 292 | ||
| Fazit: Gut schreiben und fleißig linken | 294 | ||
| 19.3 Ihre Homepage bei Google | 294 | ||
| Die Maßnahmen bis jetzt im Überblick | 294 | ||
| Einige nützliche Dienste von Google | 295 | ||
| 19.4 Auf einen Blick | 297 | ||
| Teil IV: Werkzeuge zum Selberbauen | 298 | ||
| 20 Werkzeuge zum Selberbauen | 300 | ||
| 20.1 Browser zum Testen von Webseiten | 300 | ||
| Die aktuellen Browser in der Übersicht | 301 | ||
| Verschiedene IE-Versionen auf einem Rechner | 302 | ||
| 20.2 Editoren zum Erstellen von Webseiten | 303 | ||
| Quelltext-Editor oder visueller Editor | 303 | ||
| Übersicht: Editoren für den Quelltext | 305 | ||
| Visuelle Editoren: Dreamweaver & Co. | 306 | ||
| Editor und Browser im Alltag: Per Tastatur wechseln | 307 | ||
| 20.3 Editoren zum Bearbeiten von Grafiken | 308 | ||
| 20.4 FTP: Veröffentlichen von Webseiten | 309 | ||
| 20.5 HTML und CSS: »Das große Little Boxes-Buch« | 310 | ||
| Stichwortverzeichnis | 312 | ||
| Copyright | 322 |