Tutorial 1 I DruckenI

Online-Spiele konzipieren und erstellen: Tutorial 2

Wenn deine Gruppe fertig ist mit dem Erstellen der Online-Spiele, dann geht es hier weiter mit der Gestaltung der Seite. Schiebt dazu die Disketten mit euren Wenseiten ins Diskettenlaufwerk.

Eure Online-Spiele werden später auf folgender Seite zu finden sein:

www.uni-mainz.de/~blasc005/11/index.htm

Schön wäre es, wenn ihr selbst eine Webseite gestaltet, d.h. mit eigenen Graphiken, die zum Text passen. Ich habe mal eine Vorlage erstellt: Hier klicken.

Vorab:
Die Gruppen sollten möglichst ausgewogen sein, d.h. diejenigen, die schon einmal mit dem Programm Dreamweaver oder einem anderen Html-Editor gearbeitet haben, sollen sich auf die einzelnen Gruppen verteilen.

Viel Spaß!! :o)

Einloggen
Benutzername test2 Kennwort test2

Dreamweaver starten
Programme – Macromedia – Dreamweaver
Option try anklicken. Nicht registrieren!

• Alle Bilder, Webseiten etc. auf Diskettenlaufwerk (A)
  speichern!

Im Menü unter Datei und Öffnen eure in der letzten Unterrichtsstunde erstellte Webseite auf Laufwerk A suchen. Die Datei hat die Endung .htm bzw. .html (diese Endung haben allen Webseiten!). Doppelklick (linke Maustaste) auf die betreffende Datei.

Speichert die Datei (Webseite) nun unter einem neuen Namen ab.

Dreamweaver: Grundfunktionen
Graphiken im Internet

1 Grafiken in Dreamweaver einfügen

Grafiken werden in Dreamweaver am einfachsten über das Menü Einfügen/Bild in Webseiten eingebaut. Man kann bequem seine Wunschgrafik auf der Festplatte anwqählen. Wer noch nicht genau weiß, für welches Bild er sich entscheiden soll, kann sich anhand der Bildvorschau orientieren.

• Die Bilder müssen zuvor im gleichen Verzeichnis bzw. Dateipfad wie die Webseite abgespeichert werden (oder in einem Unterordner!), also hier auf der Diskette (Laufwerk A).
• Wenn ihr Bilder aus dem Internet speichern möchtet, dann mit der Maus über das betreffende Bild fahren, linke Maustastedrücken und die Option „save picture as .. „ bzw. "Bild speichern" auswählen. In dem sich öffnenden Fenster das Pull-Down-Menü auf Laufwerk A einstellen und mit OK bestätigen.

Besuche folgende Webseite und wähle ein Bild "Paul Auster" aus.
Speichere es anschließend auf Diskette. Hier klicken!

• Zum Einfügen von einem Bild zunächst in der Menüleiste des Dreamweavers die Rubrik "Einfügen" per Mausklick auswählen. In dem sich öffnenden Menü nun "Bild" anklicken (siehe Screenshot). Ein neues Programmfenster öffnet sich:

Screenshot

• Dort das betreffende Bild im Verzeichnis A (Disketttenlaufwerk) suchen und durch das Anklicken marklieren. Anschließend den Button "Auswählen" drücken. Das Bild wird eingefügt:

2 Hintergrundbilder:

1. Speichert zunächst das Bild hintergrund.jpg auf Diskette:

hintergrund.jpg

1 Wählt unter dem Menüpunkt Modifizieren die Rubrik Seiteneigenschaften... aus

2 In dem sich öffnenden Fenster die Option Durchsuchen mit der Maus auswählen (1). Anschlußend unter Suchen in: das Laufwerk A auswählen (2). Das Bild hintergrund.jpg durch Doppelklick mit der linken Maustaste einfügen.

3 Weitere Seiteneigenschaften verändern 
Unter dem Menüpunkt Modifizieren / Rubrik Seiteneigenschaften lassen sich weiter Eigenschaften verändern:

• Seitentitel
• Hintergrundfarbe (wenn ein Hintergrundbild eingefügt ist, wird diese von dem Bild überdeckt)
• Seitenrand
• Einheitliche Textfarbe
• Einheitliche Farbe der Links

1 Ändere zunächst den Seitentitel (er erscheint im Browser (zum Beispiel wie hier im Internet Explorer) oben): Titel: (1). Gebe dazu ein Text deiner Wahl ein (zum Beispiel wie hier Mein Quiz).

2 Wähle passend zum Hintergrundbild eine einheitliche Textfarbe aus (der Text läßt sich dennoch nachträglich bunt gestalten!). Klicke dazu auf das farbige (schwarze) Kästchen hinter Text: (2). Wähle mit der Farbpipette in der sich öffnenden Farbpalette eine Farbe aus (Tipp: Du kannst mit der Farbpipette auch außerhalb der Palette eine Bildschirmfarbe auswählen. Ausprobieren!). Bestättige mit OK (3).

Die Farbpalette

Die Farbpalette für das Internet basiert auf dem RGB-Prinzip:
RGB-Konzept (Rot-Grün-Blau), Mischung per Wert von 00 (=keine Farbe), FF (= Maximum)

4 Eigenschaften eines Bildes in ändern

5 Texteingabe

Funktioniert ähnlich wie bei Microsoft-Word:

Wenn der Text ein anderes Aussehen bekommen soll, müßt ihr mit der Maus den Text markieren und im Eigenschaftsfenster die gewünschten Veränderungen vornehmen:

Wählt für eure Webseite die Schriftart "Courier New" aus. Größe: 2.

