Upload
tudor
View
39
Download
0
Embed Size (px)
DESCRIPTION
Workshop: Websites erstellen Mit dem WYSIWYG-Editor NVU von Mozilla. Textformatierung. HTML bietet wenige Möglichkeiten zur Formatierung von Texten. So fehlen beispielsweise Tabulatoren, Texteinzüge und Formatvorlagen. - PowerPoint PPT Presentation
Citation preview
1 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Workshop: Websites erstellenMit dem WYSIWYG-Editor NVU von Mozilla
2 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Textformatierung
• HTML bietet wenige Möglichkeiten zur Formatierung von Texten. So fehlen beispielsweise Tabulatoren, Texteinzüge und Formatvorlagen.
• Zum Layouten dienen vor allem unsichtbare Tabellen oder unsichtbare („blinde“) Grafiken.
• Zur Gestaltung wurden die CSS (Cascading Style Sheets) entwickelt. Diese erweitern HTML und bieten zahllose Möglichkeiten zur Formatierung und Gestaltung von Webseiten.
3 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Textformatierung
HTML/CSS Beispiel NVU
Überschriften <h1> ... </h1>...<h3> ... </h3>
Überschrift
Überschrift
Format > Absatz > Überschrift 1Format > Absatz > Überschrift 3
Zeilenumbruch <br> Hier steht Textund hier auch.
Format > Absatz > Normaler Text
Absatz <p> ... </p> Erster Absatz.
Zweiter Absatz.
Format > Absatz > Absatz
Liste, ungeordnet
<ul><li> ... </li><li> ... </li><lul>
• Eins• Zwei• Drei
Format > Liste > ungeordnet
Liste, nummeriert
<ol><li> ... </li>
<li> ... </li><lol>
1. Eins2. Zwei
3. Drei
Format > Liste > nummeriert
4 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Textformatierung
HTML/CSS Beispiel NVU
Schriftart font-family TimesArial
Format > Schriftart
Schriftgrad font-size klein
groß Format > Schriftgrad
Schriftschnitt font-style fettkursiv
Format > Schriftschnitt
Textfarbe color RotBlau
Format > Textfarbe
Textausrichtung text-align LinksbündigMittig
Rechtsbündig
Format > Ausrichten > ...
Linker Texteinzug
margin-left Weiter innen.Normal.
Format > Einzug vergrößern
5 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Workshop: Textformatierung
6 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Tabellen
• HTML bietet keine Möglichkeiten zum Layouten von Webseiten!
• Trick: Zum Layouten werden vor allem unsichtbare Tabellen benutzt. Es handelt sich dabei um Tabellen ohne sichtbare Rahmen.
• Die Tabellenzellen bilden ein Gestaltungsraster. Sie können mit Texten oder Grafiken „gefüllt“ werden.
Merke:Tabellenzellen verändern ihre Größe in Abhängigkeit vom Text. Damit dies nicht geschieht müssen sie mit einer festen Breite und Höhe versehen werden!
7 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Tabellen
HTML/CSS Beispiel NVU
Tabelle einfügen <table> <tr> <td> ... </td><td> ... </td>
</tr> <tr>
<td> ... </td><td> ... </td> </tr>
</table>
Tabelle > Einfügen > Tabelle...
Zellen verbinden colspan = ...rowspan = ...
Zellen mit Maus auswählenTabelle > Gewählte Zellen verbinden
Tabelle ohne
sichtbare Linien
border = "0“ Tabelle > Tabelleneigenschaften...
> „Tabelle“: Rand auf 0 setzen
8 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Tabellen
HTML/CSS Beispiel NVU
Breite und Höhe festlegen
width = ...height = ...
Zeile/Spalte/Zelle markierenTabelle > Tabelleneigenschaften... > Breite/Höhe eingebenoder
Zeilen/Spalten mit der Maus durch Ziehen der grauen Balken zwischen
Zahlen verändern
Horizontale oder
vertikale Text-ausrichtung
align =
valign =
Tabelle > Tabelleneigenschaften...
> „Zellen“: Inhalt ausrichten
Tabellen- oder Zellenfarbe
background-color:
Tabelle > Tabelleneigenschaften...> „Tabelle“: Hintergrundfarbeoder
> „Zellen“: Hintergrundfarbe
links rechts
unten
oben
9 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Workshop: Tabellen
10 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Bilder/Grafiken
• HTML kann keine Bilddaten einbinden, wie dies z.B. bei Word möglich ist. Alle Bilder/Grafiken müssen als Dateien vorhanden sein.
• Zur Anzeige eines Bildes muss in der HTML-Datei der relative Pfad zur Bild-Datei angegeben werden: Das Bild wird „referenziert“.
• Bilder/Grafiken müssen einen Kompromiss zwischen Qualität und Datenmenge darstellen.
Merke:Speichern Sie alle Bilder und Grafiken in einem Bilder-Ordner. Die Position des Ordners relativ zur HTML-Datei darf nachträglich nicht mehr geändert werden!
11 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Bilder/Grafiken
HTML/CSS Beispiel NVU
Bild/Grafik referenzieren
<img src = ...> Einfügen > Grafik... > Adresse > Bild-Datei auswählen
Alternativ-Text angeben
(barrierefreies Web-Design!)
alt = ... Miriam Einfügen > Grafik... > Alternativtext
Bildbreite und Bildhöhe
width = ...height = ...
Bild anklickenFormat > Grafik-Eigenschaften >
Dimensionen > Benutzerdef. Größe + Proportional
12 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Workshop: Bilder und Grafiken
13 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Hyperlinks
• Durch Hyperlinks (kurz: Links) lassen sich HTML-Dateien in beliebiger Weise miteinander verknüpfen. Dies ist ein wesentlicher Vorteil gegenüber gedruckten Produkten!
• Es gibt unterschiedliche Arten von Links:- innerhalb einer HTML-Datei- zwischen HTML-Dateien- zu externen Webseiten- zu anderen Dateien z.B. PDF, DOC- zu E-Mail-Programmen
Merke:Verändern Sie die Position der HTML-Dateien nach der Verlinkung nicht mehr!
14 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Hyperlinks
HTML/CSS Beispiel NVU
Textlink <a href
= ...> ... </a>
Lesen Sie mehr. Text markieren
Einfügen > Link ... > Datei auswählen, die verlinkt werden soll
Grafik als Link <a href = ... > <img src = ...
></a>
Bild anklickenFormat > Grafik-Eigenschaften >
Link > Datei auswählen
Link zu externer URL
<a href = ...> Text </a>
Lesen Sie mehr bei schlaich.info
Text markierenEinfügen > Link ... > URL eingeben, z.B. http://www.schlaich.info
E-Mail-Link <a href = mailto: ...> ... </a>
Schreiben Sie mir:[email protected]
Text markierenEinfügen > Link ... > E-Mail-Link eingeben: mailto:mailadresse
z.B. mailto:[email protected]
15 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Hyperlinks
HTML/CSS Beispiel NVU
Download von Dateien
<a href = ...> ... </a>
Download des Textes: text.pdf
Text markierenEinfügen > Link ... > Datei auswählen, die zum Download bereitgestellt wird
Links innerhalb einer Datei
Sprungziel:<a name = ...
>
Link zu Sprung-ziel:<a href =
# ...> ... </a>
Lesen Sie unten!...
...
...
...
...
...
...Hier geht es weiter...
Schritt 1:•Cursor an Stelle platzieren, zu der
verlinkt werden soll•Einfügen > Benanntes Ziel > Name eingeben
Schritt 2:•Text markieren, der als Link dient•Einfügen > Link ... > Sprungziel aus Popliste wählen (#...)
16 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Workshop: Hyperlinks
17 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Seiteneinstellungen
• Der Titel einer Seite erscheint im blauen Balken des Browserfensters.
• Meta-Tags sind unsichtbare Informationen über die Seite, z.B. Autor, Datum, Kurzbeschreibung, Stichworte
• Die Angabe des Zeichensatzes ist wichtig, damit die Site weltweit korrekt angezeigt wird.
• Festlegung der Farben für Text, Links und den Hintergrund. Alternativ kann auch ein Hintergrundbild verwendet werden.
18 / 18
© 2
00
5
Sch
laic
h
Web
seit
en e
rste
llen
Erstellung und Nutzung einer Website für den UnterrichtLehrerfortbildung vom 10.01. bis 12.01.2005 an der Landesakademie Esslingen
Seiteneinstellungen
HTML/CSS Beispiel NVU
Seitentitel <title> ... </title>
Format > Seitentitel und -einstellungen
Meta-Tags:- Autor- Beschreibung
author=description=
Nicht sichtbar! Format > Seitentitel und -einstellungen > Autor bzw. Beschreibung
Zeichensatz charset= Nicht sichtbar! Format > Seitentitel und
-einstellungen > Zeichensatz
Farben:- Text- Links
- Hintergrund
color:link:background-
color:
Format > Seitenfarben und -hintergrund > Eigene Farben verwenden
Hintergrundbild background-image:
Format > Seitenfarben und -hintergrund > Hintergrundbild
Normaler Text und Link