Workshop: Websites erstellen Mit dem WYSIWYG-Editor NVU von Mozilla

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


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


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


Textformatierung


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


Workshop: Textformatierung

6 / 18

© 2

00

5

Sch

laic

h

Web

seit

en e

rste

llen


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


Tabellen


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


Tabellen


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


Workshop: Tabellen

10 / 18

© 2

00

5

Sch

laic

h

Web

seit

en e

rste

llen


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


Bilder/Grafiken


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


Workshop: Bilder und Grafiken

13 / 18

© 2

00

5

Sch

laic

h

Web

seit

en e

rste

llen


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


Hyperlinks


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


Hyperlinks


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


Workshop: Hyperlinks

17 / 18

© 2

00

5

Sch

laic

h

Web

seit

en e

rste

llen


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


Seiteneinstellungen


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

Documents

Workshop: Websites erstellen Mit dem WYSIWYG-Editor NVU von Mozilla