P.S.: Die Schriftart "Verdena" wurde eigens für die Darstellung im Internet entwickelt. Aber zu einem literarischen Text und zugehörigen Fragen passt "Courier New" ganz gut.

6 Text um eine Graphik fließen lassen: Graphiken ausrichten
Wenn man ein Bild hat und es so ausrichten will, dass der Text genau daneben steht, so wie es hier der fall ist, muss man einen kleinen Trick kennen.

Wählen Sie das Bild "auster" Bild aus (mit der Maus anklicken) und nehmen Sie im Eigenschaftenfenster folgende Änderung vor (siehe Bild):

Wenn ihr nun einen Text schreibt, so fließt dieser um das Bild:

Biography

Paul Auster was born in Newark, New Jersey, in 1947 to middle class parents. After attending Columbia University he lived in France for four years. Since returning to America in 1974, he has published poems, essays, novels and translations.

7 Erstellen einer Tabelle in Dreamweaver
Um in Dreamweaver eine Tabelle zu erstellen, gehen Sie in das "Einfügen-Menü", wählen Sie "Tabelle" aus. Im folgenden Dialogfenster stellen Sie die Anzahl der Zeilem auf "2" und die Anzahl der Spalten auf "3".

8 Hyperlinks setzen
Das wichtigste: Links sind Hyper!

• Auch URL = Uniform Resource Locator genannt
• Macht das WWW erst stark (und unübersichtlich)
• Verbindungen von einer Textstelle zu einer anderen
• Lernen wir verschiedene Links kennen und benutzen!
  

Links im ...

• gleichen Verzeichnis (nur Dateiname)<a href=“zweite.html“>klicktext</a> (relativer Link)
  anderen Verzeichnis = relativer Pfad: <a href=“gif/kneipe.gif“>klicktext</a> (relativer Link)
  
• anderer Server: <a href=“http://www.sni.com/products“> klicktext</a> (absoluter Link)
• Anker auf anderer Seite:<a href=„zweite.html#unten“>klicktext</a> (relativer Link)

Betrachte die Internetadresse hinter dem Tag <a href=". Wie unterscheiden sie sich?

1 Zuerst wird die Stelle markiert, von der aus verwiesen wird (kann Grafik oder Textstelle sein)
Bsp.: Im unteren Fensterteil (WYSIWYG) anklickbaren Text schreiben: „Homepage Herr Klün“ und mit der Maus markieren:

2 Im Eigenschaften-Fenster (siehe oben) im Feld Hyperlink den Text http://www.kluen.de einfügen.
3 Als Target (Ziel): _blank (Webseite öffnet sich in einem neuen Browserfenster) oder _self (Webseite öffnet sich im gleichen Browserfenster) auswählen.

Erstellt einen Link zu dieser Webseite:

http://www.paulauster.co.uk/biography.htm

Anhang

Dateinamen für Webseiten

• Alles kleinschreiben!
• Verboten sind:
  - Umlaute: also NIE: übung.htm anlegen.
  - Leerzeichen: also NIE: meine homepage.htm
  - Scharfes S: ß: also NIE:
• Dateiendung immer: .html
  

Ein ausführliches Skript zum Thema Webseiten gestalten im Power-Point-Format, basierend auf dem Programm Dreamweaver, findet ihr hier.

Eine Webseite ins Internet stellen
Zunächst benötigt man Speicherplatz auf einem sogenannten Webserver. Diesen muss man beantragen und erhält dann einen Benutzernamen und ein Kennwort. Es gibt kostenlose Anbieter von Speichplatz auf Webservern, aber man muss dann auf seinen Webseiten Werbung zulassen. Ansonsten muss man zahlen :o)

Um Dateien ins Internet zu stellen, benötigt man ein sogenanntes FTP-Programm (ein solches ist zwar in Dreamweaver integriert, ich empfehle aber ein externes Programm zu verwenden). Kostenlose FTP-Programm, die auf dem Rechner instaliert werden müssen, sind zum Beispiel WS_FTP oder LeechFTP.

Tutorial: Webseiten mit WS_FTP ins Internet stellen

Anleitung:

1 Zunächst muß man das FTP-Programm einrichten. Wichtig sind Host-Adresse des WWW-Servers (beginnt statt mit http://www. mit ftp) sowie eigener Benutzname (User ID) und Passwort (Password).

Beispiel WS_FTP: Folgende Einstellungen müssen vorgenommen werden

General - Profile Name: WWW-Server
Host Name/Address: zum Beispiel ftp.zdv.uni-mainz.de
Host Type: Automatic detect
User ID: Ihr Accountname
Password: ******** (das zugehörige Passwort)

Hat man das FTP-Programm eingerichtet und eine Verbindung mit dem Server hergestellt, so erscheinen zwei Fenster. Ein Fenster zeigt die Dateien auf dem eigenen Rechner (linkes Fenster), ein anderes die Dateien auf dem Server (rechtes Fenster). Beispiel (hier WS-FTP):

Nun kann man eiunfach die Dateien, die vom eigenen Rechner aus ins Internet gestellt werden sollen, mit der Maus anklicken und vom rechten Fenster in das linke Fenster ziehen. Automatisch werden sie auf den WWW-Server kopiert.

Clickable Map bzw. Image Map

1. Auf das eingebundene Bild klicken
2. Map-Bearbeitungswerkzeug verwenden im Eigenschaftenfenster
3. Form aus dem Werkzeug auswählen
4. Form in das Bild einzeichnen.
5. Link für den Bereich setzen