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
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 |