close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

FAU-Kurs «Einführung ins Webdesign

EinbettenHerunterladen
Webdesign
Imre Hofmann
Daniel Süsstrunk
7., komplett neu konzipierte Auflage
© wunderwald :: digitAll, Zürich, 2014
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Inhalt
Webdesign
1
Inhalt
i
1 Einleitung
1
2 Was ist HTML?
5
HTML: HyperTextMarkupLanguage - Zwei
Konzepte in einem—6
Markierende Tags und hierarchischer Aufbau—8
Attribute und guter Stil—9
3 Der Webdesigneditor BlueGriffon
3.1. Vom Editor zum Browser—12
3.2 Unser Webdesign-Editor: der BlueGriffon—13
3.3 Die ersten Schritte beim Erstellen eines HTML-Dokuments—14
3.4 Absolute versus relative Adressierung—18
3.5 Dateispeicherorte: Alle Dateien in dasselbe Hauptverzeichnis—19
i
11
0 Inhaltsverzeichnis
0 Inhaltsverzeichnis
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
21
4 Formatierung mit CSS
4.1 CSS: Cascading Style Sheets—22
4.2. CSS-Regeln definieren—22
4.3 Die Integration von CSS in HTML—23
4.4 CSS-Quellcode im BlueGriffon bearbeiten—24
4.5 Spezifität: HTML-Tag, Klasse, Id—24
4.6 Kombination und Vererbung der CSS-Definitionen—26
4.7 Textformatierung—27
4.8 Das Box Modell, Block- vs Inline-Elemente—28
4.9 Positionierung und Layout mit CSS—29
5 Der BlueGriffon als WYSIWYG-Editor
33
5.1 Die immergleichen ersten Schritte beim Erstellen eines jeden HTML-Dokuments—34
5.2 Arbeiten in der WYSIWYG-Ansicht—36
5.3 Inhalte einfügen—37
5.4 CSS per externem Stylesheet einbinden—44
49
6 FTP - File Transfer
6.1 Dateien per FTP im Internet verschieben—50
6.2 Schritt-für-Schritt-Anleitung—50
7 Layout mit <DIV>-Containern: Das 960 Grid System53
7.1 Das 960 Grid System: ein Layout-Raster—54
7.2 Die CSS-Ausstattung des 960 Grid Systems—55
7.3 Schritt für Schritt zum 960 Grid Layout—56
57
8 Photoshop-HOWTO
8.1 Wählen eines geeigneten Ausschnitts—58
8.2 Abspeichern eines Bildes für das Internet—60
9 Planung und Umsetzung einer Website
9.1 Ich soll eine Homepage erstellen, an was
muss ich alles denken?—64
9.2 Schritt für Schritt zur eigenen Homepage: Das
3kanal::digitAll Zehn-Punkte-Konzept—65
9.2.1 Zusammenstellen des Inhalts—66
9.2.2 Strukturierung des Inhalts—67
9.2.3 Sitemap—68
9.2.4 Farbkonzept—69
9.2.5 Schriftkonzept —70
9.2.6 Grundraster—71
9.2.7 Layout-Instanzen skizzieren—72
9.2.8 Abstraktion einer Layout-Vorlage—73
ii
63
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2.9 Vorlage erstellen—74
9.2.10 Einzelne Seiten erstellen—75
10 Ausblick, Tipps & Tricks, Javascript und CSS
77
10.1 CSS: Cascading Style Sheets—79
10.1.1 Stilvorlagen definieren—79
10.2 Javascript: Ins HTML-Dokument eingebundener Programmcode—79
10.4 PHP—80
10.5 Webapplikationen—81
83
11 Hosting
11.1 Wie registrierst du die Domain deiner Träume?—85
11.2 Wie findest du den idealen Provider?—85
11.3 Das Aktivieren der Domain—86
89
12 Übungsblätter
12.1 HTML YES!—90
12.2 CSS YES!—91
12.3 BlueGriffon Yes!—92
12.4 Hausaufgabe für angehende WebdesignerInnen—93
12.5 Homepage Yes!—94
12.6 Layout YES!—96
13.1 Wie funktioniert das Internet?
99
103
13.2 HTML-Kurzreferenz
13.2.1 <A> - Anker / Hyperlink—104
13.2.2 <BODY> - Körper des Dokuments—107
13.2.3 <BR> - Zeilenumbruch—108
13.2.4 <DIV> - allgemeines Block-Element—109
13.2.5 <H1><H2><H3><H4><H5><H6> Überschriften—110
13.2.6 <HEAD> - Kopf des Dokuments—111
13.2.7 <HTML> - HTML-Dokument—112
13.2.8 <IMG> - Bild—114
13.2.9 <META> - Metainformationen—116
13.2.10 <OL> - Nummerierte Liste—118
13.2.11 <P> - Textabsatz—119
13.2.12 <SPAN> - Allgemeines Inline-Element—120
13.2.13 <TABLE>, <TR>, <TD> - Tabellentags—121
13.2.14 <UL> - Aufzählungs-Liste—124
13.2.15 <!DOCTYPE> - Dokumenttyp-Deklaration—125
iii
0 Inhaltsverzeichnis
0 Inhaltsverzeichnis
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
13.3 Ein komplettes Javascript-Beispiel
127
13.4 Sonderzeichen
131
13.5 Das Zusammenspiel der eingesetzten Programme
133
Programmieren des Codes im Editor—134
Überprüfen der Webseite im Browser—134
Website veröffentlichen per FTP-Programm—135
13.6 Inhalt der Kurs-CD
137
14 Index
139
iv
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
1 Einleitung
WEB DESIGN - EINE EINFÜHRUNG
Lieber Teilnehmer, liebe Teilnehmerin unseres Kurses
Wir gratulieren dir zu deinem Mut, hinter die Kulissen des
Internets zu schauen, und laden dich herzlich dazu ein, in den
nächsten Tagen selber tatkräftig an dessen Fassade mitzuarbeiten. Unser Kurs wird kurze drei Tage dauern und dich in die
Welt von HTML, HYPERLINKS, CSS, FTP, JPG und vielem
mehr einführen. Wenn dir diese Begriffe nichts sagen, lass dich
nicht abschrecken, dann bist du nämlich genau richtig bei uns.
Ziel des Kurses
Das vordergründige Ziel dieses Kurses ist es, dir genau das
Know-How zu vermitteln, das du brauchst, um schnell und
zielgerichtet eine erste einfache, aber ansprechende, vollständige
und funktionstüchtige Homepage zu gestalten und im Internet zu
präsentieren. Zu diesem Zweck werden wir den Fokus bei den
Kursinhalten auf die wichtigsten Kenntnisse des Webdesigns
legen, die die Grundlage für eine spezifische Vertiefung bilden.
Dazu gehört insbesondere die elementare HTML-Programmierung (Kapitel 2 und 13.2) und die Layoutgestaltung anhand
von CSS und Tabellen (Kapitel 4, 7 und 9.2). Anspruchsvollere
Technologien wie Javascript (Kapitel 10.2) werden wir nur als
Ergänzung dazu beiziehen, PHP, Datenbanken und CMS können
wir nur beiläufig erwähnen (Kapitel 10.4 und 10.5).
Ausserdem werden wir dir regelmässig Gelegenheit bieten, das
1
1 Einleitung
1 Einleitung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Gelernte gleich selbst in die Praxis umzusetzen und individuelle
Anliegen gleich vor Ort mit uns in Angriff zu nehmen. Sobald
du das Grundhandwerk einmal beherrschst, sollte es dir leicht
fallen, deine Kenntnisse auch selbständig weiter zu vertiefen.
Wir beanspruchen nicht, dich mit unserem Kurs zur professionellen WebdesignerIn auszubilden, dafür ist die Welt des
Internets zu gross und unser Kurs zu kurz. Da elementare
Webdesignkenntnisse jedoch langfristig zum Allgemeinwissen
für Menschen gehören, die ihre Arbeit am Computer verrichten,
verbinden wir mit diesem Kurs auch das Ziel, dir die nötigen
Kenntnisse zu vermitteln, künftig am Arbeitsplatz bei grösseren
Webprojekten im Team kompetent mitarbeiten und gewisse
Aufgaben übernehmen zu können.
Material und Referenzen
Um dich nicht mit der Qual der Wahl zu behelligen, schlagen
wir dir drei Werke zur Lektüre vor: die ausführlichen Unterlagen
dieses Kurses sowie zwei digitale Referenzen für den Onlinegebrauch direkt in deinem Web-Browser.
Webdesign - Eine Einführung (3kanal :: digitAll) Von Imre
Hofmann und Daniel Süsstrunk. Damit der Einstieg besonders
leicht fällt, haben wir dir ein eigenes Kurshandbuch erstellt. Du
hälst es gerade in den Händen. Es beinhaltet, kurz zusammengefasst, ein eigentliches Destillat, die wichtigsten Kenntnisse, die
es braucht, um schnell eine einfache Homepage zu gestalten.
Die Unterlagen orientieren sich sowohl im Aufbau als auch im
Hinblick auf die verwendete Software am Kursprogramm. Sie
sollten es dir daher ermöglichen, das Gelernte zu einem späteren
Zeitpunkt wieder Schritt für Schritt zu repetieren. Die aktuellste
Version des Buchs findest du jeweils auf unserer Homepage
unter http://www.webdesignkurs.ch.
http://de.selfhtml.org - SELFHTML
Von Stefan Münz. Einführung und Nachschlagewerk für fast
alle Fragen des Webdesigns. Sehr verständlich und vollständig.
Verfügt zudem über sämtliche Vorzüge eines Hypertextes: Alle
Seiten sind über Querverweise untereinander verlinkt und es gibt
jede Menge HTML-Beispiele zum Ansehen und zum Kopieren.
Und von SelfHTML aus gibt es auch weiter führende Links zu
angrenzenden Themen. Die gesamte Webseite findest du zum
Gebrauch fern des Internets auch auf der beiliegenden CD.
http://www.w3schools.com
Einführung und Nachschlagewerk in Englisch für fast alle
Fragen des Webdesigns. Sehr verständlich und vollständig. Alle
Seiten sind über Querverweise untereinander verlinkt und es gibt
jede Menge HTML-Beispiele zum Ansehen und zum Kopieren.
Als Spezialität bietet diese Webseite die Möglichkeit, Quellcode
2
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
von Beispielen im Browser zu editieren und das Resultat direkt
daneben betrachten zu können.
Selbstverständlich gibt es auch eine Reihe von ausgezeichneter
gedruckter Fachliteratur, deren Anschaffung sich vor allem dann
empfiehlt, wenn man eine strukturierte Aufbereitung der Inhalte
sucht. Da diese Handbücher und Referenzen jedoch sehr schnell
überholt sind, halten wir uns hier mit konkreten Tipps zurück.
Ausgewählte Veröffentlichungen werden wir jeweils auf unserer
Kurswebsite (http://www.webdesignkurs.ch) aufführen.
Des Weiteren ist das Internet selber auch eine gute Anlaufstelle,
um an Materialien und Informationen zu gelangen. Häufig findet
man über eine gezielte Recherche die Lösungen zu kniffligen
Herausforderungen. Ein erster Ausgangspunkt für die Materialsuche kann zudem unsere Kurshomepage sein, auf der sich auch
die im Kapitel 10 erwähnten Demobeispiele befinden:
http://www.webdesignkurs.ch/demos.
Hinweise für Windows- und Macintosh-Benutzer
Das Internet wurde weder mit Hilfe von Windows- noch mit
Macintosh-Computern entwickelt. Heutzutage eignen sich
jedoch beide Systeme gleichermassen für die Entwicklung und
das Betrachten von Webseiten. Alle Programme, die du im Kurs
einsetzen wirst, existieren für beide Betriebssysteme und sind
auf beiden Systemen in der Handhabung gleich bis ähnlich. Wo
signifikante Unterschiede bestehen, werden wir dich im Text
jeweils darauf aufmerksam machen.
Imre Hofmann & Daniel Süsstrunk
3
1 Einleitung
1 Einleitung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
4
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
2 Was ist HTML?
Worum es geht
HTML ist die «Sprache des Webs». Wie sieht es aus? Was ist
die Idee dahinter? Wie ist es aufgebaut? Weshalb benötigen wir
HTML, um Webseiten zu erstellen? Fragen, die der folgende
Text klären soll.
Du wirst nach dem Durcharbeiten dieses Kapitels folgende Techniken beherrschen:
• Konzept und Funktionsweise von HTML
• Das Tag-Konzept
• Logik und Aufbau von HTML-Dokumenten
• Der Einsatz von Attributen
• Faustregeln für die stilistisch saubere Programmierung
Material und Referenzen
Solltest du an einem Punkt nicht mehr weiterkommen, benutze
Selfhtml (http://de.selfhtml.org) oder Wikipedia
(http://de.wikipedia.org) als weiterführende Referenzen!
5
2 Was ist HTML
2 Was ist HTML
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
HTML: HyperTextMarkupLanguage - Zwei
Konzepte in einem
Die Abkürzung HTML steht für HyperTextMarkupLanguage
und verbindet die beiden folgenden Konzepte:
Hypertext: Ein Text, der sich aus mehreren Texteinheiten
zusammensetzt, die über Verweise (so genannte Hyperlinks) mit
anderen Texten verknüpft sind. Das daraus entstehende Textmodell ist nicht mehr linear wie ein Buch, sondern netzartig.
Markup Language: Heisst auf deutsch «Auszeichnungssprache» und meint einen Sprachcode, der es ermöglicht in einem
Klartextdokument für jedes Textelement festzuhalten, um was
für eine Art von Textelement (Titel, Liste, Abschnitt, Abbildung
etc.) es sich handelt, ohne es dafür speziell formatieren zu müssen. Der Trick besteht darin, in den Text entsprechende Markierungen (sogenannte Tags) einzufügen, die Auskunft darüber
geben, um was für eine Art von Textelement es sich handelt. Die
markierenden Tags werden einfach zu Beginn und am Ende des
betreffenden Textelements hinzu geschrieben. Tags sind immer
in spitzen Klammern geschrieben: <TAG-NAME>. Will man
etwa eine Passage als Titel markieren, geht das so:
<TITLE>Titel des Dokuments</TITLE>
HTML: HTML kombiniert diese beiden Konzepte, um die logische und inhaltliche Struktur eines komplexen Textes in Klartext
abspeichern zu können und eine einfache Navigation zwischen
verknüpften Dokumenten zu ermöglichen. HTML ist somit eine
besondere Auszeichnungssprache, weil es zum Erstellen von
Hypertexten (sprich: Websites) dient.
Homepage (Website): Ist im technischen Sinn eine Sammlung
von HTML-Dokumenten, die untereinander über Hyperlinks
verknüpft sind und dabei auch andere Dateien wie Bilder, Tonund Filmdateien etc. einbinden.
Weil HTML-Dokumente nur aus schwer zu entzifferndem
Klartext bestehen, gibt es besondere Programme, nämlich die
Browser (Internet Explorer, Firefox, Safari etc.), die diese Dokumente in einer für Menschen ansprechenden Weise darstellen.
Ein Browser liest die Tags als Anweisung, um die einzelnen
Textelemente am Bildschirm darzustellen (also einen Titel dick
hervorgehoben, eine Liste leicht eingerückt etc.). Der Browser
nimmt also die Stellung eines Übersetzers oder eines Filters ein,
indem er die reinen Textinformationen, die er aus dem Internet
erhält, grafisch so aufbereitet, dass sie für die Benutzerin leicht
aufzufassen und einfach zu bedienen sind.
6
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
In einem HTML-Dokument sind also zwei Ebenen von Informationen enthalten:
1. Die eigentlichen Inhalte, die in der Webseite dargestellt
werden sollen. Diese Informationen sind für die Benutzerin des
Browsers gedacht. (Abbildung 2.1: grau hinterlegte Bereiche)
2. Die Anweisungen für den Browser, um was für eine Art
von Information es sich handelt und wie er sie darzustellen
hat. (Abbildung 2.1: alle nicht grau hinterlegten Bereiche) Hierbei handelt es sich um die HTML-Tags. Die Verwendungsweise
dieser Tags ist standardmässig definiert (aktuell HTML5), damit
die Browser auch alle HTML-Dokumente korrekt dekodieren
und darstellen können. Es gibt nur eine bestimmte Anzahl von
Tags bzw. Elementtypen in HTML. Wichtige Beispiele sind:
<A> für Anker (Abbildung 2.1, Zeile 11, für Hyperlinks, siehe
auch Kapitel 13.2.1), oder <P> für Abschnitt (Abbildung 2.1,
Zeile 9, siehe auch Kapitel 13.2.12).
Beide Informationsebenen werden in formatierungsfreiem
Klartext in das HTML-Dokument geschrieben und bilden dessen
Quellcode.
Abbildung 2.1: Der Quellcode der einfachsten Homepage: minimal.html
Abbildung 2.2: Die Browseransicht der einfachsten Homepage.
7
2 Was ist HTML
2 Was ist HTML
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Markierende Tags und hierarchischer Aufbau
Jedes Textelement in einem HTML-Dokument muss mit einem
Tag markiert werden, der Auskunft darüber gibt, um was für
eine Art von Textelement es sich handelt. Weil der Geltungsbereich eines jeden Tags klar definiert sein muss, muss er immer
mit einem Anfangs-Tag eröffnet und mit einem End-Tag wieder
abgeschlossen werden (<BR>, <META>, <IMG> bilden die Ausnahme). End-Tags unterscheiden sich durch den dem AnfangsTag vorangestellten Schrägstrich. Also: </TAG-NAME>. Fehlt
der End-Tag, weiss der Browser nicht, wann der Geltungsbereich wieder aufhört. Sehr anschaulich lässt sich dies am <A>Tag illustrieren (Abbildung 2.3, Zeile 11), der nur einen kurzen
Ausschnitt - im Beispiel das Wort «Hinweis» - innerhalb eines
längeren Textes als Link kennzeichnet:
Dieser <A HREF="http://de.selfhtml.org">
Hinweis</A> ist Gold wert.
Tags können kombiniert und verschachtelt werden, wobei nicht
alle Verschachtelungen erlaubt sind. Dies führt zu einem hierarchischen Aufbau des HTML-Dokuments. Die äusserste Position
in der Hierarchie nimmt immer der <HTML>-Tag ein (Abbildung
2.3, Zeile 2 und 14, siehe auch Kapitel 13.2.7), der das gesamte Dokument umfasst. Dann müssen die beiden Tags <HEAD>
(Abbildung 2.3, Zeile 3 und 7, siehe auch Kapitel 13.2.6) und
<BODY> (Abbildung 2.3, Zeile 8 und 13, siehe auch Kapitel
13.2.2) in dieser Reihenfolge folgen. Daher besteht das minimale HTML-Gerüst eines jeden HTML-Dokuments aus den Tags
<HTML>, <HEAD> und <BODY>. Innerhalb des <HEAD>-Tags
werden alle Informationen festgehalten, die nicht im Browserfenster dargestellt werden sollen, z.B. der Titel des Dokuments.
Im Geltungsbereich des <BODY>-Tags werden all jene Anweisungen an den Browser geschrieben, die im Browserfenster
dargestellt werden.
Weitere quasi immer vorkommende Tags sind der <TITLE>Tag (Abbildung 2.3, Zeile 4) für die Titelangabe in der Kopfleiste des Browserfensters, sowie der <META>-Tag (Abbildung 2.3,
Zeile 5 und 6, siehe auch Kapitel 13.2.9), der Zusatzinformationen über das HTML-Dokument enthält, die von Suchmaschinen
ausgelesen werden. Beide Tags werden innerhalb des Heads
eingefügt.
Abbildung 2.3: Der Quellcode der einfachsten Homepage: minimal.html
8
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Attribute und guter Stil
Die meisten HTML-Tags lassen noch eine genauere Bestimmung ihrer Eigenschaften zu, indem man ihnen Attribute
hinzufügt. Jedes Attribut setzt sich aus dem Attributnamen, und
dem in Anführungszeichen zugewiesenen Wert zusammen. Ein
Beispiel soll dies veranschaulichen. Der Tag, um einen Link zu
kennzeichnen, ist <A>. Damit der Browser weiss, wo sich das
Zieldokument befindet, muss ich das Attribut HREF hinzufügen
und diesem den Wert mit der Zieladresse zuweisen. Konkret
sieht das dann so aus:
Dieser <A HREF="http://de.selfhtml.org">
Hinweis</A> ist Gold wert.
Im Endtag braucht das Attribut nicht mehr wiederholt zu werden
(Abbildung 2.3, Zeile 11).
Für den Browser spielt es keine Rolle, wie der Quellcode einer
HTML-Datei dargestellt ist, solange er sich korrekt an die
Konventionen des HTML-Standards hält. Theoretisch liesse sich
daher auch die ganze Datei in eine einzige Zeile hinein schreiben. Da der Quellcode aber bisweilen auch von Menschen und
ProgrammiererInnen betrachtet wird, so ist es ratsam, auch im
Quellcode darauf zu achten, dass man sich an gewisse stilistische Konventionen hält, die das spätere Weiterarbeiten erleichtern. Die elementarste dieser stilistischen Regeln besteht darin,
die hierarchische Verschachtelung der Elemente im Quellcode
durch Einrückungen abzubilden. Das heisst, der Tag eines Elements, das sich innerhalb eines anderen Elements befindet, wird
gegenüber dessen Tag nach rechts eingerückt.
9
2 Was ist HTML
2 Was ist HTML
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
10
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
3 Webdesigneditor BlueGriffon
3 Der Webdesigneditor
BlueGriffon
Worum es geht
Für das Webdesign benötigen wir verschiedene Programme.
Zum einen einen Editor, mit dem wir die HTML-Dokumente
erstellen, zum anderen den Browser, mit dem wir das Ergebnis
prüfen. Es gibt speziell für das Webdesign entwickelte Editoren,
die einem das Erstellen des Quellcodes erleichtern können. In
diesem Kapitel stellen wir dir den BlueGriffon vor, ein kostenloses Tool, das wir im Kurs verwenden.
Du wirst nach dem Durcharbeiten dieses Kapitels folgende Techniken beherrschen:
• Öffnen und richtiges Konfigurieren des BlueGriffon
• Die korrekte Vorgehensweise beim Erstellen und Abspeichern eines neuen HTML-Dokuments
• Das Zusammenspiel zwischen Editor und Browser
• Das Einfügen und Ändern von besonderen Inhalten wie
Links, Bildern und Tabellen
• Einige Grundregeln zum Management von Webseiten
(Benennung, Adressierung, Speicherort)
Material und Referenzen
Der BlueGriffon ist auf der Kurs-CD enthalten. Du kannst ihn
von dort aus installieren. Falls deine CD beschädigt oder verloren gegangen sein sollte, kannst du ihn auch unter folgender
Adresse herunter laden:
http://bluegriffon.org/pages/Download
11
3 Webdesigneditor BlueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
3.1. Vom Editor zum Browser
3.1.1 Programmieren mit einem Editor
Wie du in Kapitel 2 gelernt hast, bestehen HTML-Dokumente
aus reinem Klartext ohne Formatierungen. Möchtest du also eine
Webpage programmieren, kannst du im Prinzip mit einem simplen Texteditor (Win: Editor, Wordpad, Mac: TextEdit) arbeiten
(aber auf keinen Fall mit einem Textverarbeitungsprogramm wie
z.B. Word, weil das unerwünschte Formatierungen einfügt!).
3.1.2 Abspeichern der HTML-Datei
Wie findest du heraus, ob das, was du programmiert hast, auch
als Endprodukt für einen Besucher deiner Homepage korrekt
aussieht? Nun, das kannst du nur herausfinden, indem du die
programmierte Seite selber in einem Browser anschaust. (Firefox, Chrome, Internet-Explorer, Opera etc.). Dazu musst du
jedoch den Umweg über die Harddisk machen, denn die Daten
können nicht direkt vom Texteditor zum Browser geschickt
werden (Abbildung 3.1). Das heisst, du musst den Quellcode,
den du im Editor programmiert hast, zunächst auch als HTMLDokument abgespeichert haben, bevor du ihn im Browser zur
Darstellung ansehen kannst.
3.1.3 Betrachten des Resultates im Browser
Sobald du deinen Code als HTML-Dokument abgespeichert
hast, kannst du dieses im Browser öffnen und überprüfen.
Im Folgenden wird das exakte Vorgehen beschrieben, an das
sich WebdesignerInnen halten, wenn sie keine bösen Überraschungen erleben wollen. Dabei verwenden wir einen besonderen Editor: den BlueGriffon.
Abbildung 3.1: Der Quellcode muss zuerst abgespeichert werden, bevor er im Browser
betrachtet werden kann.
12
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
3.2 Unser Webdesign-Editor: der BlueGriffon
Obwohl du im Prinzip deinen HTML-Quellcode mit einem
beliebigen Klartexteditor erstellen kannst, gibt es spezielle Editoren, die eigens für die Entwicklung von Webseiten optimiert
wurden. Der wohl bekannteste unter ihnen ist der Dreamweaver
von Adobe. Wir möchten dir hier eine kostenlose Alternative
vorstellen, den BlueGriffon. Du findest ihn auf der Kurs-CD und
solltest ihn bei dir zuhause installieren. Dabei spielt es keine
Rolle, welches Betriebssystem du verwendest.
Der BlueGriffon ist ein sogenannter WYSIWYG-Editor. WYSIWYG steht für What You See Is What You Get und bedeutet
soviel wie, dass du darin in einer Benutzeroberfläche arbeiten
kannst, die dem darzustellenden Browserfenster gleicht, während der Editor dir im Hintergrund den dazugehörigen HTMLCode erstellt. Für die Gestaltung der Seite bedeutet das eine
beträchtliche Erleichterung. An dieser Stelle verwenden wir den
BlueGriffon jedoch als Quelltext-Editor.
Wie musst du vorgehen, um dein HTML-Dokument mit dem
BlueGriffon zu erstellen? Auf den folgenden Seiten findest du
eine Schritt-für-Schritt-Anleitung, an die du dich in Zukunft am
besten bei jedem neuen Dokument halten solltest.
Doch bevor es losgehen kann, musst du den Editor öffnen (Win:
Start > Programme > BlueGriffon, Mac: Programme > BlueGriffon).
3.2.1 Vor dem Arbeiten: Voreinstellung anpassen
Damit du problemlos mit dem BlueGriffon arbeiten kannst,
muss du eine Voreinstellungen anpassen. Wähle im Hauptmenu
BlueGriffon > Einstellungen. Es öffnet sich ein Dialogfenster
(Abbildung 3.2). Klicke dort auf «Dokumente». Deaktiviere die
Option «HTML-Kommentare anzeigen».
Abbildung 3.2: Die Einstellung "HTML-Kommentar anzeigen" deaktivieren
13
3 Webdesigneditor BlueGriffon
3 Webdesigneditor BlueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
3.3 Die ersten Schritte beim Erstellen eines
HTML-Dokuments
3.3.1 Schritt 1: Das Dokument im Editor erstellen
Gehe so vor, um ein neues HTML-Dokument zu erstellen:
1. Klicke mit der Maus auf den kleinen Aufklapppfeil rechts
neben dem Icon zum Erstellen einer neuen Datei. (Abbildung
3.3), und wähle dann «Weitere Optionen...» an.
Falls du ein bestehendes Dokument weiter bearbeiten möchtest,
klicke auf das entsprechende Icon und suche die entsprechende
Datei mit «Datei wählen...»
2. Passe in dem sich öffnenden Dialogfenster die Einstellungen
wie in Abbildung 3.4 an. Diese Einstellungen bestimmen, wie
das Dokument abgespeichert wird, und teilen dem Browser mit,
wie er es zu interpretieren hat.
3. Damit du im BlueGriffon den Quelltext schreiben und verändern kannst, musst du in die Quelltextansicht gehen, indem
du den dafür vorgesehenen Reiter anklickst. Per Voreinstellung
stellt der Editor die sogenannte WYSIWYG-Ansicht dar. Die
Reiter für die beiden Ansichten befinden sich ganz unten in der
Mitte der Bedienoberfläche. Sobald du den Quelltextreiter angewählt hast, solltest du den Code deines Dokumentes zu sehen
bekommen (Abbildung 3.5).
Nun könntest du eigentlich damit beginnen den Quellcode
einzutippen. Bevor du dich jedoch so richtig ans Tippen machst,
empfiehlt es sich, die Datei gleich abzuspeichern (siehe nächstes
Kapitel). Dafür gibt es unterschiedliche Gründe, der wichtigste
hat damit zu tun, dass sich sogenannte relative Adressen für
Links und externe Dateien mit einem schon abgespeicherten
Dokument leichter erstellen lassen (s. u. Kapitel 3.4).
14
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
3 Webdesigneditor BlueGriffon
Abbildung 3.3: Die noch leere Bedienoberfläche des BlueGriffon. Oben links die Datei-Icons (Neu erstellen / Öffnen).
Abbildung 3.4: Immer dran denken: Beim Erstellen eines neuen Dokuments die richtigen Einstellungen des Dokumenttyps wählen:
HTML5, Sprache deutsch (ch), Zeichensatz UTF-8, Textrichtung von links nach rechts.
Abbildung 3.5: Im BlueGriffon kannst du dasselbe Dokument in zwei unterschiedlichen Ansichten bearbeiten (WYSIWYG, Quelltext).
Um zwischen diesen hin und her zu wechseln, musst du die entsprechenden Reiter anwählen.
15
3 Webdesigneditor BlueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
3.3.2 Schritt 2: Dokument korrekt abspeichern
1. Um im BlueGriffon eine Seite abzuspeichern, kannst du
entweder auf Disketten-Icon klicken oder im Hauptmenu die
entsprechende Option anwählen.
2. Wähle den Speicherort deines Dokumentes. Dieser sollte ein
für alle Webdateien gemeinsamer Ordner sein. Während des
Kurses gehört das File ins Laufwerk «Transfer (T:)», dort in den
Ordner «webdesign», dann in deinen eigenen Ordner. (Zu Hause
erstellst du an einem sinnvollen Ort einen neuen Ordner für
deine Website und speicherst die Datei dort drin.) Ist im Dialogfenster gerade nicht das richtige Laufwerk gewählt, findest du es
durch Klicken auf den kleinen Pfeil der Auswahlleiste (Abbildung 3.6. Die Abbildung entstammt Windows XP, in anderen
Betriebssystemen sieht die Ansicht ähnlich aus.)
3. Benenne das HTML-Dokument. Beachte unbedingt folgende
Regeln für den Dateinamen:
a. Der Dateiname muss auf «.html» enden.
b. Der Dateiname darf keine Umlaute enthalten (ä, ö, ü etc.).
c. Es dürfen keine Sonderzeichen benutzt werden (+“*#ç&/()¢).
d. Leerschläge im Dateinamen sind verboten, verwende stattdessen den Unterstrich («erste_Seite.html» anstatt
«erste Seite.html»).
Das heisst, die folgenden Zeichen können problemlos verwendet
werden: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890_-.
3.3.3 Schritt 3: Den Quelltext schreiben.
Erstelle den Quelltext für dein Dokument. Speichere ihn regelmässig ab.
Abbildung 3.6: Um die Datei innerhalb der Verzeichnisstruktur des Betriebssystems am
richtigen Ort abspeichern zu könnnen, muss man die Laufwerkübersicht aufklappen.
16
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
3 Webdesigneditor BlueGriffon
3.3.4 Schritt 4. Du bewunderst dein Meisterwerk im
Browser
Wähle das Browser-Icon im BlueGriffon an (Abbildung 3.7)
Es öffnet sich ein kleines Dialogfenster (Abbildung 3.8). Dort
wählst du entweder mit «Durchsuchen» einen neuen Browser
aus oder du wählst einen schon vordefinierten Browser an.
Wenn du dich schon im Browser befindest, wählst du Datei >
Datei öffnen. Der Vorgang ist je nach Browser ein wenig anders
gestaltet, im Prinzip bleibt er sich jedoch gleich: Du suchst im
Betriebssystem nach dem Ordner, wo du deine HTML-Datei
abgespeichert hast, und wenn du sie gefunden hast, musst du die
Wahl noch abschliessend bestätigen, damit die Homepage vom
Browser dargestellt wird und du sie überprüfen kannst.
Abbildung 3.7: Um das Dokument im Browser ansehen und überprüfen zu können, musst du auf das Icon oben rechts klicken.
Abbildung 3.8: Den Browser auswählen, mit dem ich meine Seite ansehen will.
17
3 Webdesigneditor BlueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
3.3.5 Schritt 5 bis unendlich: Weiter bearbeiten
Wenn du das Ergebnis im Browser begutachtet hast, möchtest du
in den meisten Fällen an deinem Programmcode noch Änderungen vornehmen, sei es, weil du Fehler festgestellt hast, sei
es, weil du noch nicht fertig bist. Damit du nun nicht jedes Mal
von neuem die Programme aufstarten musst, lässt du am besten
sowohl den Editor als auch den Browser ständig und gleichzeitig
geöffnet und wechselst via Taskleiste zwischen den Programmen
hin und her.
Wenn du etwas ändern möchtest, machst du das natürlich wieder
im Editor. Nachdem du die Änderungen eingegeben hast, musst
du das Dokument jeweils erneut abspeichern.
Achtung: Dadurch erscheint die neue Version aber noch nicht
automatisch im Browser. Grund: Du musst dem Browser sagen,
dass sich auf der Harddisk eine aktuellere Version deines Programmcodes befindet, die er in sein Fenster laden soll. Nur dann
wird der neue Code dargestellt. Dazu musst du beim Browser
auf den Befehl Aktualisieren klicken (Abbildung 3.9).
3.4 Absolute versus relative Adressierung
HTML-Dokumente beinhalten in der Regel sehr viele Verweise
(Hyperlinks) auf andere Dateien. Es gibt zwei Möglichkeiten,
wie diese Referenzierung hergestellt werden kann:
Absolute Referenzen: Entweder du gibst eine sogenannt absolute Adresse ein, oder du gibst nur den relativen Pfad an. Die
absolute Adresse verweist auf einen spezifischen und einmaligen Ort im Internet (oder im lokalen System), also z.B. http://
de.selfhtml.org. Dies empfiehlt sich dann, wenn du einen Link
auf eine Seite ausserhalb deiner Website machen möchtest.
Relative Referenzen: Wenn du Verweise innerhalb deiner eigenen Site machen möchtest, solltest du immer relative Adressen
verwenden. Relative Adressen funktionieren nach dem Prinzip,
Abbildung 3.9: Eine im Editor veränderte Seite muss du im Browser neu laden.
18
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
dass sie ausgehend von dem Dokument, in dem du dich befindest, den Pfad zu der Datei angeben, zu der der Verweis führt.
Wenn also sowohl die aktuelle Datei und die Zieldatei im gleichen Verzeichnis liegen, besteht diese Pfadangabe allein aus dem
Dateinamen der Zieldatei, z.B. «kontakt.html». Der Pfad beginnt
somit nicht an einem absolut gesetzten Punkt im System.
3 Webdesigneditor BlueGriffon
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Stelle zunächst alle deine
HTML-Dokumente her (speichere sie also unter ihrem Namen
ab), bevor du sie untereinander
verlinkst, so kannst du dir wiederholtes mühseliges Nachbessern bei den Adressen ersparen.
3.5 Dateispeicherorte: Alle Dateien in dasselbe Hauptverzeichnis
Es empfiehlt sich, die Verzeichnisstruktur von Websites möglichst einfach und klar zu halten. Daher ist es enorm wichtig,
dass alle zur Website gehörigen Dateien (also HTML-Dokumente, aber auch Bilder, PDFs etc.) im selben Hauptverzeichnis der
Homepage liegen. Dies garantiert, dass die relativen Referenzen
auch noch funktionieren, wenn das Hauptverzeichnis als Ganzes
auf den Server hochgeladen wird.
Bei kleinen Projekten mit einer überschaubaren Menge von
Dateien hat das Ablegen der Homepagedateien auf derselben
Ebene, also in nur einem einzigen Ordner erhebliche Vorteile:
•
•
•
Keine Probleme bei internen Adressierungen von
Dateien (siehe obiger Abschnitt)!
Sortierbarkeit anhand der Namensgebung
Neue Betreuer und helfende Drittpersonen finden sich
schneller zurecht
Auf eine sinnvolle Ordnung muss trotzdem nicht verzichtet
werden. Auch auf einer Ebene können allein durch die Namensgebung quasi Unterordner kreiert werden. Ein Beispiel kann dies
verdeutlichen: Wird bei allen HTML-Dateien mit dem Kürzel
‚html’ und bei allen Bildern mit ‚pic’ usw. begonnen, wird
bereits nach Dateityp sortiert. Weiter kann durch Anreihen von
Wörtern feiner unterteilt werden, beispielsweise indem Dateiname und Seitentitel korrespondieren:
html_navigation_ueberuns.html
html_navigation_ueberuns_adressen.html
html_navigation_ueberuns_adressen_vorstand.html
pic_portrait_hans_mueller_100x200.jpg
pic_portrait_freddy_frei_100x200.jpg
19
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Um Überraschungen auf dem
Server zu vermeiden, speicherst
du sämtliche zur Site gehörigen
Dateien (Bilder und anderes) am
Besten gleich schon von Beginn
an im vorgesehenen Ordner ab.
3 Webdesigneditor BlueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
20
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
4 Formatierung mit CSS
4 Formatierung mit CSS
Worum es geht
HTML ist nicht die einzige Technologie, die man zum Erstellen einer Homepage benötigt, bloss die Elementarste. In den
vergangenen Jahren haben sich parallel zum Wachstum des Internets die darin verwendeten Technologien vervielfacht. Einen
besonderen Stellenwert hat dabei CSS (Cascading Style Sheets)
bekommen. Mit CSS wird es möglich, HTML-Tags weitreichend
zu formatieren und eine Webseite grafisch zu gestalten.
Du wirst in diesem Kapitel beispielhaft die Funktionsweise
folgender Konzepte kennenlernen:
• Die Integration von CSS mit HTML anhand der CSSSelektoren
• Der Einsatz verschiedener CSS-Eigenschaften zur Gestaltung
• Der Gebrauch einer externen "zentralen" CSS-Datei
• Die Anwendung von CSS auf Tags, Klassen und Einzel
Material und Referenzen
CSS ist in SelfHTML ausführlich beschrieben:
http://de.selfhtml.org/css
Weil SelfHTML in Bezug auf CSS nicht immer auf dem neusten
Stand ist, hier noch zwei Alternativen:
http://www.css4you.de, http://www.w3schools.com (englisch).
21
4 Formatierung mit CSS
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
4.1 CSS: Cascading Style Sheets
Stylesheets sind eine Ergänzung zu HTML. Es handelt sich dabei um eine von den meisten Browser verstandene Sprache zur
Definition von Formateigenschaften (Farben, Schriften, Ränder,
Abstände etc.) von HTML-Elementen. CSS wirkt sich also auf
die Darstellung von Webseiten aus. Mit Hilfe von Stylesheets
kannst du beispielsweise bestimmen, dass Links in der Schriftart
Helvetica, aber weder fett noch unterstrichen erscheinen und mit
der Farbe grün versehen werden. Angaben dieser Art sind mit
reinem HTML nicht möglich. Ausserdem lassen sich per CSS
auch Inhalte bzw. HTML-Elemente positionieren. Da man in
der Regel für eine Webseite in sämtlichen HTML-Dokumenten
dieselben Formateigenschaften anwenden möchte, gibt es zudem
die Möglichkeit, die CSS-Angaben zentral in einem eigenen
Dokument festzuhalten und alle HTML-Dokumente darauf
zugreifen zu lassen. Will man seine Website möglichst korrekt
programmieren, versucht man die semantische Strukturierung
mit HTML und die grafische Formatierung mit CSS umzusetzen.
Dieses Kapitel kann nur eine knappe Einführung in die Funktionsweise von CSS liefern, um die vielfältigen Möglichkeiten
dieser Technologie ausreizen zu können, braucht es jedoch eine
darüber hinaus gehende Vertiefung. Wie bei HTML gibt es alle
paar Jahre einen neuen Standard. Gegenwärtig ist das CSS3.
Unter http://www.webdesignkurs.ch/demos befinden sich einige
Beispiele dafür, was man mit CSS anstellen und wie man es
einsetzen kann.
4.2. CSS-Regeln definieren
Um einen HTML-Tag mittels CSS genauer zu definieren, deklariert man eine sogenannte Regel, die der folgenden Syntax
entspricht:
Selektor { Eigenschaft:Wert; }
An der Stelle des Selektors muss ein HTML-Elementtyp eingesetzt werden, den man neu formatieren möchte. So kannst du
beispielsweise die Formatierung des Tags für einen Textabsatz,
<P> ändern, indem du eine CSS-Regel wie folgt benutzt:
P { color:#0000ff; font-family:Verdana;}
Damit bestimmst du, dass ein Textabsatz blau und in der Schriftart Verdana ausgegeben wird. Wie du an dem Beispiel erkennen
kannst, lassen sich mehrere Eigenschaften innerhalb derselben
Regel definieren, indem sie durch ein Semikolon voneinander
getrennt werden. Die verschiedenen möglichen Regeln findest
du in SelfHTML aufgeführt.
22
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
4.3 Die Integration von CSS in HTML
Nun stellt sich die Frage, wie diese CSS-Defintionen in das
HTML eingebunden werden, damit der Browser es korrekt
anwendet. CSS-Angaben werden jeweils auf eine von drei Arten
eingesetzt, wobei die Differenz v.a. darin besteht, wie «nah» am
HTML bzw. wie «lokal» sie sind:
4.3.1 Direkt zum betroffenen HTML-Element hinzuschreiben
Man kann eine Stilangabe mittels des STYLE-Attributs direkt zu
einem HTML-Element hinzuschreiben, beispielsweise so:
<P STYLE="font-size:16px;">Text</P>
Die Besonderheit dieser Lösung ist, dass die Angabe nur genau
für dieses einzelne Vorkommnis eines Tag-Elements gilt.
4.3.2 Zentrale CSS-Definition innerhalb einer HTMLDatei
Wenn du CSS-Angaben für ein ganzes Dokument definieren
möchtest, empfehlen wir dir, die Definitionen im <HEAD> des
HTML-Dokumentes in einem eigenen Bereich unterzubringen,
der mit dem <STYLE>-Tag markiert wird. Die Angaben gelten
dann für alle einzelnen Vorkommnisse des entsprechenden
Elements («Tags») innerhalb dieses Dokumentes, nicht aber für
andere HTML-Dokumente.
<STYLE TYPE="text/css">
P {font-size:16px;}
</STYLE>
4.3.3 Globale CSS-Definitionen in einer externen CSSDatei
Hast du eine Website, die aus mehreren HTML-Dokumenten
besteht, deren Tags alle in der gleichen Weise mit CSS formatiert
werden sollen, empfehlen wir dir, die CSS-Angaben in eine separate Datei zu schreiben und alle beteiligten HTML-Dokumente anzuweisen, bei dieser einen externen CSS-Datei («stildatei.
css») die Stilangaben zu holen. Dazu fügst du in die betroffenen
HTML-Dokumente lediglich die folgende Zeile in den <HEAD>Bereich ein:
<LINK HREF="stildatei.css" REL="stylesheet"
TYPE="text/css" media="all">
Diese globale Vorgehensweise garantiert, die Darstellung durch
23
4 Formatierung mit CSS
4 Formatierung mit CSS
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
alle Dokumente einer Website konsistent zu halten – zudem ist
es dadurch ein Einfaches, durch eine Änderung der CSS-Datei
auf einen Schlag das Aussehen einer ganzen Website zu ändern,
ohne an einem einzigen HTML-Dokument eine Änderung vornehmen zu müssen. Ein Beispiel dafür findest du in unseren Demopages, wo zwei Webpages auf dieselbe CSS-Datei zugreifen.
Bei der Auswertung der CSS-Angaben geht der Browser so vor,
dass er lokale Angaben stärker gewichtet als globale.
4.4 CSS-Quellcode im BlueGriffon bearbeiten
CSS wird in der Regel in einem eigenen Dokument festgehalten,
das mit dem HTML-Dokument verknüpft wird (s. Kapitel 4.3.3).
Wie man ein solches CSS-Dokument erstellt, steht in Kapitel
5.4. An dieser Stelle geht es nur darum, wie man ein bestehendes
und schon mit meinem HTML-Dokument verknüpftes CSS-Dokument im BlueGriffon öffnen und als Klartext bearbeiten kann.
Um im BlueGriffon an den Quellcode eines CSS-Dokuments zu
gelangen, musst du das dazugehörige HTML-Dokument in der
WYSIWYG-Ansicht geöffnet haben. Dann wählst du im Hauptmenü unter «Konsole» die Option «Stile» an. Es öffnet sich
ein kleines Dialogfenster, das sämtliche mit der HTML-Datei
verknüpfte CSS-Dateien auflistet (Abbildung 4.1). Mit einem
Mausklick auf das gewünschte CSS-Dokument öffnest du den
entsprechenden CSS-Quellcode, den du nun bearbeiten kannst.
Um die Änderungen abzuspeichern, musst du auf den Button
«Änderungen speichern» klicken (Abbildung 4.2).
4.5 Spezifität: HTML-Tag, Klasse, Id
4.5.1 Elementweite CSS-Formatierung
CSS erlaubt es uns, die Darstellung sämtliche Vorkommnisse eines HTML-Elements (neu) zu formatieren. In diesem Fall setze
ich an die Stelle des Selektors einfach den HTML-Tag-Namen
(wie oben in Kapitel 4.2 bzw. Abbildung 4.2).
Abbildung 4.1: Die CSS-Stilkonsole
Abbildung 4.2.: Der Quellcode des CSS-Dokumentes mit Speicher-Button.
24
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
4.5.2 Klassenweite CSS-Formatierung
Es kann jedoch auch vorkommen, dass ich nicht sämtliche
Vorkommnisse eines HTML-Elements spezifisch gestalten will,
sondern nur eine Untergruppe davon, beispielsweise wenn ich
für bestimmte Textabschnitte eine eigene Farbgebung möchte,
die sie von den übrigen im Dokument abhebt. Dafür gibt es die
Möglichkeit sogenannte Klassen zu bilden (z.B. eine Klasse für
diese besonderen Abschnitte).
Wenn ich ein spezifisches Vorkommnis eines HTML-Elements
einer Klasse zuordnen möchte, muss ich ihm das CLASSAttribut hinzufügen. Diesem kann ich als Wert einen von mir
gewählten Klassennamen zuweisen, der die Funktion der Klasse
möglichst präzise bezeichnet. Das sieht dann z.B. so aus:
<P CLASS="notabene">Beachte: </P>
In den CSS-Angaben kann ich nun meine Definitionen dieser
Klasse direkt zuweisen, indem ich den Namen der Klasse als
CSS-Selektor verwende. Somit ist die Klassendefinition apriori
keinem speziellen HTML-Tag zugewiesen. Um eine Klasse als
solche kenntlich zu machen, muss ich vor den Klassennamen
einen Punkt «.» setzen. Also gemäss obigem Beispiel so:
.notabene { color:red;}
Nun weiss der Browser, dass alle Links mit dem <CLASS>Attribut und dem Wert «notabene» rot und ohne Unterstrich
dargestellt werden müssen.
4.5.3 CSS-Formatierung eines einzelnen Elements
Es kann auch vorkommen, dass ich nur ein einziges Vorkommnis
eines HTML-Elements formatieren möchte. Da kann ich entweder auf das <STYLE>-Attribut zurückgreifen (s.o. 4.3.1) oder
- und das empfehlen wir aus Gründen der Code-Stilistik - ich
verknüpfe dieses Tag-Vorkommnis mit den CSS-Definitionen,
indem ich ihm anhand des ID-Attributs eine eindeutige Identität
gebe. Das sieht dann beispielsweise so aus:
<P ID="hauptartikel">
...
</P>
Innerhalb der CSS-Angaben kann ich eine individuelle Definition für genau dieses einzelne Element vornehmen, indem ich den
ID-Namen als Selektor verwende und zu dessen Kennzeichnung
als individueller ID ein Rautezeichen («#») voransetze:
#hauptartikel {
background-color:#eaeae;}
25
4 Formatierung mit CSS
4 Formatierung mit CSS
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
4.6 Kombination und Vererbung der CSS-Definitionen
Selektoren lassen sich auch kombinieren, um ganz spezifische
Untergruppen von HTML-Vorkommnissen anzusprechen. So
bedeutet der folgende Selektor
.sidebar h1 {font-size:18px;}
dass die Schriftgrösse von 18 Pixel nur auf jene Titel erster Ordnung (<H1>) angewendet werden soll, die sich innerhalb eines
Elements befinden, das der Klasse «sidebar» zugeordnet
wurde.
Es gibt eine Reihe von unterschiedlichen Kombinationsmöglichkeiten. Mehr dazu findest du hier:
http://www.css4you.de/wscss/css04.html
Der Aufbau eines HTML-Dokumentes besteht aus einer hierarchischen Verschachtelung von verschiedenen HTML-Elementen,
angefangen beim <HTML>-Element. Nun ist es so, dass einige
CSS-Angaben sich von einem übergeordneten Elternelement auf
die untergeordneten Kindelemente weitervererben lassen. Dies
gilt insbesondere für die Textgrösse und -art. Daher genügt es,
wenn ich meine Standardtextdarstellung für den <BODY>-Tag
definiere:
body {
color:#fee7e7;
font-family:Times, serif;
font-color:#2c2c2c;}
Die obige Angabe wird nun nicht nur auf den Body, sondern
auch auf alle Kindelemente (z.B. <P>, <H1>) angewendet,
sofern sie keine eigenen Definitionen erhalten haben. Es sind
jedoch nicht alle CSS-Eigenschaften vererbbar, daher muss man
sich immer bewusst sein, ob die eingesetzte Eigenschaft vererbt
wird und ob man das überhaupt möchte. Einen Überblick über
die Vererbbarkeit der wichtigsten CSS-Eigenschaften findest du
hier:
http://www.css4you.de/shortref.html
Wenn du eine nicht vererbbare Eigenschaft von einem Elternerlement an ein Kindelement vererben möchtest, kannst du dem
Browser dies gezielt mitteilen:
P { margin:inherit;}
Nun übernimmt er für den Textabschnitt den Aussenabstand des
übergeordneten HTML-Tags.
26
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
4.7 Textformatierung
Text wird meistens innerhalb eines <P>-Elements geschrieben.
Dieser Tag verfügt über einige Attritubte, mit denen man die
Darstellung beeinflussen kann, z.B. COLOR, FACE etc. Diese
Attribute sind jedoch sehr limitiert in ihren Gestaltungsmöglichkeiten und gelten auch nach der aktuellen Auffassung als
veraltet, da sie die Formatierung nicht sauber von der Strukturierung unterscheiden. Die korrekte Formatierung von Text nimmt
man daher mittels CSS vor. Dafür gibt es eine ganze Reihe von
definierbaren Eigenschaften. Einige seien hier genannt:
Font-family dient der Bestimmung der Schriftart. Als Wert
kann die gewünschte Schriftart angegeben werden, z.B.
font-family:Courier;
Da jedoch nicht alle Rechner die gewünschten Schriften installiert haben, gibt es die Möglichkeit auf dem Server eine Schrift
bereit zu legen, die der Browser dann herunter lädt und verwendet. Dazu musst du die @font-face-Regel einsetzen. Bei unseren Demobeispielen findest du deren Einsatz illustriert (10.1.6)
font-size dient der Bestimmung der Schriftgrösse. Sie
kann entweder in relativen Masseinheiten wie em oder %
oder in absoluten Einheiten wie Pixeln angegeben werden
(Vgl. dazu: http://de.selfhtml.org/css/formate/wertzuweisung.
htm#numerische). Relative Angaben beziehen sich immer auf
die Grössenangaben des übergeordneten Elternelements. Der
Einfachheit halber empfehlen wir dir bis auf weiteres mit Pixelangaben zu arbeiten. Also z.B.
font-size:16px;
Font-style dient der Bestimmung des Schriftstils, kann also entweder normal (normal) oder kursiv (italic) bzw. schräg (oblique)
als Wert einnehmen. Letzteres für den Fall, dass die Schrift
kursiv nicht existiert.
font-style: italic;
font-weight dient der Bestimmung des Schriftgewichts und
kann als Wert normal, bold, bolder, lighter oder einen
Wert zwischen 100 und 900 einnehmen. Also z.B.:
font-weight: bold;
line-height dient der Bestimmung der Zeilenhöhe und
kann sowohl absolut (Pixel, Standardzeilenhöhen) oder relativ
(em, %) angegeben werden. Mittels dieser Angabe kann ich auch
Zeilenhöhen definieren, die geringer als normale Textzeilen sind,
womit man die Platzhalterproblematik in leeren Tabellenzellen
27
4 Formatierung mit CSS
4 Formatierung mit CSS
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
umgehen kann. Also z.B.
line-height:2px;
4.8 Das Box Modell, Block- vs Inline-Elemente
Wenn ein Browser einen Inhalt darstellt, dann sieht er dafür
immer eine rechteckige Fläche als Inhaltscontainer vor. Dieses
Rechteck wird als Box bezeichnet. Die Platzierung der Inhalte
mittels CSS muss sich somit an diesem Box Modell orientieren.
Dabei gilt es zu berücksichtigen, dass man sämtliche HTMLElemente für Inhalte in zwei Gruppen unterscheiden kann:
Block-Elemente und Inline-Elemente.
Der Unterschied besteht darin, dass Block-Elemente per Voreinstellung auf einer neuen Zeile beginnen und die gesamte Breite
ihres Elternelementes ausfüllen (und somit einen Zeilenumbruch
erzwingen; z.B.<P>, <H1>, <LI>, <DIV> etc.), während Inline-Elemente nur die Breite einnehmen, die ihr Inhalt tatsächlich
beansprucht (z.B. <A>, <IMG>, <SPAN> etc). Daher befinden
sich Inline-Elemente immer innerhalb von Block-Elementen und
daher lässt sich bei Block-Elementen die Höhe und Breite auch
per CSS definieren, während ich bei Inline-Elementen nur den
Innenabstand («padding») formatieren kann.
Anhand der CSS-Eigenschaft «display» und des Wertes «inlineblock» kann ich ein eigentliches Block-Element gegen innen als
Block-Element und gegen aussen als Inline-Element definieren.
Dadurch kann ich Block-Elemente wie <P> gleichzeitig mit
einer spezifischen Breite versehen und sie im Dokumentfluss
jedoch nebeneinander statt untereinander anordnen.
Mit CSS kannst du diese Boxen individuell grafisch gestalten
und positionieren. Dabei musst du verstehen, wie eine Box
aufgebaut ist. Die Abbildung 4.3 illustriert diesen Aufbau. Die
Breite bzw. Höhe einer Box setzt sich zusammen aus der Breite
bzw. Höhe des Inhalts plus jener des Innenabstands (padding)
Abbildung 4.3: Aufbau des Boxmodells.
28
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
(mal 2) plus jener des Rahmens (border) (mal 2) plus jener
des Aussenabstands (margin) (mal 2). Dabei musst du jedoch
berücksichtigen, dass man dem Aussenabstand keine Hintergrundfarbe geben kann. Ausserdem gilt es zu beachten, dass
die Aussenabstände von zwei vertikal übereinander liegenden
Boxen sich überschneiden (Stichwort "collapsing margin"). Das
heisst, wenn ich zwei Boxen mit Aussenabständen von 20 Pixeln
respektive 30 Pixeln habe, wird der Aussenabstand zwischen
ihnen 30 Pixel betragen. Der Aussenabstand kann übrigens auch
einen negativen Wert wie -10 Pixel einnehmen, wodurch das
betreffende Element sein vorangehendes um 10 Pixel überschneidet und von seinem nachfolgenden überdeckt wird. Von
den überschneidenden Aussenabständen ausgenommen sind
u.a. "gefloatete" Elemente (Kapitel 4.9.2), absolut positionierte
Elemente (Kapitel 4.9.1) und Inline-Blockelemente.
4.9 Positionierung und Layout mit CSS
Mit CSS lassen sich die Inhalte auch innerhalb des Browserfensters wunschgemäss positionieren. Das kann man erreichen,
indem man ein bestimmtes Block-Element direkt definiert, oder
man verwendet das unsichtbare Blockelement <DIV> und setzt
dieses als Container-Box für mehrere darzustellende Inhalte
(Texte, Links, Grafiken etc.) ein, in den ich diese dann einbette.
Block-Elemente lassen sich mit der CSS-Eigenschaft position sowohl absolut wie auch relativ positionieren (siehe dazu
unten Kapitel 4.9.1). Alternativ kann man Block-Elemente mit
der Eigenschaft float im Dokumentfluss aneinander reihen
(siehe unten Kapitel 4.9.2). Aufbauend auf diesen beiden Techniken lassen sich diverse Layoutkonzepte umsetzen; und unter
Einbezug von Javascript (siehe Kapitel 10.2) lassen sich Boxen
auch bewegen und unsichtbar machen.
Um auf ein Block-Element per CSS zuzugreifen, musst du ihm
entweder mit dem ID-Attribut eine eindeutige oder mit dem
CLASS-Attribut eine gruppenspezifische Kennzeichnung geben.
4.9.1 Die Eigenschaft «position»
Wenn der Browser eine Seite darstellt, hält er sich in der Reihenfolge der Boxen an den Dokumentenfluss im Quellcode, in
dem ein Element nach dem anderen folgt. Mit der Eigenschaft
position:relative; änderst du zunächst einmal noch
nichts an dieser Aneinanderreihung. Aber wenn du die AbstandsEigenschaften left oder right, top oder bottom hinzu
nimmst, kannst du die Position des fraglichen Elements in
Abhängigkeit zum vorangehenden Element positionieren (Im
Beispiel in Abbildung 4.5 wird ein DIV-Container in der Höhe
relativ zum vorangehenden Element, einem Abschnitt, positioniert). Der eigentliche Dokumentfluss wird dadurch jedoch nicht
29
4 Formatierung mit CSS
4 Formatierung mit CSS
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
verändert, die nachfolgenden Elemente werden an die «eigentliche» Position des Elements angefügt.
Wenn man ein Element mit position:absolute; und den
dazugehörigen Abstands-Eigenschaften innerhalb des Browserfensters platziert, wird es aus dem Dokumentenfluss heraus
gelöst. Daher wird es mit top oder left in Abhängigkeit zum
nächsten Elternelement, das selber mit relative oder absolute positioniert wird, positioniert, oder sonst in Abhängigkeit
Abbildung 4.4: Der Quellcode einer Seite, die einen DIV-Container relativ und einen absolut positioniert.
Abbildung 4.5: Die entsprechende Darstellung im Browser. Während die relativ positionierte Box sich innerhalb des Dokumentflusses auf den vorangegangenen Abschnitt bezieht, wird die absolut positionierte Box unabhängig vom Dokumentfluss platziert.
30
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
zum BODY . Das kann dazu führen, dass ein solches Element
andere Elemente innerhalb des Dokumentflusses grafisch überlagert (vgl. dazu den zweiten DIV-Container in Abbildung 4.5).
Ausserdem musst du wissen, dass das Element dadurch zu einem
Inline-Block-Element wird, dass nicht mehr automatisch die
gesamte Breite des Dokuments einnimmt.
Beachte: Du musst zwischen absoluter und relativer Positionierung einerseits und zwischen absoluten und relativen Wertangaben andererseits unterscheiden. Darum kann es durchaus eine
absolute Positionierung anhand von relativen Werten wie auch
eine relative Positionierung anhand von absoluten Werten oder
umgekehrt geben. Also z.B.:
DIV {
position: absolute;
left: 10%;}
oder
DIV {
position: relative;
left: 10px;}
Mit position:fixed; lässt sich eine Box innerhalb des
Browserfensters fixieren, selbst wenn die BesucherIn den Rest
der Seite scrollt. Eine fixierte Box befindet sich wie eine absolut
positionierte ausserhalb des Dokumentflusses. Beachte, dass du
beim Gebrauch dieses Werts die unterschiedlichen Bildschirmgrössen deiner SeitenbesucherInnen berücksichtigen solltest.
4.9.2 Die Eigenschaft «float» und clearing
Mit der CSS-Eigenschaft float kann man ein Element rechtsoder linksbündig innerhalb seines Containers bzw. Elternelements platzieren, so dass der nachfolgende Inhalt dieses Containers das Element «umfliesst», d.h. nicht vertikal darunter,
sondern horizontal auf der selben Höhe, also «daneben» dargestellt wird (s. Abbildung 4.7). Die Eigenschaft float alleine
macht das Element zunächst zu einem Inline-Blockelement, dem
man eine Breite zuweisen muss, wenn es breiter als sein Inhalt
werden soll.
Ausserdem wird mit der Eigenschaft float ein Element aus dem
normalen Dokumentfluss heraus genommen, weshalb sich die
übrigen Elemente so verhalten, als wären die gefloateten Elemente nicht vorhanden. Das führt dazu, dass die Container-Box
eines bzw. mehrerer gefloateter Elemente zu kleine Dimensionen
erhält. Damit die Grösse der Container-Box die enthaltenen Elemente tatsächlich umfasst und die gefloateten Elemente nicht die
nachfolgenden überlagern, musst du die Container-Box anhand
31
4 Formatierung mit CSS
4 Formatierung mit CSS
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
des "Clearfix Hacks" mit einem virtuellen und unsichtbaren Element versehen, das unten an die gefloateten Elemente angefügt
wird, ohne selber gefloatet zu sein (clear:both). Dadurch
erhält der Inhalt der Container-Box die benötigte Höhe. (Siehe
Abbildungen 4.6 und 4.7) Alternativ lässt sich die Eigenschaft
clear:both auch einem auf die gefloateten Elemente nachfolgenden Element zuweisen.
Der Vorteil eines Layouts mit float besteht vor allem darin,
dass man damit dynamische Layouts gestalten kann, die sich der
aktuellen Breite des Ausgabefensters anpassen können. Siehe
dazu auch das Demobeispiel 10.1.5.
Abbildung 4.6: Der Quellcode einer Seite, die die Eigenschaft float einsetzt und daher auch den clearfix-Hack benötigt.
Abbildung 4.7: Die entsprechende Darstellung im Browser. Beachte, dass die Reihenfolge der Spalten gegenläufig zu jener des
Dokumentenflusses ist
32
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
5 WYSIWYG-Editor BllueGriffon
5 Der BlueGriffon als
WYSIWYG-Editor
Worum es geht
Wie dir schon aufgefallen ist, kann der BlueGriffon mehr als
nur einfach Quellcode schreiben. Das hat damit zu tun, dass er
ein sogenannter WYSIWYG-Editor ist. Wie schon in Kapitel 3
erwähnt, kann man in einem WYSIWYG-Editor in einer Benutzeroberfläche arbeiten, die dem darzustellenden Browserfenster
gleicht, während der Editor dir im Hintergrund den dazugehörigen HTML-Code erstellt. Dies kann die Gestaltung der Seite
sehr erleichtern.
Du wirst nach dem Durcharbeiten dieses Kapitels folgende Techniken beherrschen:
• HTML in der WYSIWYG-Ansicht erstellen
• Den Umgang mit den verschiedenen Ansichten
• Erstellen eines externen CSS-Dokuments
• CSS in der WYSWYG-Oberfläche definieren
Material und Referenzen
Es werden dieselben Materialien wie in den vorangegangenen
Kapiteln benötigt.
33
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.1 Die immergleichen ersten Schritte beim
Erstellen eines jeden HTML-Dokuments
Wie man ein neues Dokument erstellt und für die Bearbeitung
vorbereitet, haben wir schon im Kapitel 3.3 gezeigt. Im Weiteren zeigen wir dir dasselbe Vorgehen unter der Verwendung der
WYSIWYG-Darstellung des BlueGriffon.
Gehe so vor, um ein neues HTML-Dokument zu erstellen:
1. Klicke mit der Maus auf den kleinen Aufklapppfeil rechts neben dem Icon zum Erstellen einer neuen Datei. (Abbildung 5.1),
und wähle dann «Weitere Optionen...» an.
Falls du ein bestehendes Dokument weiter bearbeiten möchtest,
klicke auf das entsprechende Icon und suche die entsprechende
Datei mit «Datei wählen...»
2. Passe in dem sich öffnenden Dialogfenster die Einstellungen
wie in Abbildung 5.2 an. Diese Einstellungen bestimmen, wie
das Dokument abgespeichert wird, und teilen dem Browser mit,
wie er es zu interpretieren hat.
3. Gehe im Hauptmenu zu Format > Seiteneigenschaften. Es öffnet sich ein Dialogfenster (s. Abbildung 5.3). A) Füge dort den
Titel des aktuellen Dokuments ein (Beachte, dass im Head die
Regeln für Sonderzeichen berücksichtigt werden müssen, wie
sie in Kapitel 13.4 erwähnt werden!). B) Füge die gewünschten
Metaangaben ein und bestätige mit «OK».
4. Speichere die Datei am richtigen Ort ab und berücksichtige
die entsprechenden Regeln für Dateinamen: keine Umlaute, keine Leerschläge und keine Sonderzeichen (Vgl. Kapitel 3.3.2)!
5. Verknüpfe die Datei mit einer CSS-Datei (Kapitel 5.4)
Abbildung 5.1: Die noch leere Bedienoberfläche des BlueGriffon. Oben links die Datei-Icons (Neu erstellen / Öffnen).
34
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
5 WYSIWYG-Editor BllueGriffon
Abbildung 5.2: Immer dran denken: Beim Erstellen eines neuen Dokuments die richtigen Einstellungen des Dokumenttyps wählen:
HTML5, Sprache deutsch (ch), Zeichensatz UTF-8, Textrichtung von links nach rechts.
Abbildung 5.3: Die Seiteneigenschaften definieren: 1. Titel setzen, 2. Metaangaben
setzen.
35
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.2 Arbeiten in der WYSIWYG-Ansicht
Per Voreinstellung zeigt uns der BlueGriffon die WYSIWYGDarstellung (Abbildung 5.4). Anstatt sich im Quelltext abzumühen, kann man hier die Webseite in der mehr oder weniger
identischen Darstellung bearbeiten, die man nachher im Browser
zu sehen bekommt. Die Arbeitsweise ist somit jener in Word
vergleichbar, da der Editor den HTML-Code für dich erstellt.
Auf den ersten Blick könnte man meinen, dass das Arbeiten in
WYSIWYG die Entwicklung einer Website so sehr vereinfacht,
dass das Arbeiten im Quellcode sich damit erübrigt. Dem ist
jedoch nicht immer so. Bei anspruchsvolleren Problemen lässt
es sich kaum vermeiden von Mal zu Mal in den Quellcode zu
wechseln, um diese dort zu lösen. Darum sollte man keine Scheu
vor dem Quellcode haben und immer wieder einmal einen Blick
in die Quell-Ansicht werfen. Denn letztlich ist es ja der Quellcode, der auf dem Server liegt und vom Browser ausgelesen
wird.
Abbildung 5.4: Die beiden Reiter zum Wechseln der Ansicht befinden sich unten in der Mitte des BlueGriffon.
36
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
5 WYSIWYG-Editor BllueGriffon
5.3 Inhalte einfügen
Die WYSIWYG-Ansicht bietet dir eine Reihe von Optionen,
um einen Inhalt per Menu und Mausklick einzufügen. Unter
anderem findest du im Hauptmenu einen eigenen Menupunkt
Einfügen (s. Abbildung 5.5). Dort bieten sich dir eine Vielzahl
von Möglichkeiten an, wovon du jedoch einige auch über Icons
anklicken kannst.
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Wenn du Text aus «Word»
oder einem anderen Textverarbeitungsprogramm einfügen
möchtest, gehe im Hauptmenu
auf Bearbeiten > Einfügen
ohne Formatierung.
Übrigens: Wenn du in der WYSIWYG-Ansicht arbeitest, siehst
du ganz zuunterst links in der Bedienoberfläche immer, wo du
dich gegenwärtig mit dem Cursor innerhalb der Verschachtelung
der HTML-Struktur befindest (ausgehend vom <BODY>, in
Abbildung 5.5 im <P>-Bereich). Das kann dir bei der Orientierung helfen. Ausserdem kannst du über diese Darstellung auch
bestimmte HTML-Bereiche markieren.
Abbildung 5.5.: Beachte, dass das Hauptmenu in OS X ausserhalb der Bedienoberfläche am oberen Ende des Bildschirms liegt.
37
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.3.1 Auswahl der Textart oder eines DIV-Containers
Beachte :: :: :: :: :: :: :: :: :: :
Die Textart ist nicht mit der
Schriftart zu verwechseln! Wie
man diese definiert, findest du
im Kapitel 5.3.7 bzw. 10.1.7
Von besonderer Wichtigkeit ist die korrrekte Auswahl der
Textart (also z.B. P, H1, H2 etc.). Diese ist in zweierlei Hinsicht relevant. Zum einen kannst du anhand der Textart deine
Seite anschliessend mit CSS gestalten, beispielsweise indem du
allen Titeln erster Ordnung dieselbe Darstellung zuweist. Zum
anderen spielt die korrekte Zuweisung der Textart auch für die
Suchmaschinen eine Rolle. Ein Wort in einem Titel hat ein grösseres Gewicht als eines in einem gewöhnlichen Paragraphen.
Achte darauf, dass du wenn möglich alle Texte mit einer Textart
auszeichnest (ausgenommen Links und Listen natürlich).
Um einem Text eine Textart zuzuweisen, kannst du entweder
den Text zuerst schreiben, ihn dann markieren und ihm anschliessend die Textart zuweisen, oder du wählst zuerst die Textart und
beginnst dann zu schreiben. Du kannst die Textart in der zweiten
Menuzeile auswählen. (s. Abbildung 5.6).
Da man mit CSS häufig nicht nur einen spezifischen Tag formatieren möchte, sondern auch einen grösseren einheitlichen
Bereich mit verschiedenen Inhalten, werden dafür anhand des
DIV-Tags sogenannte Container für andere Inhalte erstellt (Vgl.
auch Kapitel 4.9). Einen solchen DIV-Container kann man
ebenfalls im Auswahlmenu für Textarten erstellen. Will man
nur einen Ausschnitt eines Inline-Elements formatieren, kann
man den SPAN-Tag verwenden (vgl. Kapitel 13.2.12), dieser ist
jedoch im Gegensatz zum DIV-Tag ein Inline-Element, nimmt
also nicht die gesamte Zeilenbreite ein. Den SPAN-Tag findest
du im Hauptmenu unter Format > Span.
Abbildung 5.6: Auswählen der Textart oder eine DIV-Containers.
38
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
5 WYSIWYG-Editor BllueGriffon
5.3.2 Link oder Grafik einfügen
Links sind sehr wichtig und daher gibt es dafür auch ein eigenes
Icon im BlueGriffon (s. Abbildung 5.7). Wie du dem Dialogfenster entnehmen kannst, das sich beim Anklicken des Link-Icons
öffnet, gibt es einige Optionen, die man bei einem Link näher
definieren kann. In der Regel wirst du eine relative Verknüpfung
zu einer schon bestehenden Datei erstellen. Wenn du dein aktuelles Dokument sauber abgespeichert hast, wird der BlueGriffon
dies erkennen und automatisch eine relative Adresse einfügen.
Ausserdem kannst du auch eine Mailadresse einfügen, indem
du statt "http://" das Protokollkürzel "mailto:" vor die Adresse
setzt. Des weiteren kannst du einen beratenden Titel setzen (ergänzt im Quellcode das Attribut ALT), der beim Verweilen der
Maus über dem Link nähere Auskunft über das Ziel enthalten
kann. Und zu guter Letzt kannst du über die Option Zielfenster
bestimmen, ob die Zieldatei in einem eigenen Fenster geöffnet
werden soll (ergänzt im Quellcode das Attribut TARGET).
Das Einfügen einer Grafik funktioniert nach dem selben Prinzip. Das Icon dazu befindet sich drei Icons links von jenem des
Links. Beachte, dass eine Grafik immer mit einem alternativen
Text versehen werden sollte (im Quellcode das Attribut ALT).
Dann kann sie auch von Browsern für Sehbehinderte wiedergegeben werden und die Suchmaschinen wissen besser damit
umzugehen.
Abbildung 5.7.: Einen Link einfügen. Das Dialogfenster bietet einige Optionen, um den Link näher zu definieren.
39
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.3.4 Listen und Textausrichtung
Um eine unnummerierte Liste zu erstellen, wählst du einfach das
enstprechende Icon in der zweiten Iconzeile an (s. Abbildung
5.8). Willst du eine nummerierte Listen, wählst du das Icon
rechts davon. Auf der selben Zeile findest du auch die Icons, um
deinen Text (innerhalb eines Block-Elements) auszurichten.
5.3.5 Tabellen einfügen
So lange man CSS noch nicht aus dem FF beherrscht, sind
Tabellen der Schlüssel zu einem ansprechenden Layout. Das
Erstellen einer Tabelle im BlueGriffon ist ein Kinderspiel. Das
entsprechende Icon befindet sich links in der ersten Iconzeile (s.
Abbildung 5.9). Um die Tabellen-Eigenschaften präzise zu definieren, musst du nach dem Erstellen das Icon erneut anklicken
(mehr zum Umgang mit Tabellen im Kapitel 7).
Abbildung 5.8: Eine unnummerierte Liste erstellen.
Abbildung 5.9: Eine neue Tabelle erstellen. Beim Erstellen kann man gleich die Anzahl Spalten und Zeilen bestimmen.
40
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
5 WYSIWYG-Editor BllueGriffon
5.3.6 Bestehende Objekte verändern
Möchte man ein schon eingefügtes Objekt (Bild, Tabelle, Link
etc.) nachträglich verändern, so lässt sich dies am einfachsten
durch Doppelklick auf das entsprechende Objekt erreichen. Sobald man das Objekt dadurch aktiviert hat, erscheint das dazugehörige Dialogfenster, mit dem du die Eigenschaften des Objektes
neu einstellen kannst. (Beachte, dass dies bei Tabellen etwas
schwieriger ist, sobald sie einen Inhalt in den Zellen enthalten.)
Eine Alternative zum Doppelklick ist der Weg über das Kontextmenu, in das du immer mit der rechten Maustaste gelangst.
Schlagen alle Versuche fehl, gibt es stets noch die Möglichkeit,
das Problem an der Wurzel anzupacken, also im Quellcode.
5.3.7 Klassen- oder Id-Attribute zuweisen
Damit du ein Design mit CSS erstellen kannst, wirst du mit
Klassen und Ids arbeiten müssen (s. Kapitel 4.5). Der BlueGriffon macht es dir sehr leicht, ein HTML-Element mit einem
Klassen- oder Id-Attribut zu versehen und es damit dieser Klasse
oder Id zuzuordnen. Wähle zunächst das enstprechende Element mit der Maus aus, damit BlueGriffon erkennt, worauf du
das Attribut anwenden willst. Ob der BlueGriffon das richtige
Element erfasst hat, siehst du daran, ob dieses Element in der
Verschachtelungsreihe (zuunterst links im Editor) als letztes
Element dargestellt wird (in Abbildung 5.10 ist dies <P .neue
Klasse>). Dann kannst du dem Element eine Id und/oder eine
Klasse zuweisen, indem du diese im entsprechenden Menu in
der dritten Icon-Zeile auswählst oder neu eintippst (s. Abbildung
5.10).
Abbildung 5.10: EInem HTML-Element ein Klassenattribut zuweisen (im Beispiel nennen wir die Klasse "Disclaimer_Klasse")
41
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.3.8 Verschiedene Schriftarten als Webfonts einfügen
BlueGriffon bietet eigens eine Option, um sogenannte Webfonts in die eigene Website einzubinden. Dafür greift er auf die
beiden gegenwärtig existierenden Online-Ressourcen für solche
Schriftarten zurück: FontSquirrel (http://www.fontsquirrel.com)
und Google Webfonts (http://www.google.com/webfonts). Unter
Einfügen > Web-Zeichensätze lassen sich die auf diesen Websiten zur freien Verwendung bereit stehenden Schriften integrieren
(s. Abbildung 5.11). Beachte, dass du online sein musst, wenn
du Schriften aus diesen Ressourcen einbetten möchtest. Je nach
Anbieter sieht das Vorgehen der Einbindung ein wenig anders
aus. Wir zeigen hier die Einbindung von Schriftarten, die über
FontSquirrel bezogen werden.
Nach dem Anwählen der FontSquirrel-Option öffnet sich ein
Dialogfenster (s. Abbildung 5.12). In diesem kann man die
Schriftart auswählen. Dabei sollte man sicherstellen, dass man
die Schriftart auch herunterlädt, damit sie auf den eigenen
Server geladen werden kann. Daher musst du die Option Nein,
Verzeichnis angeben, wo das Schriftpaket gespeichert werden
anwählen und dann den Speicherort der Schrift und der
dazugehörigen Stildatei festlegen (Siehe auch das entsprechende
Demo-Beispiel in Kapitel 10.1.6).
soll
Abbildung 5.11: Webzeichensätze lassen sich mit dem BlueGriffon bequem einbinden.
42
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Abbildung 5.12: Das Dialogfenster um eine Schrit in FontSqurrel auswählen zu können. Die Funktion ist nur zugänglich, wenn man online ist.
43
5 WYSIWYG-Editor BllueGriffon
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.4 CSS per externem Stylesheet einbinden
Nachdem du die Vorteile von CSS schon kennen gelernt hast,
wirst du wissen wollen, wie du im BlueGriffon eine externe
und zentrale CSS-Datei für deine Website erstellen kannst. Im
Folgenden wird dir das sachgerechte Vorgehen Schritt für Schritt
geschildert. Beachte, dass wir dir das Erstellen dieser Datei
schon zu einem frühen Zeitpunkt empfehlen. Im Prinzip gehört
dies zu den ersten Schritten beim Erstellen einer Website.
Ausgangspunkt des Vorgehens ist ein bestehendes HTML-Dokument.
5.4.1 Externes Stylesheet erstellen
1. Gehe in die WYSIWYG-Ansicht.
Abbildung 5.13: 1. Stilkonsole öffnen. 2. In der Stilkonsole über das "+"-Zeichen ein neues Stylesheet anlegen.
Abbildung 5.14: Ein neues Stylesheet anlegen.
44
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
2. Wähle im Hauptmenu Konsolen > Stile. Es öffnet sich die
Stilkonsole (s. Abbildung 5.13)
3. In der Stilkonsole klickst du ganz unten (s. Abbildung 5.13)
auf das «+»-Zeichen. Es öffnet sich das Dialogfenster zum Erstellen eines neuen Stylesheets (s. Abbildung 5.14).
4. Innerhalb des Dialogfensters wähle die Option Mit dem Dokument verlinkt an (s. Abbildung 5.14).
5. Klicke auf Neue Datei und speichere die neue Datei im
richtigen Verzeichnis mit dem Dateiformat .css ab. Beachte die
Regeln für Dateinamen: Keine Umlaute, keine Leerschläge und
keine Sonderzeichen.
6. Wähle die Option URL relativ zur Seite, damit die Pfadangabe relativ gesetzt wird (sie sollte dann sehr kurz werden).
7. Bestätige mit OK.
Nun ist dein Stylesheet erstellt und mit dem HTML-Dokument
verknüpft. Im Folgenden geht es darum, die CSS-Formatangaben bzw. die Stil-Eigenschaften darin einzufügen.
Sofern du in deinem Dokument mehrere CSS-Dateien einbinden
möchtest, kannst du den Vorgang wiederholen. Neue Formatdefinitionen werden automatisch in der zuletzt erstellten und in der
Stil-Konsole zuunterst aufgelisteten CSS-Datei eingefügt. Möchtest du die Reihenfolge der verschiedenen CSS-Dateien ändern,
musst du diese im Quellcode im Head neu anordnen.
45
5 WYSIWYG-Editor BllueGriffon
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
5.4.2 Stylesheet mit Stil-Eigenschaften-Konsole bearbeiten
Auch für die CSS-Datei bietet der BlueGriffon eine praktische
Alternative zum Arbeiten im Quellcode: Die Stil-EigenschaftenKonsole. Sie erlaubt dir, ein handliches Bearbeiten der CSS-Eigenschaften, ohne dass du jeweils sämtliche möglichen Eigenschaften auswendig kennen müsstest.
7. Wähle im Hauptmenu Konsolen > Stil-Eigenschaften. Die
Konsole für die Stil-Eigenschaften wird geöffnet (s. Abbildung
5.15)
8. Platziere den Cursor innerhalb des zu formatierenden Textes
oder wähle das zu formatierende Objekt (Grafik etc.) per Mausklick an. Der Quellcode des betroffenen HTML-Bereichs wird in
der Stil-Eigenschaften-Konsole in der obersten Zeile dargestellt.
Abbildung 5.15: Die Stil-Eigenschaften-Konsole mit den aufklappbaren OptionenMenus.
46
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
(in Abbildung 5.15: «<p class="Disclaimer_Klasse"> Hier lässt
sich per WYSIWYG der Inhalt...») Falls dein Dokument noch
leer ist, klicke einfach in die leere Fläche, dann wird der standardmässig eingefügte P-Tag ausgewählt.
9. Wähle in der Stil-Eigenschaften-Konsole im Menu unter Stile
anwenden auf die Option Alle Elemente des gleichen Typs...
Damit teilst du dem BlueGriffon mit, dass er die vorgenommenen Formatierungen nicht nur auf dieses einzelne Vorkommnis
des gewählten HTML-Tags anwenden soll, sondern auf alle
Vorkommnisse. Wenn du nur eine Klasse oder eine einzelne Id
definieren willst, kannst du die ensprechende Option im Menu
anwählen. Das setzt jedoch voraus, dass du die dafür benötigten
Klassen- oder Id-Attribute im HTML schon vergeben hast (vgl.
Kapitel 5.3.7).
10. Innerhalb der Stil-Eigenschaften-Konsole findest du eine
Vielzahl an anwählbaren Optionen, um HTML-Elemente zu
formatieren. Wähle jene aus, die du für dein Design benötigst.
Es ist sinnvoll, wenn du weisst, welche CSS-Eigenschaften du
auf welches HTML-Element anwenden kannst. Die Stil-Eigenschaften-Konsole des BlueGriffon kann dir jedoch Anhaltspunkte liefern, was überhaupt alles möglich ist. Denk zudem daran,
bei den Schriftarten nur eine der vier Standardschriften oder
Webfonts zu verwenden (vgl. Kapitel 5.3.8).
11. Wenn du den Quellcode deiner Stylesheet-Datei ansehen
möchtest, musst du in der Stilkonsole (s. Abbildung 5.14), auf
den Namen des Stylesheets doppelklicken. In dem sih öffnenden
Quellcodeeditor kannst du dein CSS auch in der Quelle verändern (s. Abbildung 5.16). Beachte, dass du die Änderungen
darin anschliessend mit einem Mausklick speichern musst (mit
Änderungen speichern), da sie sonst verloren gehen.
Abbildung 5.16: Die Stil-Datei lässt sich auch in der Quelle editieren. Denk unbedingt
daran, sie nach der Änderung abzuspeichern!
47
5 WYSIWYG-Editor BllueGriffon
5 WYSIWYG-Editor BllueGriffon
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
48
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
6 FTP - File Transfer
Worum es geht
Damit einmal erstellte Webseiten im Internet angesehen werden
können, müssen sie überhaupt erst ins Internet gestellt werden.
Dazu braucht man Zugang auf einen Web-Server sowie ein
entsprechendes Programm zum Verschieben der Dateien: das
FTP-Programm.
Du wirst nach dem Durcharbeiten dieses Kapitels wissen:
• wie man eine Homepage ins Internet lädt
• welche Software man dazu benötigt und wie sie zu bedienen ist
• welche Zugangsinformationen ein Web-Server verlangt
Material und Referenzen
Die benötigten Programme findest du auf der beiliegenden
Kurs-CD. Evtl. finden sich auch alternative FTP-Programme im
Internet (http://www.google.ch). Solltest du keine allzu hohen
Ansprüche stellen, wirst du auch mit einem Gratisprogramm
(Freeware) zurecht kommen.
Weiterführende Hinweise dazu, wie man sich Webspace bei
einem Provider beschafft, finden sich im Kapitel 11.
49
6 FTP – File Transfer Programm
6 FTP – File Transfer Programm
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
6.1 Dateien per FTP im Internet verschieben
Hat man seine Homepage im Editor programmiert und im Browser geprüft, wird man sie irgendwann ins Internet stellen wollen.
Hierzu benötigst du ein weiteres Programm. Denn mit dem
Browser kannst du zwar Homepages aus dem Internet auf deinen
Rechner herunterladen und ansehen, aber du kannst damit nicht
deine eigenen Webseiten ins Netz stellen. Für diesen Zweck
benötigt man ein FTP-Programm, mit dem man sich auf einem
Web-Server einloggen und die Dateien dort hin verschieben
kann. FTP steht übrigens für «File Transfer Protocol».
Wie kommen meine Dateien, die ich auf meinem Computer
erstellt habe, auf einen Web-Server?
6.2 Schritt-für-Schritt-Anleitung
Allgemeine Voraussetzungen
6.2.1
Zunächst brauchst du jemanden (einen so genannten
Provider, oder Host), der dir Speicherplatz für deine Website
im Internet gibt. Das ist nicht so schwierig und ist detailliert im
Kapitel 11 beschrieben. Im Kurs verwenden wir den Webserver
www.webdesignkurs.ch.
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Memory-Stick adé! Wer je auf
den Geschmack eines FTPServers gekommen ist und in
der Regel an Rechnern arbeitet,
die mit dem Internet verbunden
sind, kann vielfach auf einen
Memorystick verzichten.
6.2.2
Damit du eine Verbindung mit dem Web-Server herstellen kannst, wo du den Speicherplatz gemietet hast, musst du
wissen, wie er heisst bzw. was seine Adresse ist, was deine
UserID (= Benutzername) und dein Passwort für den Zugang
sind. Diese Angaben solltest du nach der Anmeldung von deinem Provider zugeschickt bekommen haben.
Wir benutzen im Kurs die folgenden Werte (Abbildung 6.1):
SERVER (HOSTNAME): www.webdesignkurs.ch
BENUTZERNAME (USERID): web446f2
PASSWORT: wird im Kurs mitgeteilt
6.2.3
Dann musst du auf deinem Computer zu Hause ein
FTP-Programm installieren. Der FAU hat dir ein Gratis-Programm auf die CD gebrannt: Filezilla.
Zum Glück haben die Kursleiter die Punkte 1. bis 3. schon erledigt. So musst du nur noch den Rest bewerkstelligen. Super!
Für die folgenden Schritte musst du für eigene Projekte auf
einem eigenen Server die für den Kurs geltenden Angaben
durch deine eigenen ersetzen!
50
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
6 FTP – File Transfer Programm
6.2.4
Um mit dem Web-Server eine Verbindung herzustellen, musst du das FTP-Programm (Windows: Start > Programme > Filezilla, Macintosh: Programme > Filezilla).
Nun musst du in der Quickconnect-Leiste (A) den SERVER
(HOSTNAMEN), den BENUTZERNAMEN (USERID) und das
PASSWORT (siehe Abbildung 6.1) eingeben.
6.2.5w Nach einem Klick auf «Verbinden» erscheint in der
linken Hälfte des FTP-Programms der Verzeichnisbaum (Abbildung 6.1, Bereich C, linke Seite) sowie der Inhalt der Harddisk
deines Computers (Lokal) (Abbildung 6.1, Bereich D, linke Seite).
Rechts siehst du nun den Verzeichnisbaum (Abbildung 6.1,
Bereich C, rechte Seite) und die Dateien (Abbildung 6.1 Bereich D,
rechte Seite) des Web-Servers (Server).
6.2.6w Nun geht es darum, dass du dich sowohl auf dem
lokalen System (links) als auch auf dem Server (rechts) in dein
Verzeichnis begibst. Dazu bewegst du dich im Verzeichnisbaum
(Abbildung 6.1 Bereich C) in an den richtigen Ort.
Nota bene :: :: :: :: :: :: :: ::
Die meisten FTP-Programme
stellen sowohl das lokale System
(dein Rechner) als auch die
remote Site (den Web-Server)
auf die eine oder andere Weise
dar. Es gibt jedoch diesbezüglich
keine einheitlichen Standards.
Hier gilt die Devise: Selber
Mitdenken.
Deinen Ordner auf dem Web-Server, den du während des Kurses
zur Verfügung hast, findest du unter «deinname» (wobei du
«deinname» mit dem entsprechenden Wert ersetzen musst).
Im Kurs befindet sich dein Ordner auf dem Laufwerk «Transfer
(T:)», zu Hause hast du wahrscheinlich kein solches Laufwerk
Abbildung 6.1: Der Filezilla FTP-Client, links das lokale System, rechts das Verzeichnissystem und die Dateien auf dem Server.
51
6 FTP – File Transfer Programm
Stolperstein :: :: :: :: :: :: ::
Zuweilen ist es sowohl auf
Windows- als auch auf Macintoshrechnern nicht ganz
intuitiv, das Home-Verzeichnis im
Verzeichnisbaum zu finden.
Unter Windows findest du es
unter C:\Dokumente und Einstellungen\loginname\
Unter OS X findest du es unter
/Users/loginname
Nützlich :: :: :: :: :: :: :: ::
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
und hast deine Dateien woanders abgespeichert, WindowsBenutzer irgendwo auf dem Laufwerk C, Macintosh-Benutzer
irgendwo auf der «Harddisk».
6.2.7
Befindest du dich sowohl lokal als auch auf dem Server im richtigen Verzeichnis (Abbildung 6.1 Bereich C), kannst du
durch Drag & Drop die Dateien zwischen den beiden Computern
hin- und herziehen.
6.2.8
Deine Homepage kann nun von überall auf der Welt
betrachtet werden. Du findest sie unter:
http://www.webdesignkurs.ch/fau
Im Filezilla-Programm kannst
du im Nachrichtenprotokoll
(Abbildung 6.1, Bereich B) verfolgen, was die beiden Rechner
miteinander besprechen. Meistens lassen sich aufgetauchte
Probleme lösen, wenn man diese
Nachrichten aufmerksam liest.
Im untersten Teil (Abbildung 6.1,
Bereich E) siehst du ausserdem
die Transfer-Warteschlange, aus
der du herauslesen kannst, welche Dateien bereits verschoben
wurden und welche nicht.
52
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
7 Layout mit
<DIV>-Containern:
Das 960 Grid System
Worum es geht
Fast alle Webseiten verfügen über ein Layout, das über die simple Gliederung durch den Textfluss (von links nach rechts und
von oben nach unten) hinaus geht: Die Inhalte werden gezielt im
Browserfenster platziert. Technisch wird die Implementierung
des Layouts mit CSS realisiert, wobei eine ungemeine Vielzahl
von Techniken und Tricks gibt. Im Rahmen des Kurses können
wir aus Zeitgründen nur einen von vielen möglichen Wegen
aufzeigen, wie man zu einem eigenen Layout kommt. Wir
benutzen dazu das 960-Grid System, welches bei vielen WebdesignerInnen durchaus beliebt ist und dir nach einer kurzen Einarbeitungszeit ermöglicht, mittels <DIV>-Containern komplexe
Layouts zu erstellen.
Du wirst nach dem Durcharbeiten dieses Kapitels folgende Techniken beherrschen:
• Funktionsweise des 960 Grid System
• Gestalten eigener Seiten anhand des 960 Grid Systems
• Umsetzen eigener Seiten anhand des 960 Grid-Systems
Material und Referenzen
http://www.960.gs (Das Zuhause des 960 Grid Systems)
Dort findest du zusätzliche Features und Ergänzungen, auf die
wir im Rahmen des Kurses nicht eingehen können.
Kapitel 4.8 und Kapitel 4.9 im vorliegenden Kurshandbuch
53
7 Layout mit 960 Grid System
7 Layout mit 960 Grid System
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
7.1 Das 960 Grid System: ein Layout-Raster
Die Grundidee des 960 Grid Systems ist einfach. Damit eine
Webseite schön gelayoutet ist, muss ihr ein klares System der
räumlichen Gliederung zugrunde liegen. Ein solches System
bezeichnet man auch als Raster. Anhand eines solchen Rasters
können dann die verschiedenen Inhalte einer jeden einzelnen
HTML-Seite individuell verteilt werden, ohne dass der systematische Eindruck innerhalb der einzelnen HTML-Seite wie auch
zwischen den HTML-Seiten verloren geht.
Das 960 Grid System ist nun ein Paket von CSS-Dateien, in dem
sich eine Reihe von Klassendefinitionen befinden. Mit diesen
Klassen lassen sich DIV-Boxen in verschiedenen Grössen formatieren, die auf einem solchen Raster aufbauen. Das von 960
Grid System verwendete Raster ist 960 Pixel breit und setzt sich
aus 12 (alternativ 16) Spalten zusammen. Jede Spalte enthält
links und rechts jeweils 10 Pixel Abstand, woraus zwischen zwei
Spalten 20 Pixel breite sogenannte Stege entstehen (vgl. Abbildung 7.1). Ebenfalls 20 Pixel breite Stege sind in der Vertikalen
zwischen übereinander liegenden Boxen vorgesehen.
Wie man der Abbildung 7.1 entnehmen kann, sieht das Raster
unterschiedlich breite Boxen vor (die mit Zahlen versehenden
Rechtecke). Die schmalste Box ist 60 Pixel bzw. eine Spalte, die
breiteste 940 bzw. 12 Spalten breit. Anhand dieses CSS-Rasters
kann ich nun meine individuell gelayoutete HTML-Seite erstellen, indem ich selber entscheide, welche diese vorgegebenen
Grössen ich neben- und übereinander arrangiere.
Abbildung 7.1: Eine Übersicht über die verschiedenen möglichen Boxen-Breiten innerhalb des 12-Spalten-Systems.
54
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
7.2 Die CSS-Ausstattung des 960 Grid Systems
Das 960 Grid System bringt mehrere fertige CSS-Dateien mit,
die du in dein Webprojekt übernehmen musst. Du findest diese
Dateien im Ordner «css». Die wichtigste davon ist jene, die das
Raster enthält. Im Original heisst diese Datei «960.css». Wir
stellen dir bei uns im Kurs eine radikal vereinfachte Fassung zur
Verfügung, die auf den Namen «960_12_col.css» hört. Innerhalb
dieser Datei findest du mehrere Klassen definiert, die du benötigst um ein auf 12 Spalten basierendes Layout zu entwickeln.
Neben der .container_12-Klasse sind das die Klassen für die
einzelnen Spalten («.grid_1» - «.grid_12» für 1 bis 12 Spalten Breite). Ausserdem findest du dort zwei Klassen («alpha»
und «omega»), die du benötigst, wenn du innerhalb einer der
.grid-Klassen eine zusätzliche Unterteilung in wenige Spalten
vornehmen möchtest, also beispielsweise eine 8 Spalten breite
Box («.grid_8») in zwei 4 Spalten breite Boxen («.grid_4»).
Ausserdem beinhaltet die Datei «960_12_col.css» noch den
schon im Kapitel 4.9.2 erwähnten Clearfix Hack («.clearfix»).
Neben der «960_12_col.css»-Datei beinhaltet das 960 Grid
System auch die zur CSS-Standardausstattung gehörende Datei
«reset.css», die von Eric Meyer zur Vereinheitlichung des Browserverhaltens entwickelt wurde (siehe: http://meyerweb.com/
eric/tools/css/reset).
Es empfiehlt sich weder «reset.css» noch «960_12_col.css» zu
berühren, bevor du nicht genau weisst, was du tust. Hingegen
kannst du die übrigen CSS-Dateien durchaus verändern. Die
Datei «entwicklungs_stile.css» ist nur so lange vonnöten, wie
du dein eigenes Layout noch nicht fertig gestellt hast. Sie sorgt
dafür, dass Textabschnitte einen sichtbaren Rand haben und dass
unter den wichtigen Block-Elementen ein Abstand von 20 Pixeln
folgt. Du kannst diese Datei löschen, sobald du deine eigenen
Angaben in der Datei «eigene_stile.css» definiert hast.
Abbildung 7.2: Die verschiedenen CSS-Dateien im verschlankten 960 Grid System.
55
7 Layout mit 960 Grid System
7 Layout mit 960 Grid System
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
7.3 Schritt für Schritt zum 960 Grid Layout
1. Wenn du mit dem 960 Grid System arbeiten möchtest, musst
du dir zunächst die CSS-Dateien besorgen. Das kannst du, indem
du dir entweder das Original (unter http://www.960.gs) oder die
von uns vereinfachte Version in den Demos (unter http://webdesignkurs.ch/vorlagen/basic) in dein Webverzeichnis lädst. Wähle
dazu das .zip-Paket und entpacke es.
2. Erstelle eine neue Datei im Bluegriffon (vgl. Kapitel 5.1) oder
lade gleich die ebenfalls im selben Verzeichnis befindliche Datei
«vorlage.html» herunter und öffne sie im BlueGriffon.
3. Verknüpfe dein HTML-Dokument mit den bestehenden CSSDateien, wenn sie noch nicht verknüpft sind (vgl. Kapitel 5.4,
beachte jedoch, dass du keine neuen Dateien erstellen, sondern
die bestehenden verlinken musst.)
4. Begib dich in die Quellansicht des Bluegriffon
5. Erstelle eine DIV-Box und gib ihr die Klassenbezeichnung
«container_12». Diese DIV-Box ist der Hauptcontainer. Alle
weiteren Boxen gehören in sie hinein.
6. Erstelle eine DIV-Box innerhalb der Container-Box.
7. Weise diese DIV-Box jener Klasse zu, die ihre Breite bestimmen soll. Also z.B. class=“grid_4“ für eine 4 Spalten
breite Box.
8. Weise der DIV-Box eine eindeutige ID zu, z.B.
id=“header“ für den Kopfbereich. Diese ID wirst Du benötigen, um die Formatierung dieser Box in der CSS-Datei «eigene_stile.css» vornehmen zu können.
9. Fahre fort, indem du wieder zu Schritt 6 gehst. usw.
Abbildung 7.3: So könnte ein ganz einfaches auf 960 Grid System basierendes HTML-Gerüst aussehen.
56
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
8 Photosohp-HOWTO
8 Photoshop-HOWTO
Worum es geht
Als Webdesignerin steht man oft vor der Aufgabe, Bilder in
eine Homepage einzubinden. Vielfach sind die Dimensionen der
einzufügenden Bilder bereits bekannt (beispielsweise, weil man
eine Grundtabelle mit definierten Spaltenbreiten und Zeilenhöhen (in Pixel) erstellt hat und das Bild genau hineinpassen soll).
Das Photoshop-HOWTO soll drei wichtige Funktionen des
Programms «Photoshop», die für den Webseitengestalter wichtig
sind, Schritt für Schritt erklären. Es handelt sich dabei um:
8.1
8.2
Wählen eines geeigneten Ausschnitts aus einem grösseren Bild
Abspeichern eines Bildes für die Verwendung im
Internet
Material und Referenzen
Bei den Demobeispielen, im Kapitel 10.3.4., findest du eine
weitere Funktion von Photoshop erwähnt, die fürs Webdesign
hilfreich sein kann, die sogenannten «Slices».
Die Bedienung des Programms «Photoshop» ist ein eigener Kurs
wert. Wir legen dir deshalb den Besuch des Kurses «Einführung
in die Bildbearbeitung mit Photoshop» sehr ans Herz.
57
8 Photosohp-HOWTO
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
8.1 Wählen eines geeigneten Ausschnitts
Übersicht: In den folgenden Schritten soll aus einem grossen
Bild (Abbildung 8.1) ein geeigneter Ausschnitt (Abbildung 8.2)
gewählt werden. Dies wird vor allem dann benötigt, wenn ein
vorhandenes Bild nicht die gewünschten Dimensionen und auch
nicht das gewünschte Seitenverhältnis hat. (Pixel in X-Richtung,
Y-Richtung)
8.1.1 Öffne das ursprüngliche Bild in Photoshop (Datei >
Bild öffnen)
8.1.2
Wähle das «Freistellungswerkzeug» in der Werkzeugpalette auf der linken Seite des Bildschirms (Abbildung 8.4)
8.1.3
Dieser Schritt ist optional: Wenn du bereits weißt,
welche Dimensionen (in Pixel) dein Ausschnitt haben soll,
kannst du diese Informationen in der Optionenleiste (Abbildung
8.3) eintragen.
Achtung 1: Du musst die Angaben (wie in der Abbildung 8.4
gezeigt), unbedingt als Pixel definieren: Schreibe also «240 Px»
und nicht bloss «240».
Achtung 2: Wenn du die benötigten Dimensionen noch nicht
kennst und von Auge einen passenden Ausschnitt auswählen
möchtest, musst du in der Optionenleiste die Angaben für «Breite» und «Höhe» unbedingt löschen.
Abbildung 8.1: Vorher: Das ursprüngliche Bild, dessen Masse jedoch den verfügbaren
Platz einer Tabellenzelle sprengen ... ein Ausschnitt daraus soll ausgewählt werden ...
Abbildung 8.2: Das Endresultat: Der
Ausschnitt mit den perfekten Massen.
Abbildung 8.3: Die Optionenleiste des Freistellungswerkzeuges
Abbildung 8.4: Das Freistellungswerkzeug (unten links angewählt)
58
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
8 Photosohp-HOWTO
Achtung :: :: :: :: :: :: :: :: ::
Wenn du ein kleines Bild stark
vergrößerst, wird es sehr pixelig.
Besser ist es, ursprünglich grosse
Bilder mit der Funktion 8.3 zu
verkleinern!
Abbildung 8.5: Den gewünschten Ausschnitt durch gewöhnliches Ziehen auswählen
8.1.4
Wähle nun mit dem Cursor deinen Ausschnitt aus
(Abbildung 8.5). Die nicht ausgewählten Bereiche werden grau
hinterlegt, damit du dir besser vorstellen kannst, wie der gewählte Ausschnitt wirken wird. Du kannst einen einmal gewählten
Ausschnitt noch verändern, in dem du an den Eckpunkten ziehst.
8.1.5
Sobald du mit dem Ausschnitt zufrieden bist, musst
du deine Entscheidung mit einem Klick auf das Häkchen in der
Optionenleiste bestätigen (Abbildung 8.6).
59
Abbildung 8.6: Die Auswahl des Freistellungswerkzeuges muss durch einen Klick
auf den Haken bestätigt werden.
8 Photosohp-HOWTO
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
8.2 Abspeichern eines Bildes für das Internet
Wenn du ein Bild gemäss deinen Vorstellungen bearbeitet hast,
musst du es noch für das Internet abspeichern. Photoshop bietet
dir dazu eine spezielle Funktion.
8.2.1 Wähle (Datei > Für Web speichern ...)
(Abbildung 8.7).
8.2.2
Wähle im oberen Teil den Reiter «2fach» - du siehst
nun zwei Versionen deines Bildes: links die originale Version,
rechts die «optimierte» Version, die zwar nun weniger Speicherplatz benötigt (und über das Internetz schnell geladen werden
kann), dafür aber qualitative Einbussen hat. Unter dem optimierten Bild siehst du, wie viele KB (KiloByte) das Bild auf der
Harddisk brauchen wird.
Wähle deine Komprimierungsart im Menu auf der rechten Seite.
GIF wird empfohlen für Logos mit wenigen Farben, JPEG für
Fotos. Wähle die Qualität, die deinen Bedürfnissen entspricht
(meist reicht eine Qualität «mittel»).
Abbildung 8.7: Im «Für Web Speichern»-Menu kann die Qualität - und damit einher gehend die Dateigrösse das Bildes bestimmt
werden.
60
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
8.2.4
Klicke auf «Speichern» und stelle im erscheinenden
Dialog-Fenster (Abbildung 8.8) die nötigen Optionen ein:
1. Wähle den Speicherort.
2. Wähle den Dateinamen. Achtung: Keine Umlaute, Sonderzeichen und Leerschläge! Es empfiehlt sich, in den Dateinnamen
die Pixelmasse des Bildes mit einzubeziehen, das macht die
spätere Verarbeitung im Composer einfacher.
3. Wähle unter Dateityp «Nur Bilder».
4. Drücke auf «Speichern»
8.2.5
Fertig! Das Bild liegt auf der Harddisk im Verzeichnis
deiner Wahl und kann ab sofort in HTML-Dateien eingebunden
werden.
Abbildung 8.8: Der Speicherdialog. Darauf achten, dass nur die Bilder abgespeichert
werden.
61
8 Photosohp-HOWTO
8 Photosohp-HOWTO
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
62
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9 Planung und Umsetzung
9 Planung und Umsetzung
einer Website
Worum es geht
Natürlich könntest du dich, ausgerüstet mit einem Computer
und SELFHTML, in einer Berghütte einschliessen und innert
Stunden eine Homepage programmieren. In der Praxis, wo man
als Webdesigner meist in ein Netz von Mitarbeitenden eingebunden ist, empfehlen wir eher ein strukturierteres Vorgehen, um
sich viele Mühen zu ersparen.
Du wirst nach dem Durcharbeiten dieses Kapitels Faustregeln
kennen, um:
• Eine Homepage zu planen ohne wichtige Aspekte zu vergessen
• Die Erstellung einer Homepage konzeptionell anzugehen,
ein konsistentes Layout zu entwickeln und zum Abschluss
zu bringen.
Material und Referenzen
Zu diesem Thema braucht es keine weiteren Referenzen.
63
9 Planung und Umsetzung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
9.1 Ich soll eine Homepage erstellen, an was
muss ich alles denken?
Wir empfehlen, für alle grösseren Homepages und vor allem,
wenn mehr als eine Person bei der Erstellung beteiligt sein werden, folgende Planungsaspekte zu berücksichtigen.
A. Voraussetzungen
1.
2.
Ziele abklären (Was ist der Zweck der Homepage?)
a) Ziele der Auftraggeber definieren
b) Zielgruppe (Nutzer) und deren «Surfprofil» bestimmen
c) Ziele der Nutzer definieren
d) Die Ziele beider Parteien zur Deckung bringen
e) Umfang, Komplexität, Interaktivität und Wartungsaufwand abklären (in Abhängigkeit von 2.)
Budget abklären
a) Finanzielle Mittel (auch langfristig)
b) Zeitressourcen
c) Personalkapazitäten
B. Mittel zur Realisation
3.
Mittel zur Realisierung bestimmen
a) Materialien und Inhalte (Text, Bild u.a.) > Content
b) Technische Hilfsmittel (Software, Hardware)
c) Mitarbeiter (Spezialisten)
C. Prozess der Realisation (9.2: Zehn-Punkte-Konzept)
4. 5.
Einzelaspekte beim Erstellen
a) Content zusammentragen und aufbereiten
b) Gliederung der Inhalte:
I.) Innerhalb der gesamten Website: Verteilung auf verschiedene HTML-Dokumente, Navigation
innerhalb der Site > Site-Map
II.) Innerhalb der HTML-Dokumente: Verteilung
im Browserfenster > Layout Ziel der Gliederung sind intuitive Bedienbarkeit und
klare Kommunikation der «Message» der Site.
c) Usability (Benutzerfreundlichkeit) / Accessibility
d) Corporate Design (grafisches Erscheinungsbild,
inhaltliche und stilistische Stimmigkeit > Wiedererkennungseffekt)
e) Domain Name reservieren
f) präziser und verbindlicher Projektplan
g) Teilziele realisieren und Abläufe koordinieren
h) Kommunikation zwischen den Beteiligten
Unterhalt: Aktualisierung und Wartung
64
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2 Schritt für Schritt zur eigenen Homepage:
Das 3kanal::digitAll Zehn-Punkte-Konzept
Im Folgenden werden wir uns mit dem Realisationsprozess
auseinander setzen und dabei ein Vorgehen in zehn Etappen
vorstellen, das einem bei der systematischen Entwicklung und
Fertigstellung einer Webseite mit stimmigem «corporate design»
behilflich ist. Dazu gehört wesentlich: eine saubere Gliederung
der Inhalte und ein einheitliches Layout mit passenden Bildausschnitten, Farben, Schriften und Texten.
Die folgende Anleitung kommt sehr linear daher – in der Praxis
wird es aber oft vorkommen, dass du mal oben beginnst, dich
langsam nach unten durcharbeitest, an einem gewissen Punkt
aber realisierst, dass du weiter oben noch einige Dinge anpassen
musst, welche ihrerseits wieder Änderungen weiter unten nach
sich ziehen ...
Das Schema hat sich in der Praxis sehr bewährt und wir legen es
dir zu deinem eigenen Glück sehr ans Herzen. Folge einfach den
Anweisungen auf den nächsten Seiten. Zur Veranschaulichung
des Vorgehens haben wir dort gleich ein eigenes kleines Beispiel
umgesetzt.
Übersicht
1. 2. 3. 4.
5. 6. 7. 8. 9. 10. Zusammenstellen, Sortieren und Auswählen des
Inhalts (Kapitel 9.2.1)
Strukturierung des Inhalts in einzelne Häppchen,
die den einzelnen Seiten entsprechen (Kapitel 9.2.2)
Sitemap erstellen: Wie sind die einzelnen Seiten
sinnvoll verknüpft? (Kapitel 9.2.3)
Farbkonzept erstellen (Kapitel 9.2.4)
Schriftkonzept erstellen (Kapitel 9.2.5)
Grundraster (Kapitel 9.2.6)
Einzelne Layoutinstanzen skizzieren: Anhand
der Inhaltshäppchen (Punkt 2) und des Grundrasters
(Punkt 6) (Kapitel 9.2.7)
Abstraktion einer Layoutvorlage (Kapitel 9.2.8)
Vorlage erstellen, indem alle gleichbleibenden Ele
mente in die Grundtabelle eingefügt werden (Kapitel
9.2.9).
Einzelne Seiten (Layoutinstanzen) erstellen: In die
Vorlage die spezifischen Inhalte noch einfügen, fehlende Verknüpfungen setzen (Kapitel 9.2.10)
65
9 Planung und Umsetzung
9 Planung und Umsetzung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
9.2.1 Zusammenstellen des Inhalts
Was ist zu tun?
Um überhaupt an einem Projekt konkret arbeiten zu können, Layout und Design sowie
den roten Faden bestimmen zu
können ist es notwendig, einen
guten Grundstock an Material
zusammenzustellen.
Sammle die nötigen Texte,
Bilder und sonstigen Daten,
die du in deiner Homepage
einsetzen willst. Sammle
grosszügig und sortiere allenfalls nachträglich wieder aus,
was du nicht brauchen kannst.
Je nachdem musst du Materialien noch anpassen und so zubereiten, dass sie sich leicht in
die Website übertragen lassen.
Abbildung 9.1.: Nach den Ferien in Italien möchten wir eine kleine Seite mit unseren Lieblingsrezepten erstellen. Dazu sammeln wir
die Rezepte in Textform und suchen passendes Bildmaterial zusammen.
66
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2.2 Strukturierung
des Inhalts
Was ist zu tun?
Welche Inhalte gehören
zusammen? Was sind die
einzelnen Seiten-Ansichten,
die der Benutzer zu Gesicht
bekommt?
Versuche den Inhalt deiner
Site in einzelne zusammengehörige Häppchen zu gliedern.
Erstelle dazu auf einem Blatt
Papier eine Miniversion jeder
möglichen Seiten-Ansicht
(=HTML-Dokument), die im
Browser dargestellt werden
wird. Halte in dieser Skizze
die einzelnen Inhalte fest,
die zusammen in ein HTMLDokument gehören.
9 Planung und Umsetzung
Abbildung 9.2: Wir beginnen die Inhalte zu ordnen, indem wir uns überlegen, was zusammen gehört und was jeweils auf einer Seite
Platz hat.
67
9 Planung und Umsetzung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
9.2.3 Sitemap
Was ist zu tun?
Welche ist die ideale Reihenfolge und Verknüpfung der
einzelnen Ansichten? Wie sieht
die Hierarchie meiner Homepage aus? Wieviele Klicks sind
nötig, um zu den Inhalten zu
gelangen? Welche Dokumente
sind mit welchen weiteren
Dokumenten verlinkt?
1. Überlege dir anhand der
vorbereiteten Inhaltshäppchen,
in welcher Reihenfolge der
Besucher idealerweise durch
deine Site geführt wird: Skizziere deine Sitemap: Zeichne
dazu erneut eine Miniversion
jedes HTML-Dokuments
auf Papier und zeichne die
notwendigen Links mit Pfeilen
ein. Notiere zu jeder Miniansicht auch gleich den zukünftigen Dateinamen (vergiss nicht,
die Einstiegsseite «index.
html» zu nennen).
Möglich sind flache und tiefe
Hierarchien oder eine Kombination daraus. Tendenziell
empfiehlt sich, die Hierarchie
flach zu halten, damit die
Besucher selber entscheiden können, wo sie entlang
wollen – die ideale Sitemap
ist jedoch vom Inhalt als auch
vom adressierten Zielpublikum
abhängig.
2. Notiere für deine Einzelansichten die notwendigen
Menustrukturen (Navigation).
Abbildung 9.3: Nachdem wir die Inhalte gegliedert haben, erstellen wir die Sitemap,
die durch die einzelnen Dokumente und ihre Links definiert wird.
68
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2.4 Farbkonzept
Was ist zu tun?
Die gewählten Farben deiner
Homepage erzeugen beim
Betrachter unbemerkt Stimmungen und kommunizieren
implizite Bedeutungen. Mit einer geschickten Wahl erzeugst
du das stimmige Ambiente,
das zu deiner Absicht passt
und dem Besucher das Gefühl
gibt, am richtigen Ort gelandet
zu sein.
Je nach Homepage wirst du 2
bis 10 Grundfarben einsetzen,
die du dir am besten mit den
Farbcodes aufschreibst.
Um zu den idealen Farben zu
kommen gibt es verschiedene
Wege. Wir schlagen zwei vor:
1. Du kannst dazu ein wichtiges und oft benutztes Bild
deiner Site betrachten und
wichtige Farben daraus herauslesen. Dies gelingt ideal mit
dem Add-On «Eyedropper»
in Bluegriffon oder mit dem
Pipette-Werkzeug in Photoshop.
2. Du benutzt den Farbwähler
unter http://www.webdesignkurs.ch/demos, 9.4 Colormatch
Oft braucht man von einer
Farbe eine intensivere und
eine weniger intensive, oder
eine hellere und eine dunklere
Version.
Erstelle ein Text-Dokument,
wo du sämtliche Farbcodes
und die dazu gehörenden Elemente notierst!
(Bsp: Titel: #FFFF22, Lauftext:#000000, Hintergrund der
Tabellenzelle: #FFCCEE)
Dieses Dokument mit den
Farbangaben wird die Grundlage für das CSS-Stylesheet
deiner Seite sein.
Dies könnte im externen
Stylesheet dann wie folgt
aussehen:
h1 {color: #CD3880;}
p {color: #222222;}
Abbildung 9.4: Die Farbtabelle, die wir mit dem Eyedropper-Tool oder dem Colormatch
erstellt haben und die Angaben enthält, die später in die CSS-Datei kommen.
69
9 Planung und Umsetzung
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Die RGB-Farbcodes der Form
#RRGGBB sind in der sogenannten Hexadezimalform notiert. Du
definierst mit dem ersten Zahlpaar (RR) den Rotanteil, mit dem
zweiten Zahlenpaar (GG) den
Grünanteil und mit dem letzten
Zahlenpaar (BB) den Blauanteil
einer Farbe.
Mehr Informationen findest
du unter http://de.selfhtml.
org/html/allgemein/farben.
htm#hexadezimal
9 Planung und Umsetzung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
9.2.5 Schriftkonzept
Was ist zu tun?
Auch Schriften bestimmen Teil
der Stimmung deiner Homepage. Serifenlose Schriften
wirken modern, sind am
Bildschirm gut zu lesen aber
weniger geeignet für lange
Texte als Schriften mit Serifen,
die dem Auge eine Grundlinie
präsentieren, entlang der es
lesen kann. Im Web werden
jedoch fast nur noch serifenlose Schriften eingesetz.
Bestimme deine Auswahl
an Schriften, die du einsetzen wirst. Notiere sämtliche
Schriftarten und die dazu
gehörenden Textelemente im
selben Dokument, wo du die
Farbcodes festgehalten hast
(siehe Abbildung 9.5).
Wir empfehlen, für eine Webseite nicht mehr als 2 Schriftarten einzusetzen. Zudem
empfehlen wir, jede Schrift in
nicht mehr als 2 Schriftgrössen einzusetzen. (Titel immer
gleich, Lauftext immer gleich,
Menu immer gleich ...)
Da der Webdesigner nicht
wissen kann, welche Schriftarten auf dem Computer eines
Besuchers seiner Seite installiert sind, kann er seit HTML
5 neben den HTML-Dokumenten auch Schriftdateien zur
Verfügung stellen und in der
Webseite einsetzen. Siehe dazu
auch in den Kapiteln 5.3.8 und
10.1.6 und dem entsprechenden Demo auf der Kurswebseite www.webdesignkurs.ch/
demos.
Diese Angaben werden, zusammen mit den Farbangaben,
die Grundlage für das CSSStylesheet deiner Seite sein.
Beachte: Mit hoher Wahrscheinlichkeit auf jedem Computer installiert sind lediglich
die folgenden Schriften:
Helvetica/Arial (ohne Serifen)
Times (mit Serifen)
Courier (Monotype)
Verwende für zusätzliche
Schriftarten Webfonts (siehe
linke Spalte).
Vom Einsatz des als «veraltet» (deprecated) eingestuften
<FONT>-Tags wird dringend
abgeraten.
Abbildung 9.5: Die Schriften, die wir verwenden werden.
70
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2.6 Grundraster
Was ist zu tun?
Die Schritte 6 bis 9 gehören
zusammen und dienen der
Herstellung eines stimmigen
Layouts.
Öffne die PDF-Datei
«grid_vorlage_12_spalten_gross.pdf» (zu finden bei
unseren Demobeispielen unter
10.1.10.960_12_col im RasterOrdner. Du erhältst damit
eine Vorlage, die ein systematisches Raster darstellt, auf
dem sich die einzelnen Inhalte
problemlos verteilen lassen
(s. Abbildung 9.6). Beim
960 Grid System ist übrigens
die kleinste multiplizierbare
Einheit 10 Pixel. Weitere
Basiseniheiten sind 20 Pixel
(Stege) und 60 Pixel (Spalten.
Jedem Layout wird ein
Grundraster zugrunde gelegt,
in dessen Zellen wir Inhalte einpassen. Dieses Raster
soll dazu behilflich sein, das
Layout der einzelnen Seiten zu
gestalten und zugleich für eine
systematische Einheitlichkeit
unter den einzelnen Seiten zu
sorgen. Dies tut es, indem es
einerseits für jede Seite den
selben fixen Rahmen bietet
und zugleich für die Anordnung der Inhaltskomponenten
einen Spielraum für Variationen eröffnet.
Die meisten Grundraster bauen
auf der Idee auf, eine (allenfalls intern nochmals feiner
strukturierte) minimale Grundeinheit in der Breite und in der
Höhe zu multiplizieren.
Beachte, dass Webseiten im
Gegensatz zu Printmedien in
der Höhe meist flexibel sind,
während man sie in der Breite
meist fixiert. Um die Stimmigkeit des Layout trotz der Flexibilität beizubehalten, definiert
man eine minimale Höhe und
alles darüber hinaus gehende
als Vielfaches der minimalen
Rastereinheit generiert.
Beachte ebenfalls, dass der
Kopfbereich und der Fussbereich einer Homepage in der
Regel etwas feiner strukturiert
sind.
Abbildung 9.6: Das Grundraster des 960 Grid System als Layout-Vorlage (12 Spalten
und prinzipiell unendlich viele Zeilen)
71
9 Planung und Umsetzung
9 Planung und Umsetzung
Nota bene :: :: :: :: :: :: :: ::
Bis und mit hier arbeitet man
ohne den BlueGriffon! Das meiste macht man auf Papier oder
in anderen Programmmen. Der
BlueGriffon kommt erst beim
nächsten Schritt zum Einsatz.
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
9.2.7 Layout-Instanzen skizzieren
Was ist zu tun?
Bei diesem Schritt ist deine
ganze Kreativität gefordert.
Zeichne auf transparenten
Folien für jede deiner Einzelansichten ein Layout, indem
du die Folie auf das Papier mit
dem Grundraster legst und mit
dem Folienstift entlang des
Rasters die nötigen Platzhalter für die jeweiligen Inhalte
einzeichnest.
Für jede Einzelansicht
erstellt man ausgehend vom
Grundraster unter Einbezug
der vorbereiteten Inhalte
ein Layout. Dabei werden
Platzhalter definiert, die in der
Regel den Minimaleinheiten
des Grundrasters oder einem
Vielfachen davon entsprechen,
in welche schliesslich der
Inhalt, den man einsetzen will,
platziert wird.
Gemeinsam mit dem Farb- und
dem Schriftkonzept trägt dieses Vorgehen dazu bei, deiner
Website ein einheitliches
«corporate design» zu verleihen, indem zwar jede einzelne
Seiten-Ansicht individuell
gestaltet ist, ihr aber dasselbe
Raster wie den anderen Ansichten zugrunde liegt.
Wichtig: An diesem Punkt
ist es unumgänglich, auf den
bereits einzufügenden Inhalt
zurückzugreifen. Wieviel Text
gilt es zu platzieren? Welche
Formate haben die Bilder.
Die einzelnen Layoutinstanzen hängen also ebenso vom
Grundraster wie vom geplanten Inhalt der jeweiligen Seite
ab!
Abbildungen 9.7 bis 9.9: Die Layoutinstanzen als Integration von Material, Sitemap, Grundraster und Design
72
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2.8 Abstraktion einer Layout-Vorlage
Was ist zu tun?
Es gilt nun, das «gemeinsame
Grundlayout» aller gestalteten
Layout-Instanzen herauszulesen. Dieses entspricht nicht
dem Grundraster, da dieses
viel zu fein gegliedert ist, als
dass man damit die einzelnen
Layout-Instanzen auch tatsächlich realisieren könnte. Das
Ziel ist ein Layout herauszulesen, ausgehend von dem sich
alle anderen Seiten realisieren
lassen.
Definiere die grundlegende
Layoutstruktur, die allen
Einzelansichten gemeinsam
sein soll. Lege dazu die Folien
aller deiner Einzel-Layouts
übereinander, interpretiere und
zeichne das Grundlayout auf
einer neuen Folie auf. Unter
Umständen entspricht eines
der bestehenden Layouts auch
diesem Grundlayout. (Manchmal benötigt man auch zwei
unterschiedliche Grundlayouts, um Vorlagen zu erstellen,
in unserem Beispiel passt die
index-Seite nicht in das gemeinsame Layout der übrigen
Seiten)
9 Planung und Umsetzung
Notiere dir in der Skizze und
im separaten Textdokument
für das ganze Layout zu allen
Spalten und Zeilen die exakten
Pixelmasse, damit du später
die Bilder passend zuschneiden kannst!
Erstelle im BlueGriffon ein
neues Dokument (speichere es
als «vorlage.html» ab) . Füge
erst jetzt das Grundlayout ein.
(Siehe auch Kapitel 7).
Abbildung 9.10. Das Grundlayout mittels des 960 Grid Systems im BlueGriffon wird zur Vorlage für die einzelnen Seiten.
73
9 Planung und Umsetzung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
9.2.9 Vorlage erstellen
Was ist zu tun?
Hat man die Grundtabelle
erstellt, ergänzt man diese zur
Vorlage («vorlage.html), die
allen einzelnen HTML-Dokumenten zugrunde liegt. In
diese Datei werden nicht nur
die Grundtabelle, sondern auch
sämtliche Inhalte, Gestaltungselemente und Formatierungen
eingefügt, die den gemeinsamen Layoutnenner ausmachen.
Hierzu gehört insbesondere
der Kopf- und der Fussbereich und das Menu. Damit
wird gewährleistet, dass dein
Layout auch durchgehend über
ein einheitliches «corporate
design» verfügt.
Nimm die schon erstellte
Datei «vorlage.html» und füge
diejenigen Elemente hinzu,
die auf allen Einzelansichten
gleich sein werden (Hintergrundfarben, Titelplatzhalter,
Bildcontainer, Menus).
74
Speichere die Seite anschliessend unter verschiedenen
Namen (wie in der Sitemap
definiert) ab (also z.B. rezept1.
html, rezept2.html ...)
Vervollständige alle Dateien
mit den nötigen Bildern, Texten und Formatierungen und
erstelle alle Links.
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
9.2.10 Einzelne Seiten
erstellen
Was ist zu tun?
Wenn man die Vorlage sauber
vorbereitet hat, ist es in der
Regel ein Leichtes, die jeweils
individuellen Inhalte der
einzelnen Seiteninstanzen in
den entsprechenden HTMLDokumenten zu ergänzen und
die Homepage fertig zu stellen. Dabei orientiert man sich
an den zuvor festgehaltenen
Skizzen (siehe Kapitel 9.2.7).
Nimm die schon erstellte Datei «vorlage.html» und speichere sie anschliessend unter
den verschiedenen Namen ab,
wie du sie für die Sitemap definiert hast (also z.B. «rezept1.
html», «rezept2.html» ...)
Denk daran, dass die Startseite
«index.html» zu nennen.
Vervollständige alle Dateien mit den nötigen Bildern,
Texten und sonstigen spezifischen Inhalten und erstelle alle
fehlenden Links.
75
9 Planung und Umsetzung
9 Planung und Umsetzung
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
Abbildung 9.14: Die Seite mit dem Spaghettirezept (sauce.html)
Abbildung 9.15: Die Seite mit dem Drink (drink.html)
76
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
10 Ausblick, Tipps & Tricks
10 Ausblick, Tipps & Tricks,
Javascript und CSS
Worum es geht
HTML ist nicht die einzige Technologie, mit der man Homepages erstellen kann, bloss die elementarste. In den vergangenen
Jahren haben sich parallel zum Wachstum des Internets die
darin verwendeten Technologien vervielfacht. Die eingehende
Besprechung von CSS, Javascript, PHP, MySQL, Flash... würde
den Rahmen unseres Kurses sprengen, trotzdem möchten wir dir
einen minimalen Einstieg in die faszinierenden Möglichkeiten
zweier Technologien nicht vorenthalten und anhand konkreter Beispiele schmackhaft machen. Zudem fügen wir einige
ergänzende Tipps und Tricks für die HTML-Programmierung an.
Du wirst in diesem Kapitel beispielhaft die Funktionsweise
folgender Konzepte kennenlernen:
10.1 CSS: Cascading Style Sheets
10.2 Javascript: In HTML eingebundener Programm-Code
10.3 Tipps und Tricks mit HTML:
10.4. PHP
10.5 Webapplikationen
Die hier verwendete Nummerierung korrespondiert mit derjenigen unserer berühmten Demo-Beispiele im Internet (siehe die
Adresse bei «Material und Referenzen»). Wir empfehlen dir
parallel zur Lektüre einen Blick auf diese Beispiele zu werfen,
da dort ganz konkrete und daher auch für den Programmieralltag
sehr nützliche Anwendungen anzutreffen sind. Solltest du dort
77
10 Ausblick, Tipps & Tricks
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
zu einer bestimmten Fragestellung fündig geworden sein, kannst
du den Quellcode aus der entsprechenden Seite im Netz kopieren und bei dir einfügen. Achte einfach gut darauf, wo du im
HTML-Dokument die neuen Bereiche einfügen musst (viele Befehle von CSS und Javascript kommen nämlich in den HEADBereich des Dokuments) und wo du allfällige Anpassungen an
deine eigene Website vornehmen musst!
Die meisten Beispiele sind mit Erläuterungen versehen.
Achtung: Dieses Kapitel kann unter keinen Umständen das
eingehende Studium der einschlägigen Literatur ersetzen! Trotzdem glauben wir, dass du den vorgestellten Code relativ problemlos in dein eigenes Projekt integrieren kannst!
Material und Referenzen
Du findest sämtlichen Code, den wir im Folgenden verwenden
unter:
http://www.webdesignkurs.ch/demos
Speziell findest du Hilfe für:
- CSS: Selfhtml (http://de.selfhtml.org/css) sowie bei
W3Schools (http://www.w3schools.com/)
- Javascript: Selfhtml (http://de.selfhtml.org/javascript)
- Tipps & Tricks: Dr. Web (http://www.drweb.de/trickkiste)
- PHP: (http://www.php.net)
78
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
10.1 CSS: Cascading Style Sheets
Stylesheets sind eine Ergänzung zu HTML (Die ausführlichen
Grundlagen findest du in Kapitel 4). Mithilfe von CSS kannst du
die verschiedenen Elemente deiner Webseite grafisch formatieren.
Wie man CSS in HTML verwendet und integriert, findest du in
Kapitel 4.3 erläutert.
Unter 10.1 findest du eine Reihe von CSS-Beispielen, die gängige Herausforderung bei der Gestaltung einer Webseite lösen.
Z.B. die Änderung der Darstellung von Links oder Schriften.
Ausserdem findest du dort unsere Layoutvorlagen für das 960-er
Grid System.
10.1.1 Stilvorlagen definieren
Um einen HTML-Tag mittels CSS genauer zu definieren, deklariert man innerhalb eines STYLE-Tags eine sogenannte Regel,
die der folgenden Syntax entspricht:
Selektor { Eigenschaft:Wert; }
An der Stelle des Selektors muss ein HTML-Elementtyp eingesetzt werden. So kannst du beispielsweise die Formatierung des
Tags für einen Textabsatz, <P> ändern, indem du eine CSSRegel wie folgt benutzt:
P { color:#0000ff; font-family:Verdana;}
Damit bestimmst du, dass ein Textabsatz blau und in der Schriftart Verdana ausgegeben wird. Wie du an dem Beispiel erkennen
kannst, lassen sich mehrere Eigenschaften innerhalb derselben
Regel definieren, indem sie durch ein Semikolon voneinander
getrennt werden. Die verschiedenen möglichen Regeln findest
du in SelfHTML aufgeführt.
10.2 Javascript: Ins HTML-Dokument
eingebundener Programmcode
JavaScript ist kein direkter Bestandteil von HTML, sondern eine
eigene Programmiersprache, die wie alle Programmiersprachen
mit Variablen, Schleifen und Funktionen umgehen und damit
Rechenoperationen ausführen kann. JavaScript wurde jedoch
eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe Webseiten von
statischen Hypertexten zu interaktiven und bis zu einem gewisen Grad dynamischen Webpages werden, in welchen sich die
Ansicht je nach vom Benutzer gewählten Optionen verändert.
79
10 Ausblick, Tipps & Tricks
10 Ausblick, Tipps & Tricks
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Konkret bedeutet dies, dass die HTML-Tags einer bereits geladenen und dargestellten Webseite mittels Javascript verändert
werden können, ohne dass dazu Quellcode vom Server geladen
werden muss. Dies kann dazu führen, dass sich eine Webseite
unter Umständen wie eine klassiche, auf dem lokalen Rechner
installierte Anwendung verhält, da die Ladezeit nach den Klicks
wegfallen kann.
JavaScript-Code wird wahlweise direkt in der HTML-Datei
oder in separaten Dateien notiert. JavaScript-Code innerhalb
einer HTML-Datei befindet sich in aller Regel in einem eigenen
Bereich im Head. Dieser Bereich wird mit dem SCRIPT-Tag
eingegrenzt.
Moderne Web-Browser besitzen eine entsprechende InterpreterSoftware, um JavaScript während der Laufzeit ausführen zu
können.
BlueGriffon bietet die Möglichkeit, Javascript sowohl in einem
eigenen SCRIPT-Bereich im Dokument einzufügen als auch externe Javascript-Dateien einzubinden. Die Javascript-Programme
können aus BlueGriffon mit Hilfe der Konsole «Skripteditor»
editiert werden.
Einige nützliche Anwendungen haben wir für dich implementiert
und bei den Demobeispielen unter 10.2 versammelt.
10.3 Tipps & Tricks
Unter 10.3 findest du bei den Demobeipsielen einige Tipps
und Tricks, die gängige Probleme und Anwendungen bei der
HTML-Entwicklung beinhalten. Dazu gehören beispielsweise
der Einsatz von Audio- und Videodateien, oder auch die Implementierung und Verarbeitung von Formularen.
10.4 PHP
PHP ist eine weitere (Skript-)Programmiersprache, die mit HTML-interagiert. Im Gegensatz zu Javascript, das auch clientseitig, d.h. im Browser interpretiert werden kann, wird PHP jedoch
nur auf dem Server ausgeführt. Der Clou daran ist, dass sich
damit auf dem Server HTML-Dokumente dynamisch generieren
lassen. Das bedeutet, der HTML-Quellcode, der an den Browser
geschickt wird, wird erst in dem Moment erstellt, in dem der
Server eine Abfrage vom Browser erhält. Das hat den Vorteil,
dass die Website auf nutzerspezifische oder zeitabhängige Anfragen reagieren und individuell angepasste HTML-Dokumente an
den Browser schicken kann.
Die Integration von PHP und HTML gestaltet sich relativ simpel. Es handelt sich dabei eigentlich um normale HTML- bzw.
Textdateien, die jedoch die Formatendung (*.php) haben und
bei deren Programmierung gewisse HTML-Abschnitte durch
80
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
PHP-Code ersetzt werden. Innerhalb dieser PHP-Blöcke stehen
die Anweisungen an den Server, wie er aus dem PHP-Code den
gewünschten HTML-Code herstellen und einfügen muss. PHPBlöcke werden mit <?php geöffnet und ?> wieder geschlossen.
Um PHP entwickeln zu können, benötigt man daher einen Server
(entweder beim Provider oder auf dem eigenen Rechner), der
PHP interpretieren kann.
Wir haben in den Demobeispielen eine einfache Seite, die jeweils die Uhrzeit des Servers ausliest und in den Quellcode des
an den Browser geschickten HTML-Dokuments einfügt.
10.5 Webapplikationen
Die rasante Entwicklung des Internets hat nicht nur dazu
geführt, dass man heutzutage eine Vielfalt von Technologien
wie Javascript, CSS, PHP oder Flash antrifft. Im Laufe der
letzten Jahren wurden damit eine Vielzahl von leistungsfähigen
Webapplikationen entwickelt, die jeweils einen spezifischen
Zweck erfüllen und zugleich für den Alltagsgebrauch sehr
leicht zu bedienen sind. Diese Webapplikationen basieren auf
unterschiedlichen Technologien (meistens PHP und MySQLDatenbanken) und können dynamisch HTML-Seiten generieren,
indem sie auf die spezifischen Eingaben der Besucherinnen
spezifische Resultate ausgeben (Z.B. eine Google-Anfrage:
Google generiert unmittelbar nach meiner Anfrage ein HTMLDokument, dass genau die Inhalte enthält, die ich gefragt habe).
Gängige Beispiele für solche Webapplikationen sind Content
Management Systeme (auch: CMS), Webshops, Blogs, Galerien,
Foren etc. Die Einrichtung dieser Webapplikationen ist unter
Umständen sehr einfach. Will man jedoch so ein simples BlogCMS wie Wordpress angemessen konfigurieren und grafisch
gestalten, kommt man ohne elementare Webdesign-Kenntnisse
nicht aus. Von den meisten CMS gibt es kostenlose Angebote,
die man im Netz herunter laden kann, oder die einem der eigene
Provider im Idealfall sogar gleich als vorinstalliertes Paket
anbietet.
81
10 Ausblick, Tipps & Tricks
10 Ausblick, Tipps & Tricks
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
82
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
11 Hosting
Worum es geht
Eine Homepage zu erstellen bleibt unnütz, solange die Dateien
auf dem eigenen Rechner verstauben. Erst wenn sie unter einem
passenden Domainnamen auf einem Webserver liegen, sind sie
für den Rest der Welt einsehbar.
Du wirst nach dem Durcharbeiten dieses Kapitels:
• Eine eigene Domain reservieren können
(z.B. www.webdesignkurs.ch)
• Einen geeigneten Webserver für deine Homepage finden
können
• Die eigene Homepage aktivieren können
83
11 Hosting: Domain der Träume
11 Hosting: Domain der Träume
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Vorgehen
1.
Zu allererst gilt es, den passenden Domainnamen bei
der Firma SWITCH zu reservieren (11.1).
2. Anschliessend geht es darum, den passenden Provider
für seine Homepage zu finden (11.2).
3. Zu guter Letzt musst du der SWITCH den Provider
mitteilen und damit die Domain aktivieren (11.3).
Abbildung 11.1: Bei http://www.switch.ch/de/id/registration.html kannst du herausfinden, ob deine favorisierte Domain noch frei ist.
Abbildung 11.2: SWITCH teilt dir mit, welche Domains noch frei sind. Durch ein einfaches Anklicken des entsprechenden DomainNamens und einem Klick auf «weiter» kannst du dir deine Traumdomain reservieren.
84
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
11 Hosting: Domain der Träume
11.1 Wie registrierst du die Domain deiner
Träume?
Willst du einen Domainnamen reservieren, musst du dies auf der
Homepage der Firma SWITCH (http://nic.ch) tun (Abbildungen
11.1 und 11.2). War jemand schneller, kannst du den Domainnamen natürlich nicht mehr für dich beanspruchen und musst nach
einer Alternative Ausschau halten.
Die Kosten für den «Besitz» der Domain betragen 17 Fr. pro
Jahr. Das erste Jahr bezahlst du gleich bei der Reservation.
11.2 Wie findest du den idealen Provider?
Provider gibt es wie Sand am Meer und wir möchten an dieser
Stelle keinen Bestimmten favorisieren. In den Computersektion
der gängigen Tageszeitungen (z.B. jeweils montags im Tagesanzeiger) oder in speziellen Computerzeitungen (z.B. PCTipp),
werden regelmässig Listen von Providern publiziert, mit ihren
Eigenschaften, Vor-, sowie ihren Nachteilen.
Suchst du via http://www.google.ch nach «hosting» Provider aus
der Schweiz, bekommst du eine gute Auswahl (Abbildung 11.3).
Abbildung 11.3: Der Suchbegriff «hosting» ergibt bei einer auf die Schweiz begrenzte Google-Suche mehr als fünf Millionen Einträge. Mehr als 6 Franken pro Monat wirst du kaum bezahlen müssen, um deine Homepage gut unterbringen zu können.
85
11 Hosting: Domain der Träume
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Wichtige Überlegungen bei der Auswahl sind:
•
•
•
•
•
•
•
•
•
•
•
Der Preis
Die Anzahl Gigabyte GB), die man zur Verfügung hat.
Der Traffic (sagt aus, wie viele MB Datenverkehr
inklusive sind, wobei wir empfehlen, hier auf «unlimitiert» zu achten)
Wieviele Domains (nicht Subdomains!) kann ich
haben?
Ist PHP und MySQL inklusive?
Macht der Provider Backups der Daten?
Wie professionell wirkt der Provider?
Wie und wie schnell reagiert er auf Email-Anfragen?
Gibt es eine Hotline? Wieviel kostet sie?
Welche Zusatzfunktionen wie CMS (Blog, Gallerie,
Shop etc.), Formular-zu-EMail-Skript, Statistik der
Zugriffe bietet der Provider?
Bietet der Provider auch eine Emailverwaltung (POP/
IMAP-Accounts, Webmail) an?
Als Faustregel empfehlen wir dir, nicht mehr als 5 Fr./Mt. für ein
Angebot zu zahlen, das ca 10 Gigabyte Speicher, mindestens 3
Domains, mehrere E-Mail-POP/IMAP-Accounts und mehr als
10 MySQL-Datenbanken enthält.
Hat man sich für einen Provider entschieden und angemeldet,
wartet man, bis man vom Provider die Zugangsdaten erhalten
hat. Diese umfassen normalerweise:
•
•
•
•
Benutzer-ID
Passwort
Hostname für den FTP-Zugang (vgl. Kapitel 5)
(z.B. www.webdesignkurs.ch)
2 Nameserver-Adressen (z.B. ns1.zoneedit.com und
ns2.zoneedit.com)
11.3 Das Aktivieren der Domain
Hast du den Provider gefunden, den Vertrag mit diesem abgeschlossen und die Zugangsdaten zum Server erhalten, musst du
bei SWITCH die vom Provider erhaltenen zwei NameserverAdressen eintragen (Abbildung 11.4). Um diese Änderungen vornehmen zu können, musst du die Benutzer-ID und das Passwort,
die du von der SWITCH bekommen hast, sorgfältig aufbewahrt
haben!
Jetzt kannst du mit der Erstellung der Page beginnen
(Kapitel 3.3) und sie mittels FTP auf den Server hochladen
(Kapitel 6).
86
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
11 Hosting: Domain der Träume
Abbildung 11.4: Sobald du bei SWITCH die Nameserver deines Providers eingegeben hast (in der Abbildung sind das die Nameserver
ns3.hoststar.ch und ns4.hoststar.ch), ist deine Webseite aus dem Internet unter dem gewählten Domainnamen erreichbar.
87
11 Hosting: Domain der Träume
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
Übrigens: Viele Provider bieten die Reservation und Einrichtung der Domain bei SWITCH gegen ein kleines Entgelt oder
sogar gratis an; in diesem Fall könntest du dir den Schritt 11.1
sparen. Wir raten dir jedoch davon ab, die Verwaltung deiner
Domain in fremde Hände zu geben, da du nie weisst, wie lange
es deinen Provider noch gibt und wie problemlos du an deine
Domain ran kommst, wenn es einmal Probleme geben sollte.
88
:: :: :: :: :: :: :: :: :: :: :: :: :: :: ::
3kanal :: digitAll :: :: :: :: :: :: :: :: :: ::
Webdesignkurshandbuch
12 Übungsblätter
Worum es geht
Die Übungsblätter wirst du im Verlauf des dreitägigen Kurses
«Webdesign – Eine Einführung» bearbeiten, um dich mit unterschiedlichen Aspekten des Webdesigns vertraut zu machen.
Jedes Übungsblatt verweist dich wo nötig an spezifische Kapitel
im vorliegenden Kurshandbuch oder an Webseiten im Internet.
89
12 Übungsblätter
12 Übungsblätter
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
12.1 HTML YES!
Was ist zu tun?
Du erstellst mit Hilfe von BlueGriffon ein neues HTML 5 Dokument.
1.
Starte Bluegriffon, erstelle ein neues Dokument und
begib dich in die Quelltext-Ansicht.
2.
Setze den Titel des Dokumentes auf «Meine Homepage». Benutze dazu den Tag <TITLE>.
3.
Speichere das Dokument im Laufwerkt «T» in deinen
persönlichen Ordner unter dem Namen «zweite_seite.html» ab.
4.
Füge eine grosse Überschrift «Rezepte für Glacé» ein.
Benutze dazu den Tag <H1> (Kapitel 13.2.5).
5.
Füge einen Untertitel «1. Geschmäcke» ein. Benutze
dazu den Tag <H2> (Kapitel 13.2.5).
6.
Füge eine Auflistung mit drei verschiedenen Glacésorten (Vanille, Erdbeer, Schokolade) ein. Benutze dazu die Tags
<UL> und <LI> (Kapitel 13.2.14).
7.
Erstelle einen relativen Link: Mache dazu das Wort
«Vanille» in der obigen Auflistung zu einem Link. Das Linkziel
sei «vanille.html», eine Datei, welche wir dir in deinen Ordner
kopiert haben. Die Syntax, um einen Link einzufügen findest du
im Kapitel 13.2.1. Was ein relativer respektive absoluter Link
ist, erfährst du im Kapitel 3.4. Wir legen dir sehr ans Herz, es
jetzt zu lesen. Ehrlich – wir warten gerne, bis du es gelesen hast!
8.
Erstelle einen absoluten Link: Mache dazu das Wort
«Schokolade» in der obigen Auflistung ebenfalls zu einem Link.
Das Linkziel sei «http://www.schokolade.ch» (Kapitel 3.4 und
Kapitel 13.2.1).
90
:: :: :: :: :: :: :: :: :: :: :: :: :: :: ::
3kanal :: digitAll :: :: :: :: :: :: :: :: :: ::
Webdesignkurshandbuch
12.2 CSS YES!
Was kann man hier lernen?
Über HTML-Tags strukturiert man den Inhalt einer Webseite in
logische Einheiten. Die Gestaltung dieser Einheiten wird über
Stylesheets (CSS: Cascading Stylesheets) erreicht. In diesem
Kapitel wirst du mit Hilfe des Stylesheet-Editors von Bluegriffon das externe Stylesheet einer Webseite verändern und dabei
lernen, wie sich Änderungen auf die Formatierung der Webseite
im Browser auswirkt.
Wo finde ich Hilfe?
Informationen zur Bedienung des Bluegriffon zur Veränderung
von CSS-Angaben findest du im Kapitel 3 und 4.
Eine mögliche Lösung zu dieser Aufgabe findest du unter
http://webdesignkurs.ch/aufgaben, 12.2: CSS Yes!
Was ist zu tun?
1.
Öffne mit dem BlueGriffon die Datei css_yes.html,
welche sich in deinem persönlichen Ordner befindet.
2.
Öffne die Konsole «Stile» (Im Hauptmenu unter KonsoDu siehst in dieser Konsole sämtliche mit dem HTML-Dokument verlinkten CSS-Dokumente – in diesem Fall nur eines
mit dem Namen css_yes.css.
len).
3.
Klicke in der erscheinenden Konsole Stile doppelt auf
den Eintrag css_yes.css.
4.
Durch Anpassungen am CSS-Quelltext kannst du gemäss der folgenden Anleitung das Erscheinungsbild der Homepage verändern. Bestätige alle Änderungen mit einem Klick auf
«Änderungen speichern».
4a.
Ändere die Schriftgrösse des Tags <H1> auf 46 Pixel.
4b.
Ändere die Schriftart aller Absätze <P> auf Courier, 18
Pixel gross.
4c.
Ändere die Auflistung so, dass die Kreise (circle) durch
Quadrätchen (square) ersetzt werden und die Schriftgrösse 12
Pixel beträgt.
4d.
Gib dem Spezialbereich <DIV ID=“spezialbereich“>
</DIV> eine Breite von 450 Pixeln und eine Höhe von 200
Pixeln, dem Hintergrund des Bereichs die Farbe hellgrün
(#3de004) und die Schriftfarbe rot (#ff0000).
4e.
Setze die Schriftfarbe der Klasse farbig auf #ff9900.
5. Betrachte die Seite im Browser.
91
12 Übungsblätter
12 Übungsblätter
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
12.3 BlueGriffon Yes!
1.) Erstelle im BlueGriffon ein neues HTML-Dokument. (Siehe
dazu die Schritt-für-Schritt-Anleitung im Kapitel 5.1):
a.) Erstelle ein neues HTML-Dokument mit Weitere Optionen.
b.) Füge unter Format>Seiteneigenschaften den Titel «BlueGriffon Yes!» und weitere Kopfdaten ein.
c.) Speichere die Datei in deinem persönlichen Ordner unter dem
Namen «bluegriffon.html» ab.
2.) Erstelle eine CSS-Stildatei für das eben erstellte HTML-Dokument. (Siehe dazu die Schritt-für-Schritt-Anleitung im Kapitel
5.4):
a.) Klicke auf das + - Icon in der Stilkonsole und erstelle die
Datei «stile.css», nachdem du die Optionen Mit dem Dokument
verlinkt und dann Neue Datei angewählt hast.
b.) Achte darauf, die URL relativ zu wählen, bevor du mit OK
bestätigst.
3.) Füge drei Abschnitte mit Text ein. Achte darauf, dass der
Text jeweils als einzelner Absatz (<P>-Tag für Paragraph) erfasst wird. Wähle dazu im BlueGriffon beim Aufklappmenu der
Textarten die Option Absatz an (Vgl. Kapitel 5.3.1).
4.) Formatiere die Absätze mittels der Stil-Eigenschaften-Konsole (Siehe dazu die Schritt-für-Schritt-Anleitung im Kapitel
5.4.2):
a.) Klicke in den Text hinein, öffne die Stil-EigenschaftenKonsole und wähle dort die Option «Alle Elemente des gleichen
Typs», damit der <P>-Tag angezeigt wird.
b.) Wähle die Schriftart «Arial».
c.) Wähle die Schriftgrösse «14 px» und die Zeilen- bzw. Linienhöhe «20 px».
(Beachte: Meide die entsprechenden Buttons zur WYSIWYGBearbeitung in der Menu-Übersicht! Diese fügen die CSS-Formatierungen direkt ins HTML ein.)
5) Ordne die zwei ersten Abschnitte der Klasse «farbig» zu.
(Vgl. Kapitel 5.3.7)
6) Formatiere die Klasse «farbig». Klicke einen entsprechenden Abschnitt an und wähle in der Stil-Eigenschaften-Konsole
«Alle Elemente der Klasse...» an. Wähle die Vordergrundfarbe «#c60000». Dies fügt die CSS-Regel «.farbig {color:
#c60000;}» in die CSS-Datei ein.
92
:: :: :: :: :: :: :: :: :: :: :: :: :: :: ::
3kanal :: digitAll :: :: :: :: :: :: :: :: :: ::
Webdesignkurshandbuch
12.4 Hausaufgabe für angehende
WebdesignerInnen
Bitte löse diese Aufgaben auf das nächste Mal. Es handelt sich
dabei vor allem um Repetition des am ersten Kurstag Gelernten.
Dieses Wissen bildet die Grundlage für den weiteren Kursverlauf. Wir veranschlagen für die Lösung ca. eine Stunde. Solltest
du unüberwindbare Schwierigkeiten haben, wende dich bitte
rechtzeitig an scheffen@webdesignkurs.ch. Sollten Verständnisfragen auftauchen, notiere und bring sie bitte mit in den Kurs.
1. Basiswissen auffrischen
a) Wieviele Programme benötigt eine Webdesignerin, um eine
Website zu erstellen und zum Einsatz im WWW zu bringen?
b) Was sind das für Programme und was ist ihr jeweiliger
Zweck? Nenne für jedes dieser Programme ein konkretes Produkt als Beispiel.
c) Sollte dir die Beantwortung einer der beiden vorangegangenen Fragen Mühe bereiten, lies das Kapitel 13.1.
2. Üben üben üben
Löse die Aufgabe «Homepage Yes!» (Kapitel 12.5 der Unterlagen, zu finden auf der folgenden Seite).
Eine Musterlösung zur Aufgabe findest du unter
http://webdesignkurs.ch/aufgaben, 12.5: Homepage Yes!
3. Orientierung über eigene Webseiten-Vorlieben
Durchsurfe das Netz nach Webseiten, die dich ansprechen und
(zumindest in gewissen Aspekten) überzeugen. Nimm die URLs
der gefundenen Seiten mit.
4. Materialien Sammeln
Sammle Materialien (Bilder, Texte etc.) für eine Website zum
erklärten Kurs-Thema, die du am Ende des Kurses den anderen
TeilnehmerInnen vorstellen wirst. Nimm die Materialien mit
in den Kurs (entweder auf Papier, digital über den Server oder
mittels einem USB-Stick).
93
12 Übungsblätter
12 Übungsblätter
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
12.5 Homepage Yes!
Was kann ich hier lernen?
Du erstellst mittels dem Editor «Bluegriffon» eine Homepage.
Es geht darum, drei HTML-Dokumente zu erstellen, die untereinander über Links erreichbar sind. Die Formatierung findet
über ein externes Stylesheet statt.
Wo finde ich Hilfe?
Informationen zur Bedienung des Bluegriffon zur Veränderung
von CSS-Angaben findest du im Kapitel 3 und 4.
Du siehst auf der folgenden Seite, wie die drei Ansichten der
Homepage aussehen (Abbildungen 12.5.1 bis 12.5.3). Eine Musterlösung findest du unter http://webdesignkurs.ch/aufgaben im
Ordner 12.5. Homepage Yes!
Was ist zu tun?
1.
Erstelle in deinem persönlichen Ordner einen neuen
Ordner und nenne ihn «homepage_yes».
2.
Erstelle mit dem Programm BlueGriffon drei einzelne
HTML5-Seiten mit den in der folgenden Tabelle abgebildeten
Dokumententiteln. Beachte mit Vorteil die Schritt-für-SchrittAnleitung zur Erstellung neuer HTML-Dokumente im Kapitel 5.1: «Die immergleichen ersten Schritte»
3.
Speichere die erstellten HTML-Dokumente in den er-
stellten Ordner ab gemäss den unter 2. notierten Dateinamen ab.
Achtung: Keine Umlaute, Sonderzeichen, Leerschläge!
4.
Füge auf jeder Seite Links auf die anderen Seiten ein.
Achte darauf, dass die Links innerhalb eines Absatzes (<P>-Tag)
zu liegen kommen.
5.
Erstelle eine CSS-Datei mit dem Dateinamen «homepage_yes.css». Verlinke jede deiner drei Seiten mit dieser Datei
(siehe Kapitel 5.4).
6.
Editiere nun diese CSS-Datei: Jede der drei Seiten soll
hellblau als Hintergrundfarbe haben. Setze dazu backgroundcolor von <BODY> auf #74bdf8.
94
:: :: :: :: :: :: :: :: :: :: :: :: :: :: ::
3kanal :: digitAll :: :: :: :: :: :: :: :: :: ::
Webdesignkurshandbuch
12 Übungsblätter
7.
Formatiere deine drei Seiten so, dass in allen Absätzen
(<P>-Tag) als Schriftart «Arial» mit der Schriftgrösse «2em»;
verwendet wird. 2em besagt, dass die Schriftgrösse der zweifachen Standardgrösse des verwendeten Browsers entspricht.
8.
Lade den Ordner homepage_yes mit Hilfe des FilezillaFTP-Programms (für die Benutzung desselben siehe Kapitel 6)
in deinen persönlichen Ordner auf dem Webserver www.webdesignkurs.ch.
Für Ehrgeizige:
9.
Lade die Grafik «homeButton.png» vom Webserver
unter http://www.webdesignkurs.ch/aufgaben.html herunter und
speichere sie ebenfalls im Ordner homepage_yes ab.
10.
Füge in die Datei «drei.html» die eben heruntergeladene Grafik ein (siehe dazu Kapitel 5.3.2).
11.
html».
Mach aus der Grafik einen Link auf die Datei «index.
12.
Lade den Ordner homepage_yes wiederum in deinen
persönlichen Ordner auf dem Webserver.
Abb. 12.5.1: Browseransich der ersten
Seite (Titel 1, Dateiname index.html)
Abb. 12.5.2: Browseransicht der zweiten
Seite (Titel 2, Dateiname zwei.html)
95
Abb. 12.5.3: Browseransicht der dritten
Seite (Titel 3, Dateiname drei.html)
12 Übungsblätter
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
12.6 Layout YES!
Was kann man hier lernen?
DIV-Tags werden in Homepages eingesetzt, um Inhalte präzise
positionieren zu können. Anhand der folgenden Aufgaben wirst
du lernen, wie man ein gewünschtes Layout mit Hilfe des 960
Grid Systems im Quelltext erstellt.
Wo finde ich Hilfe?
Informationen über Layout mit CSS und 960 Grid System findest du in den Kapiteln 4 und 7 oder unter http://www.960.gs.
Was ist zu tun?
Du erstellst im BlueGriffon eine Homepage mit dem in Abbildung 12.6.1 gezeigten Layout.
1. Das Layout basiert auf einem Raster mit 12 Spalten. Notiere
dir für jede Layout-Box die Anzahl Spalten, die die Box breit ist.
Beispiel: Die Box «extra» ist 1 Spalte breit.
2. Lade dir die Layout-Vorlage unter http://webdesignkurs.ch/
vorlagen/basic/ (Abschnitt 12.6) herunter und entpacke das .zipPaket in dein persönliches Verzeichnis auf dem Laufwerk T:.
3. Öffne das Programm BlueGriffon und benutze den Menupunkt Datei > Öffnen die Datei «layout_yes.html» und begib
dich in die Quelltext-Ansicht.
Abbildung 12.6.1: Das zu erstellende Layout.
96
:: :: :: :: :: :: :: :: :: :: :: :: :: :: ::
3kanal :: digitAll :: :: :: :: :: :: :: :: :: ::
Webdesignkurshandbuch
4. Ergänze im HTML-Quelltext die DIV-Box mit der ID «container_12» um weitere DIV-Boxen wie in Abbildung 12.6.1.
Beachte, dass jede DIV-Box eine ID und einen Inhalt hat, die du
ebenfalls eintippen und im CSS (in der Datei eigene_stile.css)
formatieren musst!
97
12 Übungsblätter
12 Übungsblätter
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
98
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.1 Das Internet
13.1 Wie funktioniert
das Internet?
Worum es geht:
Um gewandt mit allen für das Webdesign nötigen Ressourcen
umgehen zu können, erachten wir es als absolut notwendig, dass
du die wichtigsten Grundbegriffe des Internets verstehst und
damit umzugehen weisst:
• Internet, Provider, Browser, Server, Router, IP-Nummer,
ADSL, Domain Name Server (DNS), Modem, Webserver,
Domain, Proxyserver, Client, «http://», Internetauskunft
Vorgehen
1.
2.
3.
Film anschauen (siehe «Material und Referenzen»)
Die Abbildungen der folgenden Seite mit dem Film
versuchen in Deckung zu bringen
Alle unklaren Begriffe aus obiger Liste klären
Material und Referenzen
Als Startpunkt empfehlen wir den Film «Wie funktioniert das
Internet» der «Sendung mit der Maus»-Redaktion, der auf der
Kurs-CD zu finden ist.
Des Weiteren erklärt sich das Internetz am besten selbst. Eine
gezielte Goolge-Suche führt meist zu einer guten Erklärung
unbekannter Begriffe.
99
13.1 Das Internet
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Die folgenden Abbildungen stellen die physikalischen Komponenten und die wichtigsten Vorgänge beim Betrachten einer
Webpage im Internet dar.
Abbildung 13.1.1: Verbindungsaufbau
Im ersten Teilschritt (Abb. 13.1.1) geht es darum, zwischen dem
Rechner zuhause und dem Internet eine Verbindung herzustellen.
Dafür muss ich zunächst einmal mit meinem Provider kommunizieren, damit er mir den Zugang zur Verfügung stellt. Ich tu das,
indem ich mich mit meinen Kundendaten (Login und Passwort)
bei ihm anmelde (Useridentifikation). Sobald ich mich korrekt
angemeldet habe, weist er mir eine IP-Adresse zu und stellt mir
seine Infrastruktur für den Datentransfer zur Verfügung. Der
Verbindungsaufbau ist nicht nur die Voraussetzung für den Abruf
einer Webseite im Internet, sondern er ist auch für sämtliche
anderen Internetdienste (wie Chat, Mail, VoIP, etc.) erforderlich.
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Sobald ein Rechner über eine
eigene IP-Adresse verfügt, ist
er im Internet nicht nur für die
von ihm gewünschten Dienste,
sondern auch für Viren, Hacker
oder andere dunkle Mächte
erreichbar und sein Datenverkehr ist von dritten (Provider,
Staatsschutz etc.) beobachtbar.
Provider:
Häufig auch ISP abgekürzt, für Internte Service Provider. Ist ein
in der Regel kommerzieller Internet-Anbieter, der unterschiedliche Dienstleistungen verkauft. Die zwei wichtigsten Dienste
sind: 1. Das Zur-Verfügung-Stellen einer Internetverbindung mit
je nach Angebot unterschiedlicher Bandbreite. Diese Dienste werden vor allem von Telekom- und Kabelnetzbetreibern
verkauft. 2. Das Zur-Verfügung-Stellen von Webservern, um
eine Website zu hosten. Diese Anbieter bezeichnet man meist als
Host.
IP-Adresse (Wartenummer):
Ist eine Zahlenkombination, die einem ans Internet angeschlossenen Gerät zur eindeutigen Identifikation (Adressierung) dieses
Geräts zugewiesen wird (Entspricht im Film der Wartenummer
von Armin.)
100
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Abbildung 13.1.2: DNS-Lookup
Wenn ich eine Webseite mit meinem Browser aufrufen möchte,
muss ich diesem die Adresse der Webseite angeben. In der Regel
mach ich ich das, indem ich eine sogenannte Domain (z.B.
«http://www.webdesignkurs.ch») eingebe. Die tatsächliche Adressierung von Datenpaketen im Internet findet jedoch vor allem
über die IP-Adressen statt. Daher schickt mein Browser zunächst
eine Anfrage an einen DNS-Server, der - vergleichbar einer
Telefonauskunft - die Domain-Namen in Zahlen der IP-Adresse
übersetzt (Abbildung 13.1.2).
Jeder Provider ist verpflichtet bei sich selber zwei DNS-Server
einzurichten und mit diesen die DNS-Anfragen der eigenen
KundInnen zu beantworten. Sollten diese DNS-Server eine Domain und ihre zugehörige IP-Adresse nicht kennen, dann leiten
sie die Anfrage weiter an den zuständigen Top-Level-DNS-Server, der sämtliche Domains und IP-Adressen seiner Top-LevelDomain kennt. In der Schweiz ist das z.B. die Switch (www.
switch.ch); sie verwaltet alle Domains, die auf .ch enden.
Domain:
Unter einer Domain versteht man die Adresse einer Website, wie
man sie im Browser eingibt. Also z.B. «www.webdesignkurs.
ch». Die Domain setzt sich aus mehreren Bestandteilen zusammen, so der Top-Level-Domain (in unserem Beispiel «.ch»), der
Second-Level-Domain (in unserem Beispiel «webdesignkurs»)
und der Third-Level-Domain (in unserem Beispiel «www»).
Letztere wird häufig auch als Subdomain bezeichnet, da man mit
ihr Unterbereiche innerhalb der Second-Level-Domain unterscheiden kann. Anhand der Domain-Namen lassen sich Webdienste gezielt abrufen.
101
13.1 Das Internet
13.1 Das Internet
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
Abbildung 13.1.3: Abruf der Webseite
Sobald mein Browser vom DNS die korrekte IP-Adresse erhalten hat, schickt er die eigentliche Anfrage zum Abrufen der
Webseite ins Internet (Abbildung 13.1.3). Dabei wird die Anfrage
über die verschiedenen Router von einem Intranet zum nächsten
weiter geleitet, bis sie schliesslich bei dem Webserver mit der
entsprechenden IP-Adresse ankommt. Dort wird die gefragte
Datei (meist ein HTML-Dokument) ausgelesen und wieder
mittels der Router an meinen Computer und den Browser zurück
geschickt. Wenn der Browser die HTML-Datei erhält, muss er
sie nur noch im Browserfenster darstellen. Das macht er, indem
er den HTML-Quellcode in die darzustellende Browseransicht
übersetzt.
Webserver:
Ein Webserver ist ein Computer, der in der Regeln mit einer
fixen IP-Adresse ans Netz gehängt ist, und auf dem ein Serverprogramm läuft, das Clientanfragen (z.B. von Browsern)
beantworten kann, indem es die gewünschten Dateien ausliest
und dem Client schickt. Das heisst, dass der Server ebenfalls als
Speicherort für die zu einer Webseite gehörigen Dateien dient.
Browser:
Ein Browser ist eine Software, die dem Lesen und Darstellen
von Webseiten dient. Sie wird auf dem Rechner des Internetnutzers installiert und über die Eingabe von Web-Domains in die
Adresszeile bedient. Es ist wichtig zwischen dem Browser als
Programm und zwischen den im Browserfenster dargestellten
Webseiten (z.B. Google) klar zu unterscheiden. Beispiele von
gängigen Browsern sind der Internet Explorer, Firefox, Safari,
Opera etc. Sie alle beherrschen die Syntax von HTML (und Javascript und noch einiges mehr), um den HTML-Quellcode von
HTML-Dokumenten korrekt zu übersetzen und in der gewünschten Weise zur Darstellung zu bringen.
102
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2 HTMLKurzreferenz
Was du hier findest
Dieses Kapitel enthält eine kurze HTML-Referenz ausgewählter
Tags. Die Tags werden in alphabetischer Folge vorgestellt. Du
brauchst sie daher nicht der Reihe nach durchzulesen, sondern
kannst dich direkt jenen Tags zuwenden, die dich interessieren.
Die Tags werden nur in aller Kürze eingeführt, wobei auf die
wichtigsten Attribute hingewiesen wird. (Im Hinblick auf die
Attribute solltest du wissen, dass der Gebrauch von CSS die
meisten Attribute langfristig verdrängt, siehe Kapitel 13.3).
Wenn du dich vertiefen möchtest, verweisen wir dich wie immer
an die Beschreibungen von SelfHTML. Eine Liste sämtlicher
HTML-Elemente findest du unter:
http://de.selfhtml.org/html/referenz/elemente.htm
13.2.1
13.2.2
13.2.3
13.2.4
13.2.5
13.2.6
13.2.7
13.2.8
13.2.9
13.2.10
13.2.11
13.2.12
13.2.13
13.2.14
13.2.15
<A>: Anker und Hyperlink
<BODY>: Körper des Dokuments
<BR>: Zeilenumbruch
<DIV>: DIV-Tag, allgemeines Block-Element
<H1>-<H6>: Überschriften
<HEAD>: Kopf des Dokuments
<HTML>: HTML-Dokument
<IMG>: Bild
<META> : Metainformationen
<OL>: Nummerierte Liste S. 130
<P>: Textabsatz S. 131
<SPAN>: Allgemeines Inline-Element
<TABLE>, <TR>, <TD>: Tabellen
<UL>: Aufzählungs-Listen
<!DOCTYPE>: Dokumententyp-Deklaration
103
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.1 <A> - Anker / Hyperlink
Der A-Tag ist für das H in HTML zuständig. Mit ihm lassen
sich sogenannte Ankerpunkte setzen, von denen Links (sprich:
Hyperlinks) ausgehen bzw. zu denen sie hinführen. Ohne A-Tags
keine Links.
Die minimale Syntax
<A HREF="URL">Ein Linktext</A>
Erläuterung
Mit dem A-Tag wird ein Bereich markiert, der zum Anker
werden soll. Möchte man einen Hyperlink erstellen, markiert
man einen Text oder ein Bild mit dem Tag. Der Text wird dann
blau gefärbt und unterstrichen. Damit der Browser beim Anklicken des Links weiss, wo er hinführen soll, muss man ihm das
Attribut HREF (Hyperreference) mit einer gültigen Zieladresse,
einer so genannten URL (Uniform Resource Locater) angeben.
Die Adresse muss entweder relativ zum Dokument oder absolut
gesetzt sein (Kapitel 6). Bei der absoluten Adressierung ist unbedingt das Protokollkürzel http:// voran zu setzen.
Ein Beispiel findest du in den Abbildungen 13.2.1.1 und
13.2.1.2.
Abbildung 13.2.1.1: Ein Link im Quelltext.
Abbildung 13.2.1.2: Der Link in der WYSIWYG-Ansicht.
104
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Email-Links
Man kann einen Browser auch anhand eines Links dazu veranlassen, das Mailprogramm zu starten und eine Mail an eine
bestimmte Adresse zu beginnen. Das geht ganz einfach und sieht
vordergründig auch genau gleich wie andere Links aus. Alles,
was sich ändert, ist das Protokollkürzel und die Adresse. Also
anstatt http:// steht mailto: und die Adresse muss natürlich eine gültige E-Mailadresse sein. Also z.B.:
<A HREF="mailto:gott@himmel.org">
Beschwerden</A>
Beachte: Da es Programme gibt, die das Internet gezielt nach
E-Mailadressen durchscannen, um sie dann an Spamverteiler zu
verkaufen, sollte man auf seinen Homepages höchstens Links
mit den E-Mailadressen seiner Feinde einbauen. Alternativ dazu
schreibt man die Adresse um («gott AT himmel.org»), ohne
einen Link daraus zu machen, oder man verwendet Javascript,
um den Mailto-Link dynamisch zu generieren. Zwei konkrete
Verschlüsselungs- / Versteck-Mechanismen findest du auf unseren Demoseiten (http://www.webdesignkurs.ch/demos (Beispiel
10.3.9)). Eine Anleitung, wie man mit dem Composer EmailLinks einfügt, findest du im Kapitel 4.6.3.
Links mit neuem Zielfenster
Es kommt häufig vor, dass man einen Link in einem neuen
Fenster öffnen möchte, insbesondere dann, wenn der Link auf
eine externe Website führt. Dies lässt sich mit dem TARGETAttribut erreichen. Das TARGET-Attribut teilt dem Browser
mit, in welchem Zielfenster die neue Seite geöffnet werden soll.
Soll einfach ein neues Fenster geöffnet werden, gibt man diesem
Attribut den Wert "_blank". Also z.B.:
<A HREF="http://www.himmel.org"
TARGET="_blank">Himmel</A>
Das TARGET-Attribut wird sonst vor allem beim Arbeiten mit
Frames respektive Framesets gebraucht, wo man gleichzeitig mit
verschiedenen Fenstern arbeitet, die alle einen eigenen Namen
haben können, auf die man dann mit dem TARGET-Attribut
zugreifen kann. Mehr dazu bei SelfHTML.
Eine Anleitung, wie man mit dem Composer Links mit einem
neuen Zielfenster einfügt, findest du im Kapitel 4.6.4.
105
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Anker als Zielpunkt
Manchmal möchte man Links innerhalb ein- und derselben Webpage setzen, beispielsweise wenn man einer sehr langen Seite
ein anklickbares Inhaltsverzeichnis voranstellen möchte (wie das
bei SelfHTML häufig der Fall ist).
Um dokumentinterne Verweise zu erstellen, benötigt man zwei
Anker: zum einen muss man einen Zielpunkt innerhalb des Dokuments festlegen, wo der Link hinführen soll, und zum anderen
gilt es den anklickbaren Link zu erstellen.
Der Zielpunkt wird folgendermassen definiert:
<A NAME="zielpunktname"></A>
Anstatt des HREF-Attributes steht ein NAME-Attribut zur
Bezeichnung des Zielpunktes. Der Bereich zwischen dem
Eröffnungs- und dem Schlusstag bleibt in der Regel leer. Beim
Link ändert sich nur ein Detail: Die Zieladresse benötigt kein
Protokollkürzel, es genügt der Name des Zielpunktes, dem aber
noch das Rautezeichen voran gesetzt werden muss. (Achtung:
Der Name muss wie immer exakt identisch geschrieben werden.)
Also z.B.:
<A HREF="#zielpunktname">interner Zielpunkt</A>
106
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2.2 <BODY> - Körper des Dokuments
Gemäss der HTML-Konvention besitzt jedes HTML-Dokument
eine Grundstruktur aus den Tags HTML, HEAD und BODY. Im
Body werden die darzustellenden Inhalte eingefügt.
Die Syntax
<BODY>
Sämtliche Inhalte und weitere Tags
</BODY>
Erläuterung
Der BODY-Tag ist gewissermassen der Behälter für alle Inhalte,
die zur Darstellung gelangen. Er gehört zur HTML-Grundstruktur (siehe Kapitel 2 sowie 13.2.6 (HEAD-Tag) und 13.2.7
(HTML-Tag)).
Ein Beispiel findest du in den Abbildungen 13.2.2.1 und
13.2.2.2.
Abbildung 13.2.2.1: Der BODY-Tag im Quelltext
Abbildung 13.2.2.2: Was im BODY-Tag steht, wird im Browserfenster dargestellt.
107
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.3 <BR> - Zeilenumbruch
Der BR-Tag dient dazu, innerhalb eines Fliesstextes einfache
Zeilenumbrüche (englisch: break) zu erzwingen.
Die Syntax
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Die sogenannten Blockelemente (P, OL, DIV, FORM, TABLE
etc.) beginnen übrigens mit
einem automatischen Zeilenumbruch. Ihnen gegenüber steht
dir Gruppe der Inline-Elemente
(FONT, B, I, U etc.), die korrekterweise nur innerhalb eines
Blockelementes enthalten sein
dürfen.
<BR>
Erläuterung
Mit dem BR-Tag definierte Zeilenumbrüche werden immer ausgeführt, sie sind daher nicht mit den zufällig entstehenden Umbrüchen in einem Textabsatz zu verwechseln, die beispielsweise
durch das Verändern der Browsergrössse entstehen können. Der
BR-Tag ist ein Fossil und stammt aus einer Zeit, als HTML noch
nicht ganz konsistent war, daher kommt er ohne End-Tag aus.
Ein Beispiel findest du in den Abbildungen 13.2.3.1 und
13.2.3.2.
Abbildung 13.2.3.1: Der BR-Tag im Quelltext (nach dem Satzende).
Abbildung 13.2.3.2: Der resultierende Zeilenumbruch in der WYSIWYG-Ansicht.
108
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2 HTML-Kurzreferenz
13.2.4 <DIV> - allgemeines Block-Element
Der DIV-Tag (DIV für «Division») dient innerhalb der HTMLStruktur alleine dazu, einen eigenen Bereich («Block») in der
HTML-Struktur zu markieren und als zusammengehörige Einheit von den übrigen Elementen abzugrenzen. Dadurch werden
alle Elemente, die der DIV-Bereich beinhaltet, zum selben Block
gehörig gekennzeichnet. Daher spricht man auch von einem
DIV-Container.
Die Syntax
<DIV>...</DIV>
Erläuterung
Abgesehen davon, dass er einen Zeilenumbruch bewirkt, hat der
DIV-Tag keine Darstellungseigenschaften, d.h. er ist selber unsichtbar. Er eignet sich somit ideal, um bestimmte Bereiche mit
CSS zu formatieren (siehe dazu die Abbildungen 13.2.4.1 und
13.2.4.2, Kapitel 10.1 und das Demobeispiel 10.3.6).
Mit DIV-Tags lassen sich Container Boxen innerhalb des Layouts über CSS formatieren, die dieselbe Funktion wie die Zellen
einer Tabelle erfüllen. Diese Technik eines CSS-basierten Layouts beruht auf dem sogenannten Box-Modell, das eine strikte
Trennung von inhaltlicher Struktur (HTML) und grafischer Formatierung (CSS) postuliert (Abbildungen 13.2.4.1 und 13.2.4.2).
Abbildung 13.2.4.1: Quelltext für die Erstellung dreier DIV-Boxen.
Abbildung 13.2.4.2: Die Boxen in der Browserdarstellung.
109
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Die sogenannten Blockelemente (P, OL, DIV, FORM, TABLE
etc.) beginnen übrigens mit
einem automatischen Zeilenumbruch. Ihnen gegenüber steht
dir Gruppe der Inline-Elemente
(FONT, B, I, U etc.), die korrekterweise nur innerhalb eines
Blockelementes enthalten sein
dürfen.
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.5 <H1><H2><H3><H4><H5><H6> Überschriften
Mit den sechs H-Tags lassen sich in HTML Überschriften definieren.
Die Syntax
<H1>
Titel erster Ordnung
</H1>
Erläuterung
Der H-Tag (H für «heading») dient innerhalb der HTML-Struktur dazu, Text-Überschriften (Titel) auszuzeichnen. Dabei kennt
HTML sechs verschiedene Ordnungsebenen bzw. Wichtigkeiten
von Überschriften. Der Titel erster Ordnung (H1) ist der wichtigste, derjenige der sechsten Ordnung (H6) der am wenigsten
wichtige. Damit ist es möglich, einem Text auch Untertitel zu
geben. Die Überschriften werden von den Browsern in der Regel
in der Abfolge ihrer Wichtigkeit unterschiedlich gross dargestellt. Die Verwendung des H-Tags empfiehlt sich aus zweierlei
Gründen. Zum einen lassen sich Titel damit leicht per CSS
formatieren. Zum anderen orientieren sich Suchmaschinen wie
Google bei der Archivierung von Webseiten an den verwendeten
Überschriften. Daher sollten in den Titeln unbedingt relevante
Begriffe verwendet werden.
In Abbildung 13.2.5.1 und 13.2.5.2 siehst du alle Titelebenen
einmal dargestellt.
Abbildung 13.2.5.1: Quelltext einiger Überschriften
Abbildung 13.2.5.2: Browseransicht der verschiedenen Überschriften
110
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2.6 <HEAD> - Kopf des Dokuments
Der HEAD-Tag (englisch für Kopf) gehört neben dem HTMLund dem BODY-Tag zur Grundstruktur eines jeden HTMLDokuments.
Die Syntax
<HEAD>
Hier die weiteren Kopfdaten
</HEAD>
Erläuterung
Der HEAD-Tag für sich ist äusserst einfach zu gebrauchen, in
der Regel enthält er kein Attribut. Seine Bedeutung kommt ihm
allein aufgrund seiner Funktion für die HTML-Grundstruktur zu.
Er folgt unmittelbar auf den HTML-Tag und befindet sich auf
derselben hierarchischen Ebene wie der BODY-Tag, wobei er
diesem unmittelbar voran geht. Er beinhaltet sämtliche Angaben,
die nicht zur Darstellung im Browserfenster gelangen sollen:
Metadaten, Titel, CSS-Definitionen, Programmskripte etc. (Siehe
auch: Kapitel 2, 13.2.3 (BODY-Tag) und 13.2.9 (HTML-Tag)).
Ein Beispiel findest du in den Abbildungen 13.2.6.1 und
13.2.6.2.
Abbildung 13.2.6.1: Der HEAD-Tag im Quelltext.
Abbildung 13.2.6.2: In der WYSIWYG-Ansicht ist davon wenig zu sehen.
111
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.7 <HTML> - HTML-Dokument
Das Wurzelelement eines HTML-Dokuments. Enthält (abgesehen von der Dokumenttyp-Deklaration) sämtliche übrigen
HTML-Elemente einer Seite.
Die Syntax
<HTML>
hier folgen HEAD und BODY
</HTML>
Erläuterung
In dem Beispiel findest du die gesamte Grundstruktur eines
HTML-Dokuments wieder, die für die korrekte Programmierung
notwendig ist, um im Browserfenster etwas darzustellen. Dazu
gehören insbesondere der HTML-, der HEAD- und der BODYTag. HEAD- und BODY-Tag sind die beiden einzigen Elemente,
die sich unmittelbar innerhalb des HTML-Tags befinden, wobei
der HEAD-Tag dem BODY-Tag voran gehen muss. Im weiteren
steht noch vor dem HTML-Tag die Dokumenttyp-Deklaration,
die darüber Auskunft gibt, um was für einen Dokumenttyp
(HTML) es sich im Folgenden handelt und um welche HTMLVersion. Diese Angabe ist für die Darstellung im Browser
wichtig. Siehe auch Kapitel 13.2.3 (BODY-Tag) und 13.2.8
(HEAD-Tag).
Ein Beispiel findest du in den Abbildungen 13.2.7.1 und
13.2.7.2.
112
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Abbildung 13.2.7.1: Die HTML-Grundstruktur einer jeden Webseite.
Abbildung 13.2.7.2: Und die entsprechende WYSIWYG-Ansicht.
113
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.8 <IMG> - Bild
Mit dem IMG-Tag lassen sich Bilder in Homepage einfügen.
Die Syntax
<IMG SRC="URL">
Erläuterung
HTML-Dokumente bestehen nur aus unformatiertem Text. Die
Bilder, die man in eine Webseite einfügt, muss man daher in
einer gesonderten Datei abspeichern. Als Dateiformate kommen
nur JPG, GIF oder PNG in Frage. Der Browser greift dann zu
Darstellung der Seite auf diese externe Bilddatei zu, indem er
sie anhand der Adresse einliest, die beim SRC-Attribut steht.
Bei der Adressierung von Bildern gelten dieselben Regeln wie
bei der Adressierung von Links. Die Adresse muss entweder
relativ zum Dokument oder absolut gesetzt sein. Dani empfiehlt
dir, die Bilder im selben Verzeichnis wie alle übrigen Webdateien abzuspeichern, Imre hingegen neigt eher dazu, sie in einem
eigens hierfür vorgesehenen Unterordner zu versorgen (Beispiel:
«bilder»). Mit dem ALT-Attribut lässt sich zudem ein Alternativtext definieren, der von Browsern dargestellt wird, die keine
Bilder anzeigen.
Ein Beispiel findest du in den Abbildungen 13.2.8.1 und
13.2.8.2.
114
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
Abbildung 13.2.8.1: Der IMG-Tag im Quelltext, inklusive Alternativttext-Attribut.
Abbildung 13.2.8.2: Und hier sieht man, wie das Bild ins Browserfenster geladen wird.
115
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.9 <META> - Metainformationen
Anhand des META-Tags lassen sich Zusatzinformationen in den
Quellcode einfügen, die für die Darstellung im Browserfenster
irrelevant sind, die jedoch für Suchmaschinen hilfreich sein können, wenn es darum geht, die jeweiligen Seiten zu kategorisieren. Im Mozilla Navigator lassen sich diese Metainformationen
übrigens über Ansicht > Seiteninformationen auslesen.
Die Syntax
<META NAME="Informationstyp"
CONTENT="Wert">
Erläuterung
Es gibt Suchmaschinen, sogenannte Searchbots, die das Internet nach Inhalten absuchen, um diese nachher sauber geordnet
abzulegen. Unter anderem greifen sie dabei auf die Metainformationen zurück, die anhand des META-Tags festgehalten
werden. Diese Informationen brauchen nicht zur Ansicht im
Browserfenster gelangen, weshalb sie in der Regel im Head des
Dokuments stehen. Eine ausführliche Beschreibung des Konzeptes und etlicher möglicher Metadaten findest du unter:
http://de.selfhtml.org/html/kopfdaten/meta.htm
http://de.wikipedia.org/wiki/Meta-Tag
Mit dem BR- und dem IMG-Tag ist der META-Tag einer der
wenigen Tags, die entgegen allen Regeln kein End-Tag benötigen. Neben dem NAME-Attribut findet übrigens noch das
HTTP-EQUIV-Attribut (ebenfalls in Kombination mit dem
CONTENT-Attribut) seine Verbindung. Seine Angaben richten
sich an die Webserver, scheinen gemäss SelfHTML jedoch kaum
von diesen ausgelesen zu werden.
Die Syntax des META-Tags setzt sich so zusammen, dass du
mit dem Wert des NAME-Attributs jeweils mitteilst, um welche
Art von Metainformation es sich handelt. Es gibt hierfür gewisse
Standards an möglichen Informationstypen. Im CONTENTAttribut übergibst du dann die dazu gehörige Information.
Im folgenden Beispiel kommen drei sehr verbreitete Metainformationen zur Anwendung. Mit der Metainformation
«description» kannst du eine kurze inhaltliche Beschreibung
deiner Webseite festhalten und der Angabe «author» kannst du
deinen Namen als Wert zuweisen. Die Metainformation «keywords» dient dazu, eine Liste inhaltlicher Schlüsselwörter an
die Suchmaschinen zu übergeben, damit diese die Site bei sich
116
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
korrekt einordnen können. Die häufig mit diesen Keywords einhergehenden Hoffnungen auf ein Top-Ranking bei Google und
Konsorten müssen jedoch leider enttäuscht werden. Suchmaschinen befolgen relativ komplexe Algorithmen bei der Bewertung
einzelner Websites. Mehr dazu hier (Google):
http://www.google.de/corporate/tech.html
Ein Beispiel findest du in den Abbildungen 13.2.9.1 und
13.2.9.2.
Abbildung 13.2.9.1: Drei META-Tags im Quellcode zur Ansicht.
Abbildung 13.2.9.2: Der Quellcode der einfachsten Homepage
117
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.10 <OL> - Nummerierte Liste
Der OL-Tag wird benutzt, um eine nummerierte Liste auszuzeichnen (englisch: ordered list).
Die Syntax
<OL>
<LI>Erster Eintrag</LI>
<LI>Zweiter Eintrag</LI>
</OL>
Erläuterung
Der OL-Tag wird immer in Kombination mit den eigentlichen
Listen-Einträgen eingesetzt, welche durch den Tag
<LI>...</LI> ausgezeichnet sind. Dabei werden alle Listeneinträge mit eins beginnend mit einer Zahl versehen.
Eine präzisere Definition der Darstellung (römische oder alphanumerische Nummerierung) von Listen ist über CSS möglich.
Das Verschachteln von nummerierten Listen ist zwar möglich,
bewirkt aber keine hierarchische Gesamtnummerierung: automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind nicht
möglich.
Ein Beispiel findest du in den Abbildungen 13.2.10.1 und
13.2.10.2.
Abbildung 13.2.10.2: Eine nummerierte
Liste im Browser.
Abbildung 13.2.10.1: Der HTML-Code einer nummerierten Liste.
118
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2.11 <P> - Textabsatz
Mit dem P-Tag werden Textabsätze (englisch: paragraph für
deutsch: Absatz) markiert.
Die Syntax
<P>
</P>
zu markierender Text
Erläuterung
Der P-Tag steht für Textabsätze. Inhalte wie Text und Bilder
gehören prinzipiell immer in ein Blockelement (TABLE, P,
DIV etc.) hinein, obschon sich Text an sich auch ohne weitere
Tags in den Body einfügen lassen. Das gilt jedoch nicht unbedingt als guter Stil und hat auch Nachteile. So fügt der P-Tag
beispielsweise am Schluss eines Absatzes automatisch einen
Zeilenumbruch ein, den man sonst von Hand erzwingen müsste. Ausserdem bietet der P-Tag die Möglichkeit den Text über
das ALIGN-Attribut horizontal mit einem der Werte "LEFT",
"CENTER", "RIGHT" oder "JUSTIFY" (für Blocksatz)
auszurichten.
Ein Beispiel findest du in den Abbildungen 13.2.11.1 und
13.2.11.2.
Abbildung 13.2.11.1: Ein Textabschnitt, der zentriert dargestellt werden soll.
Abbildung 13.2.11.2: Der Text wird gemäss den Angaben im Quellcode ausgegeben.
119
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.12 <SPAN> - Allgemeines Inline-Element
Mit dem SPAN-Tag werden zusammen gehörende Bereiche
innerhalb eines Block-Elements (z.B. <DIV>, <P>) ausgezeichnet.
Die Syntax
<P>
Pflanzen entwickelten sich erst
<SPAN>
nach
</SPAN>
den Bakterien.
</P>
Erläuterung
Ähnlich wie das <DIV>-Element, welches andere Block-Elemente enthalten kann ist das <SPAN>-Element dazu da, Text
und andere Inline-Elemente zu gruppieren und von anderen
Inhalten abzugrenzen. Das <SPAN>-Tag bewirkt selber keine
visuelle Formatierung und ist dazu gedacht, über CSS formatiert
zu werden. Der ausgezeichnete Bereich muss mit </SPAN>
abgeschlossen werden.
Das <SPAN>-Tag darf nur innerhalb eines Block-Elements
vorkommen.
Ein Beispiel findest du in den Abbildungen 13.2.12.1 und
13.2.12.2.
Abbildung 13.2.12.1: Auszeichnung
mittels <SPAN>-Tag im Browser.
Abbildung 13.2.12.2: Inhalte innerhalb eines Block-Elements werden mittels <SPAN>Tag gruppiert und über CSS formatiert.
120
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2.13 <TABLE>, <TR>, <TD> - Tabellentags
Tabellen haben sich bei der Gestaltung von Webseiten aufgrund
ihrer Möglichkeit das Browserfenster zweidimensional zu
gliedern durchgesetzt. Es handelt sich bei den Tabellen um eine
komplexe verschachtelte Struktur aus mehreren Tags und einer
Vielzahl von zugehörigen Attributen. Eine ausführlichere Erläuterung der Tabellen findest du im Kapitel 7.
Die Syntax
<TABLE>
<TR>
<TD>
der Zelleninhalt
</TD>
</TR>
</TABLE>
Erläuterung
Jede Tabelle setzt sich aus einer Reihe von Tags zusammen. Der
eigentliche Tabellen-Tag ist der TABLE-Tag (deutsch: Tabelle),
der alle Weiteren enthält. Die beiden wichtigsten Tags, ohne
die sich keine Tabelle herstellen liesse, sind der TR-, sowie
der TD-Tag (Daneben gibt es noch weitere Tabellen-Tags, auf
die soll hier aber nicht eingegangen werden). Anhand dieser
beiden Tags lassen sich die Zeilen und die Spalten einer Tabelle
definieren. Der TR-Tag steht für eine einzelne Zeile (table row)
innerhalb einer Tabelle. Man könnte nun annehmen, das der
TD-Tag für die Spalten einer Tabelle steht. Dem ist aber nicht
so. Der TD-Tag (table data) steht für eine einzelne Zelle innerhalb einer Zeile. Dies hat mit der hierarchischen Struktur zu tun,
die HTML zugrunde liegt (genannt DOM, für Document Object
Model). Zeilen und Spalten würden sich auf der selben Hierarchieebene in die Quere kommen, während die einzelne Zelle der
Zeile eindeutig untergeordnet ist (siehe Beispiel). In der Praxis
läuft es jedoch trotzdem darauf hinaus, dass die vertikal übereinander liegenden Zellen in einer Tabelle gemeinsam eine Spalte
bilden. Dies wird insbesondere daran deutlich, dass alle vertikal
übereinander liegenden Zellen dieselbe Zellenbreite aufweisen
müssen (sofern es sich nicht um eine zusamengesetzte Zelle
handelt). Die eigentlichen Inhalte werden in den Bereich des
TD-Tags eingefügt. Jeder der drei Tags verfügt über unterschiedliche Attribute.
Der TABLE-Tag kann unter anderem mit folgenden Attributen
versehen werden (siehe auch Kapitel 7):
WIDTH: Steht für die Breite der Tabelle. Werte können relativ
in Prozenten oder absolut in Pixeln angegeben werden. (Das
121
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
HEIGHT-Attribut kommt relativ selten zur Anwendung, weil die
meisten Tabellen in der Höhe flexibel sind.)
BORDER: Steht für den sichtbaren Tabellenrahmen. Wird häufig
auf 0 gesetzt, um die Tabelle unsichtbar zu machen.
CELLPADDING: Definiert den Abstand zwischen Zellenrand
und eigentlichem Inhalt.
CELLSPACING: Definiert den Abstand zwischen den einzelnen
Zellen.
BGCOLOR: Bestimmt eine Farbe als Hintergrundfarbe für die
Tabelle.
BACKGROUND: Lässt eine Bilddatei als Hintergrund für die
Tabelle darstellen.
Achtung: Beim Arbeiten mit Tabellen ist es extrem wichtig,
dass man sämtliche Grössenwerte berücksichtigt (also nicht
bloss WIDTH und HEIGHT, sondern auch BORDER und CELLSPACING) und korrekt zur Gesamtgrösse der Tabelle summiert,
da man ansonsten Gefahr läuft, dass das Layout inkonsistent
wird.
Die meisten übrigen Einstellungen werden mit Attributen des
TD-Tags vorgenommen:
WIDTH: Steht für die Breite der einzelnen Zelle. Achtung: Die
vertikal übereinander liegenden Zellen müssen dieselben Werte
aufweisen, da sie gemeinsam als Spalte behandelt werden.
HEIGHT: Gibt die Höhe einer Zelle an. Auch hier gilt, die horizontal nebeneinander liegenden Zellen, also alle Zellen innerhalb desselben TR-Tags, müssen dieselbe Höhe aufweisen, da
sie gemeinsam eine Zeile bilden.
BGCOLOR: Bestimmt eine Farbe als Hintergrundfarbe für die
Zelle.
BACKGROUND: Lässt eine Bilddatei als Hintergrund für die
Zelle darstellen.
Tipp :: :: :: :: :: :: :: :: :: :: :: :
Bitte berücksichtige, dass
Inhalte, die grösser als die ihnen
von der Tabellenzelle zugewiesene Fläche sind, sich den Raum
erzwingen, den sie benötigen.
Hierzu gehören insbesondere
zu grosse Bilder oder zu lange
Wörter und Texte.
ALIGN: Richtet den Zelleninhalt gemäss den Werten "left"
(linksbündig), "center" (zentriert), "right" (rechtsbündig) oder
"justify" (Blocksatz) horizontal aus.
VALIGN: Richtet den Zelleninhalt gemäss den Werten "top"
(oben), "middle" (mittig), "bottom" (unten) vertikal aus.
122
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
COLSPAN: Definiert anhand eines Zahlwerts, über wieviele
Spalten sich eine Zelle erstreckt. Anhand dieses Attributes lassen
sich einzelne Zellen in der Horizontalen verbinden.
ROWSPAN: Definiert anhand eines Zahlwerts, über wieviele
Zeilen sich eine Zelle erstreckt. Anhand dieses Attributes lassen
sich einzelne Zellen in der Vertikalen verbinden.
Achtung: Die Verwendung von COLSPAN wie auch von
ROWSPAN zieht notwendig das Weglassen von überschüssigen
Zellen nach sich!
Ein Beispiel findest du in den Abbildungen 13.2.13.1 und
13.2.13.2.
Eine Anleitung, wie man mit dem Composer Tabellen einfügt,
findest du im Kapitel 6.10.
Abbildung 13.2.13.1: Der Quellcode einer Tabelle mit zwei Spalten und zwei Zeilen.
Abbildung 13.2.13.2: Dasselbe in der WYSIWYG-Ansicht. Die rot gestrichelte Linie wird
im Browser nicht dargestellt.
123
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
13.2.14 <UL> - Aufzählungs-Liste
Der UL-Tag wird benutzt, um eine so genannte AufzählungsListe auszuzeichnen (UL: englisch für: unordered list).
Die Syntax
<UL>
<LI>Erster Eintrag</LI>
<LI>Zweiter Eintrag</LI>
</UL>
Erläuterung
Anhand der beiden Tags kann man dem Browser mitteilen,
dass im Folgenden eine Liste mit mehreren einzelnen Einträgen dargestellt werden soll. Dabei übernimmt der UL-Tag die
Container-Funktion, die Liste als Einheit zu markieren, während
der LI-Tag (LI für «List Item») die einzelnen Punkte innerhalb
der Liste voneinander abgrenzt. Die Listen werden von den
Browser üblicherweise per Voreinstellung leicht eingerückt und
mit einem Aufzählungspunkt («Bullet») dargestellt.
Es gibt die Möglichkeiten, mehrere Listen auch ineinander zu
verschachteln. Die entsprechenden weiterführenden Informationen findest du im SelfHTML:
http://de.selfhtml.org/html/text/listen.htm
Eine präzisere Definition der Darstellung von Aufzählungsliste
ist über CSS möglich.
In der Praxis werden Aufzählungs-Listen häufig eingesetzt, um
Menus von Webseiten zu gestalten.
In den Abbildungen 13.2.14.1 und 13.2.14.2 siehst du ein Beispiel, wie man mit den UL- und LI-Tags eine schlichte Aufzählungsliste erstellen kann.
Abbildung 13.2.14.2: Eine Aufzählungsliste im Browser.
Abbildung 13.2.14.1: Der HTML-Code einer Aufzählungsliste.
124
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.2.15 <!DOCTYPE> - Dokumenttyp-Deklaration
Die Dokumententyp-Deklaration muss in jeder HTML-Datei
noch vor dem <HTML>-Tag stehen. Sie gibt dem Browser an,
um welche Art von HTML-Dokument es sich handelt.
Die Syntax
<!DOCTYPE html>
<HTML>
....
</HTML>
Erläuterung
Verwendet man den aktuellen Standard HTML 5, ist die Deklaration mit <!DOCTYPE html> ganz einfach. Zeichnete man
seine Seiten mit älternen HTML-Varianten aus (HTML 3.2 oder
HTML 4), waren dem !DOCTYPE-Tag komplexe Attribute mitzuliefern (eine Übersicht findest du hier: http://de.selfhtml.org/
html/allgemein/grundgeruest.htm#dokumenttyp).
Die Darstellung ist in den meisten Browsern in vielen Belangen
von der hier vorgestellten Dokumenttyp-Deklarationen abhängig. Die Dokumententyp-Deklaration wegzulassen kann dazu
führen (und führt in der Regel dazu), dass der Browser Inhalte
nicht wie erwartet darstellt.
In der Abbildungen 13.2.15.1 siehst du ein Beispiel, wie man mit
ein HTML 5-Dokument deklariert.
Abbildung 13.2.15.1: Jedes HTML-Dokument beginnt mit einer <!DOCTYPE>-Angabe.
125
13.2 HTML-Kurzreferenz
13.2 HTML-Kurzreferenz
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
126
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.3 Ein komplettes
Javascript-Beispiel
Um was es geht
Du lernst hier, was Javascript ist und erhälst ein konkretes Beispiel inklusive komplettem Code, den du in deine eigenen Seiten
integrieren kannst.
Material und Referenzen
Die eingehende Behandlung von Javascript sprengt den Rahmen
des Webdesignkurses. Javascript wird in Kapitel 10.2 genauer
sowie unter http://de.selfhtml.org/javascript/ im Detail beschrieben.
Den Quelltext des Beispiels findest du unter
http://webdesignkurs.ch/demos (Beispiel 10.2.5)
Einen kompletten Workshop findest du beispielsweise unter
http://www.javascript-workshop.de/buch/
127
13.3 Komplettes JS-Beispiel
13.3 Komplettes JS-Beispiel
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Wie funktionierts?
Javascript ist eine Programmiersprache. Der Programmcode
wird dabei in das HTML-Dokument hineingeschrieben und vom
Browser gelesen und ausgeführt.
Das Beispiel besteht aus drei HTML-Dateien, wovon nur die
erste Datei «!window_open.html» (Abbildung 13.3.4) JavascriptCode enthält. Diese Datei, im Browser betrachtet (Abbildung
13.3.1), zeigt zwei kleine Bilder, die angeklickt werden können.
Nach einem Klick in das obere Bildchen wird eine JavascriptFunktion aufgerufen, welche ein neues Fenster öffnet, das eine
exakt definierte Breite und Höhe besitzt, jedoch keine Adresszeile aufweist und auch keinen Scrollbalken (Abbildung 13.3.2). In
diesem neuen Fenster wird eine neue HTML-Datei
«lilit1.html» (Code in Abbildung 13.3.5) dargestellt.
Nach einem Klick in das untere Bildchen wird wiederum die
gleiche Javascript-Funktion, diesmal jedoch mit anderen Parametern aufgerufen, was dazu führt, dass zwar wiederum ein
neues Fenster mit derselben Höhe und Breite geöffnet wird, das
ebenfalls keine Adresszeile aufweist und auch keinen Scrollbalken (Abbildung 13.3.3). In diesem neuen Fenster wird nun
jedoch die HTML-Datei «lilit2.html» (Code in Abbildung 13.3.6)
dargestellt.
Betrachte zunächst den Code von «!window_open.html» (Abbildung 13.3.4). Diese Datei stellt eine Tabelle und zwei kleine
Bilder dar (Abbildung 13.3.1). Im <HEAD> der Datei findest du
einen Abschnitt mit Javascript; er beginnt mit <SCRIPT> und
endet mit </SCRIPT> und enthält eine einzige selber definierte
Funktion: function fenster_oeffnen(). Diese Funktion öffnet ein Fenster genau nach den Vorgaben des Programmieres, also entweder mit oder ohne Adresszeile, Scrollbalken,
Statuszeile und so weiter.
Die Funktion fenster_oeffnen() wird erst ausgeführt,
wenn der Browser die entsprechende Anweisung dazu bekommt
(man sagt, die Funktion werde «aufgerufen»). Dieser Aufruf
Abbildung 13.3.1: Die Übersicht mit den
beiden Miniaturen.
Abb 13.3.2: Das neu geöffnete Fenster –
ohne Adresszeile und Scrollbalken.
128
Abbildung 13.3.3: Auch dieses geöffnete
Fenster ohne Balken & Adresszeile
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.3 Komplettes JS-Beispiel
wird über einen so genannten Eventhandler ausgelöst, er befindet
sich weiter unten im <A>-Tag des Bodys und wird nach einem
bestimmten Klick (einem sogenannten «Event») aktiviert.
Im <BODY> sind vor allem die Links speziell ausgezeichnet.
Das Attribut HREF des <A>-Tags verweist auf «#», was soviel
bedeutet wie «ersetze die bestehende Seite nicht durch eine neue
Seite sondern mach das, was im folgenden Javascript geschrieben steht». Nun der Trick: Um die oben beschriebene Funktion
fenster_oeffnen() aufzurufen und damit ein neues Fenster zu öffnen, musst du im Link das Attribut onClick einsetzen
(Abbildung 13.3.4, Zeilen 22 / 27). Dieses ruft nach einem Klick
auf den Link die Javascript-Funktion auf und übergibt die angegebenen Parameter.
Der erste Parameter («lilit1.html») entspricht dem Dateinamen
der HTML-Datei, welche in das neue Fenster geladen werden
soll. Der zweite Parameter («Lilit 1») ist der Name des neuen
Fensters. Der dritte Parameter («450») bestimmt die Breite des
neu zu öffnenden Fensters und der Vierte («350») dessen Höhe.
Achtung: Da der erste Parameter jeweils auf eine neue Datei
verweist, musst du diese (HTML-)Dateien auch erstellen (Abbildungen 13.3.5 und 13.3.6)!
Abbildung 13.3.4: Der Quellcode der Übersichtsseite !window_open.html. Er enthält die Javascript-Anweisungen.
129
13.3 Komplettes JS-Beispiel
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
Abbildung 13.3.5: Der Quellcode der Datei lilit1.html
Abbildung 13.3.6: Der Quellcode der Datei lilit1.html
Wie gehst du vor, wenn du diese Funktionalität in deine eigene Homepage integrieren möchtest?
1. Erstelle alle benötigten Dateien: a) Die Datei mit den
Thumbnail-Übersichten b) Die HTML-Dateien mit den Detailansichten.
2. Kopiere den Abschnitt von <SCRIPT> bis
</SCRIPT> der Abbildung 13.3.4 in den HEAD deines HTMLDokumentes.
3. Passe in der Thumnail-Übersicht die Links gemäss
der Zeilen 22 / 27 der Abbildung 13.3.4 (Dateinamen, Fenstergrössen) an.
130
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.4 Sonderzeichen
Um was es geht
Da HTML in einer Welt ohne Umlaute und Sonderzeichen erfunden wurde, können derartige «Sonderzeichen» nur über eine
spezielle Notation beschrieben werden. Benutzt man trotzdem
Umlaute, läuft man Gefahr, dass die Homepage auf gewissen
Computern nicht korrekt dargestellt wird (insbesondere auf
Rechnern im Ausland oder auf solchen, die nicht deutsch konfiguriert sind).
Referenzen
In Selfhtml findet man unter dem folgenden Link eine komplette
Liste und weiterführende Informationen zu diesem Thema:
http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_iso8859_1
Material
Die wichtigsten Zeichen haben wir für dich in der folgenden
Tabelle zusammengefasst. Viele weitere Zeichen lassen sich
daraus ableiten, da das Schema der Sonderzeichen relativ logisch
aufgebaut ist.
Sonderzeichen können überall in einem HTML-Dokument
eingesetzt werden, wo man Text einfügen kann.
131
13.4 Sonderzeichen
13.4 Sonderzeichen
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
Alle benannten HTML-Zeichen sind nach dem folgenden
Schema aufgebaut:
&Name;
&
Name
;
= Beginn des benannten Zeichens
= Name des benannten Zeichens
= Ende des benannten Zeichens
Zeichen
Name in HTML
Beschreibung
“
&quot;
Anführungszeichen oben
<
&lt;
Spitze Klammer öffnend
&
>
©
Ä
ä
ö
ü
é
à
̃
€
&amp;
Ampersand-Zeichen
&gt;
Spitze Klammer schliessend
&copy;
Copyright-Zeichen
&Auml;
A mit Umlaut
&auml;
a mit Umlaut
&ouml;
o mit Umlaut
&uuml;
u mit Umlaut
&eacute;
e mit accent aigu (Akut)
&agrave;
a mit accent grave (Gravis)
&tilde;
Kleine Tilde
&hearts;
Grosses Herz
&euro;
Euro-Zeichen
Um nicht jeden Umlaut auf obige Art und Weise «programmieren» zu müssen, kann man im HEAD des Dokuments die
folgende Zeile einfügen. Dies ermöglicht es, im BODY beliebig
deutsche Umlaute einzusetzen (konkrete HTML-Umsetzung in
den Abbildungen 13.4.1 und 13.4.2). Im HEAD sind alle Sonderzeichen nichts desto trotz in der oben notierten Form zu schreiben (zum Beispiel im TITLE-Tag).
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
Abbildung 13.4.1: Quellcode, um im HTML-Code Umlaute einsetzen zu können.
Abb. 13.4.2: Browseransicht von 13.4.1
132
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.5 Programmzusammenspiel
13.5 Das Zusammenspiel der
eingesetzten Programme
Worum es geht
Um Homepages zu entwickeln musst du drei Dinge tun können:
Du musst eine HTML-Datei erstellen und verändern können, du
musst sie darstellen und überprüfen können und du musst sie ins
Internet stellen können. Für jede dieser Funktionen gibt es ein
besonderes Programm (Editor, Browser und FTP-Programm).
Im folgenden soll anschaulich dargestellt werden, in welcher Abfolge man diese drei Programme kombiniert.
Du wirst nach dem Durcharbeiten dieses Kapitels folgende Techniken beherrschen:
• Zusammenspiel von Editor und Browser
• Einsatz des FTP-Programms für den Dateitransfer
Material und Referenzen
Solltest du Fragen technischer Natur zum hier Beschriebenen
haben, verweisen wir dich auf die Kapitel 2 - 6, die die Grundlage für die Darstellung auf den folgenden Seiten bilden.
133
13.5 Programmzusammenspiel
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
Programmieren des Codes im Editor
13.5.1 Um eine Homepage zu erstellen brauchen wir einen
Editor (Kapitel 3 und 5). Je nach Vorliebe wählst du zu diesem
Zweck einen reinen Texteditor oder aber einen WYSIWYGEditor, der dich Änderungen auch gleich in einer grafischen
Darstellung der Website vornehmen lässt. Im Editor erstellst du
den Quelltext der einzelnen Webseite.
Überprüfen der Webseite im Browser
13.5.2
Um die Resultate dieses Prozesses überprüfen zu können, musst du die Webseite in einem Browser darstellen. Damit
du das aber überhaupt tun kannst, muss die Webseite auf unserer
Festplatte als HTML-Datei existieren. Das heisst, du musst die
Webseite zunächst einmal im Editor an einem intelligenten Ort
abspeichern (Kapitel 3.3.2 sowie Kapitel 3.5).
13.5.3 Dann startest du den Browser deiner Wahl, öffnest die
Homepage und prüfst, ob die Darstellung korrekt ist (Kapitel
3.3.3). Dabei lässt du den Editor aber weiterhin geöffnet.
13.5.4 Falls du noch nicht zufrieden bist und Änderungen
anbringen möchest, gehst du wieder in den noch geöffneten
Editor und bringst dort die Änderungen an und speicherst sie ab
(Abbildung 13.5.1).
13.5.5 Dann wiederholst du 13.5.3 und 13.5.4, bis du mit dem
Ergebnis zufrieden bist.
Du möchtest deine Homepage nun ins Internet stellen.
Abbildung 13.5.1: Das Zusammenspiel von Editor und Browser wie gehabt. Anstelle
des Texteditors steht später jedoch der WYSIWYG-Editor.
134
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.5 Programmzusammenspiel
Website veröffentlichen per FTP-Programm
13.5.6
Um die Homepage ins Netz zu stellen, startest du
das FTP-Programm und stellst die Verbindung zum Server her
(Schritte 6.4 und 6.5 im Kapitel 6).
13.5.7
Nun begibst du dich im FTP-Programm in die Verzeichnisse hinein, wo sich die entsprechenden Dateien befinden
bzw. wo sie hin verschoben werden sollen, und verschiebst sie
auf den Server (Schritte 6.6 und 6.7 im Kapitel 6).
13.5.8
Du kontrollierst, ob deine Homepage auch übers Internet funktioniert, indem du im Browser die Adresse des WebServers eingibst (Schritt 6.8 im Kapitel 5, Abbildung 13.5.2).
Das FTP-Programm ermöglicht es dir auch von einem anderen
Rechner aus weiter an deiner Website zu arbeiten, indem du
damit sämtliche Dateien vom Server auf deinen Rechner runter
lädst.
Abbildung 13.5.2: Nachdem die Seite erstellt wurde, muss sie per FTP-Programm auf den Webserver verschoben werden. Danach
lässt sie sich von beliebigen Orten im Internetz abrufen.
135
13.5 Programmzusammenspiel
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
136
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
13.6 Inhalt der Kurs-CD
13.6 Inhalt der Kurs-CD
Material und Referenzen
Die Kurs-CD enthält die meisten der Programme, die du im
Webdesign-Kurs einsetzen wirst. Sämtliche Software ist auch im
Internet frei erhältlich. Um die aktuellste Version eines Programmes zu erhalten, suchst du am besten im Internet danach.
Abbildung 13.6.1: Der Inhalt der Kurs-CD
137
13.6 Inhalt der Kurs-CD
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
Die Hauptseiten der Software findest du unter den folgenden
URL:
Bluegriffeon: http://www.bluegriffon.org
Filezilla: http://www.filezilla.de
SELFHTML: http://de.selfhtml.org
Sendung mit der Maus: http://www.wdrmaus.de
Unter «a_software» (Abbildung 13.6.1) findest du die eingesetzten Programme. Sie sind in Versionen für die Betriebssysteme
«Apple Macintosh OS X», Versionen 10.6 und höher und für
«Windows XP» und höher auf die CD gebannt worden.
Unter «b_selfhtml» findest du eine Offline-Version der beliebten
Online-Referenz, für effizientes Arbeiten an den immer weniger
werdenden Orten der Welt, wo das Internet nicht hinreicht.
Unter «c_sendung_mit_der_maus» findest du ebendiese.
Und «d_hidden_features» ist extrem geheim!
138
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
14 Index
Symbole
960 Grid System 53
alpha 55
omega 55
<A> 104
HREF 104, 105, 106
NAME 106
TARGET 105
<BODY> 107
<BR> 108
<DIV> 38
!DOCTYPE 125
<!DOCTYPE> 125
<FONT> 110
<H1>-<H6> 110
<HEAD> 111, 128
<HTML> 112
<IMG> 114
ALT 114
SRC 114
<LINK> 23
<META> 116
<OL> 118
<P> 119, 120
ALIGN 119
CENTER 119
JUSTIFY 119
LEFT 119
RIGHT 119
<SCRIPT> 128
<SPAN> 38
<TABLE> 121
BACKGROUND 122
BGCOLOR 122
BORDER 122
CELLPADDING 122
CELLSPACING 122
HEIGHT 122
WIDTH 121
<TD> 121
ALIGN 122
BACKGROUND 122
BGCOLOR 122
COLSPAN 123
HEIGHT 122
ROWSPAN 123
VALIGN 122
WIDTH 122
<TR> 121
<U> 118, 124, 125
<UL> 124, 125
139
14 Index
14 Index
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
A
absolute Adresse 18
Adressierung 18
absolut 18
absolute 18
relativ 18
relative 18
Adresszeile 128
Aktualisieren 18
alpha 55
Ändern des Programmcodes
18
Anker siehe <A>
anklickbares Inhaltsverzeichnis 106
Attribute 8
Ausrichtung eines Textabsatzes 119
Aussenabstand 29
Aussenabstands siehe CSS:
margin
B
Betrachten einer Webseite 16,
134
Bilder 57, 114
Bildbearbeitung siehe Photoshop
Blockelement 108, 109
Block-Element 28
Blogs 81
Bluegriffon
Dokument korrekt abspeichern 16
BlueGriffon 11, 33
Arbeiten in der WYSIWYGAnsicht 36
Auswahl von Elementen 38
CSS per externem Stylesheet
einbinden 44
CSS-Quellcode bearbeiten
24
Dateispeicherorte 19
die immergleichen ersten
Schritte 34
Erste Schritte 34
Grafik einfügen 39
Inhalte einfügen 37
Klassen- oder Id-Attribute
zuweisen 41
140
Konsolen
Skripteditor 80
Stile 45
Stil-Eigenschaften 46
Link einfügen 39
Listen einfügen 40
Quelltextansicht 14
Regeln für den Dateinamen
16
Seiteneigenschaften 34
Tabellen einfügen 40
Textart vs. Schriftart 38
Textausrichtung einstellen
40
Voreinstellung 13
Webfonts 42
BODY 129
border 29
Boxmodell 28
Box Modell 28
C
Cascading Style Sheets 22, 79
CMS 81
Corporate Design 64, 65, 72,
74
CSS siehe Cascading Style
Sheets
border 29
Box Modell 28
Breite eines Elements 28
CSS-Regeln definieren 22
direkt beim betroffenen
HTML-Tag 23
zentral im <HEAD> des
Dokumentes 23
Eigenschaft 22
float 30, 31
font-family 27
font-size 27
font-weight 27
Höhe eines Elements 28
Integration in HTML 23
Kombination von Selektoren
26
Layout 29
line-height 27
<LINK> 23
margin 29
negative Werte 29
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
padding 28
position 29
absolute 30
relative 29
Positionierung 29 siehe CSS: float
Selektor 22
Spezifität 24
HTML-Tag 25
ID 25
Klasse 25
Textformatierung 27
Vererbung 26
Wert 22
CSS: Cascading Style Sheets
22
CSS-Regeln definieren 22
CSS-Stilvorlagen definieren
79
D
Dateien per FTP im Internet
verschieben 50
Dateinamen (Bedingungen)
Leerschläge sind verboten
16
Dateinamen-Regeln 16
Dateispeicherort 19 siehe Speicherort
Dateispeicherorte 19
Design 66
DIV-Tag 38
Dokument korrekt abspeichern
16
Dokumenttyp-Deklaration
125
Domainname aktivieren 86
Domainnamen 84
Domainname registrieren 84
Fenster, neues
mit HTML öffnen 105
mit Javascript öffnen 128
Fette Schrift siehe <B>
Filezilla 138
Flash 81
float 31
Formatierung mit CSS 21
Fotos 60
Freistellungswerkzeug 58
FTP 49
Für Web speichern ... 60
G
Galerien 81
GIF 60
Grafik einfügen 39
grafische Formatierung 22
Grundraster 71
Grundtabelle 73, 74
H
Hausaufgabe vom 1. auf den
2. Kurstag 93
Homepage aktivieren 83
Hosting 83
Host-Suche 85
HREF 105, 106 siehe <A>
HTML 5 siehe HyperTextMarkupLanguage
HTML-Dokument 12
HTML-Kurz-referenz 103
http:// 104
Hyperlink siehe <A>; siehe Link
Hyperreference siehe HREF;
siehe Link
HyperTextMarkupLanguage 6
E
Editor 134
EMail-Link 105
Erste Schritte 34
F
Farbcodes 69
Farbkonzept 69
I
Inhalt zusammenstellen und
sortieren 66
Inline-CSS 23
Inline-Element 108, 109
Innenabstands 28 siehe CSS:
padding
141
14 Index
14 Index
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : :
J
Javascript 79, 81, 127
Javascript-Beispiel 127
JPEG/JPG 60
K
Klassen- oder Id-Attribute
zuweisen 41
Kombination und Vererbung
der CSS-Definitionen
26
Komprimierungsart 60
Photoshop 57
Bildausschnitte vornehmen
58
Bildgrösse verändern 62
Speichern fürs Web 60
PHP 80, 81
Pixelgenaue Position von
Objekten definieren siehe CSS: Positionierung
Planungsaspekte eine
Homepage 64
Positionierung mit CSS 29
Programmcode ändern 18
Provider 84
Providersuche 85
L
Layout 53
Layout-Instanzen 72
Layout mit CSS 29
Link
der in neuem Fenster erscheint 105
Email-Link 105
Link einfügen 39
linksbündig 119
Listen einfügen 40
Logos 60
Q
Qualität 60
Quelltext 14
R
Rahmen siehe CSS: border
Rand 29
rechtsbündig 119
Relative Adresse 18
RGB 69
M
S
Macintosh-Benutzer 3
margin 29
Metainformationen 116
MySQL 81
Schriftart 27, 38
Schriftgrösse 27
Schriftkonzept 70
Schriftsatz definieren 132
Schriftschnitt 27
Scrollbalken 128
Seiteneigenschaften 34
Selektor 22
SELFHTML 138
semantische Strukturierung
22
Sitemap 68
Sonderzeichen 131
Spaltenbreiten 57
SPAN 38
Stil, guter 9
SWITCH 84
N
Navigation 68
O
omega 55
onClick 129
optimierten Bild 60
Optionenleiste 58
P
padding 28
Parameter 129
142
:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: Webdesignkurshandbuch
T
Tabellen einfügen 40
Textabsatz 119
Textart 38
Textausrichtung 40
TextEdit 12
Texteditor 134
Textfluss 53
Textformatierung mit CSS 27
U
Übungen 89
Umlaute 16, 131
URL 104
V
Verbindung mit dem WebServer 50
W
Webapplikationen 81
Webfonts 42
Webserver 83
Webserver suchen und einrichten 83
Webshops 81
Werkzeugpalette 58
Windows-Benutzer 3
WYSIWYG 13
Arbeiten in der WYSIWYGAnsicht 36
WYSIWYG-Editor 33, 134
Z
Zeilenhöhe 27 siehe lineheight
Zeilenhöhen 57
Zeilenumbruch 108 siehe
auch <BR>
zentriert 119
143
14 Index
14 Index
Webdesignkurshandbuch :: :: :: :: :: :: :: :: :: :: :: :: :: 3kanal :: digitAll :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :
144
Document
Kategorie
Internet
Seitenansichten
271
Dateigröße
15 459 KB
Tags
1/--Seiten
melden