Remote Site / (remote) Server

Transkript

1 Internetseiten erstellen Eine Möglichkeit ist, auf dem eigenen Computer die Seiten zu erstellen, die man ins Internet einstellen möchte und die dann auf den sogenannten (remote) Server hochzuladen. Remote Site / (remote) Server Dateien auf Server laden anschauen Ein Server ist ein Computer, auf dem die Daten liegen und der unter der Adresse z. B. erreichbar ist. Wir haben zur Zeit keinen Server zur Verfügung, müssen also auf das Hochladen verzichten. Trotzdem können wir unsere Seiten auf unseren Computern anschauen. Dreamweaver einrichten Menü: Site neue Site auswählen Im nächsten Dialog: Nein, keine Servertechnologie verwenden auswählen

2 Vorschlag für Speicherort korrigieren in H:\gy_7a\ (ein \ streichen) und dann weiter. Es wird ein Ordner in Eigene Dateien angelegt. Startseite erstellen Eine html-datei anlegen Menü: Neu erstellen HTML auswählen Jede Internetseite braucht eine Seite, die vom Server als erstes aufgerufen wird. Als Standardname ist dies index.htm, index.html, index.php usw. Deshalb nennen wir unsere erste Seite dann auch so. Menü Datei speichern auswählen und Dateiname index.html vergeben.

3 Überschrift erstellen, z. B. Meine erste Internetseite und einen kleinen Text dazu. Dann den Text: Das ist ein erster Link auf eine Internetseite, die ich gerne besuche.

4 Im Menüfenster von Dreamweaver gibt es unten das Fenster Eigenschaften. Dort findet man verschiedene schnelle Einstellmöglichkeiten für die Formatierung. Wir wählen die Überschrift im Textfenster aus (einmal anklicken) und vergeben im Formatmenü Überschrift 1. Dann markierst du den Textteil wie unten und gehst mit der Maus auf das Kettensymbol oben links (Hyperlink). Im nächsten Fenster steht im Teil Text schon der oben markierte Text. Im Eingabefeld Hyperlink kommt die Internetadresse rein, wobei du auf vorneweg achten musst und nicht bloß eintragen darfst. Die Datei musst du dann einmal speichern. Browservorschau Du kannst nun deine Seite in der Vorschau im Browser betrachten, wenn du die Weltkugel anklickst und dann einen Browser auswählst (oder F12 tippen):

5 Bilder für Internetseiten Ein Bild von einer Kamera braucht viel Speicherplatz (mehrere MB) und hat Druckqualität. Damit Internetseiten schnell geladen werden können, dürfen die Bilder aber nicht zu groß sein (max kb). Man muss Bilder also verkleinern, wenn man sie ins Internet stellen will. Das ist auch möglich, weil man dafür keine hohe Qualität braucht. Du findest im Tauschordner einen Ordner Bildervorlagen. Kopiere ihn in dein ITG-Verzeichnis in Eigene Dateien. Öffne dann das Programm Fireworks. Man kann auch beliebige andere Bildbearbeitungsprogramme nehmen z. B. Irfan View oder Gimp. Dann öffnest du ein Probebild über das Menü Datei öffnen. Navigiere dann zum Ordner Bildervorlagen und öffne eines der Bilder (hier: img_1045.jpg). Wir schneiden das Bild zunächst zu, weil wir den Ausschnitt mit dem Mond und der Venus allein haben wollen. Dazu wählst du rechts oben das Symbol Zuschneiden.

6 Dateien vom letzten Mal dort reinkopieren. Bei gedrückter linker Maustaste kann man dann über Mond und Venus ein Rechteck aufziehen. Wenn man dann die Enter-Taste auswählt, schneidet das Programm diesen Teil aus. Damit wir das Originalbild weiter behalten können, wählen wir nun gleich Datei - Speichern unter und speichern das ausgeschnittene Bild unter einem anderen Namen.

7 Nun haben wir das Originalbild (gute Auflösung, viel Speicherplatz) und müssen es noch verkleinern und in die Internetseite einbauen. Zum Verkleinern wählen wir nun Datei Bildvorschau Dann kommen wir ins Fenster Bildvorschau und wählen dort den Menüreiter Datei. Dort sieht man die Bildgröße Breite und Höhe (in diesem Fall B: 816 Pixel und H: 762 Pixel). Daneben findet sich ein Schloss, das Breite und Höhe verbindet. Das heißt, dass sich beim Ändern der Breite die Höhe so ändert, dass das Bild nicht verzerrt wird.

8 Wir ändern die Bildbreite auf 500 Pixel und klicken dann auf die Schaltfläche Exportieren. Wir ändern die Bildbreite auf 500 Pixel und klicken dann auf die Schaltfläche Exportieren. Dieses exportierte Bild soll nun in den Ordner unserer Internetseite in einen neu angelegten Ordner bilder. Wir navigieren also in diesen Ordner gy_7a in Eigene Dateien und klicken dann auf das Neuen Ordner erstellen Symbol rechts oben.

9 Wir benennen den Ordner in bilder und klicken dann auf die Schaltfläche Öffnen. Dann klickt man auf die Schaltfläche Speichern und das Bild wird dort drin gespeichert. Einbinden des Bildes in die Internetseite Wir wechseln nun in das Programmfenster von Adobe Fireworks. Dort wählen wir das Symbol mit dem Baum.

10 Dort navigieren wir in den Ordner bilder und wählen das soeben bearbeitete Bild aus. Dann klicken wir die Schaltfläche OK Dann kann man noch einen Alternativtext auswählen (Fenster: Attribute für Image-Tag), der erscheint, wenn das Bild nicht geladen werden kann (Hier: Mond und Venus). Man kann dieses Menü auch überspringen und gleich OK wählen. Nun kann man über F12 oder über das Weltsymbol wieder die Browservorschau anklicken. Weitere Dateien erstellen und mit der Startseite verlinken Eine weitere Datei erstellen wir über Datei neu und wählen dann wieder den Typ leere Seite - HTML aus. Wer mag, kann auch eine Layoutvorlage auswählen z. B. 2 Spalten elastisch, linke Randleiste.

11 Dann speicherst du die Seite unter einem dir aussagekräftigen Namen z. B. hobbies.html o. ä. Beachte bei der Namensgebung von Dateien Im Internet darf man für Dateinamen keine Leerzeichen oder Umlaute (ö, ä, ü) oder ß verwenden. Hier heißt sie nun seite2.html. Dann sieht man die neue Datei mit Kopf- und Fußzeile sowie zwei Spalten, die jeweils einen Probetext enthalen. Du kannst ihn löschen und eigene Texte eintragen, z. B. statt Kopfzeile: Meine zweite Zeile. In der Ansicht von Dreamweaver siehst du nun die beiden Reiter für beide geöffneten Dateien. Zwei Reiter für beide Dateien. Um beide Seiten miteinander zu verlinken, musst du in beiden einen Link einfügen, der zur jeweils anderen Seite zeigt. Das macht man wie oben schon beschrieben: 1. Text Startseite eintragen 2. Startseite markieren a. Entweder: Kettensymbol auswählen und im Feld Hyperlink den gelben Ordner anklicken. Dort kann man dann index.html auswählen.

12 b. Oder (s. u.): Im Eigenschaftsfenster neben dem Eingabefeld Hyperlink (rechts unten) den Kreis mit der linken Maustaste anklicken und bei gedrückter Maustaste auf die Datei index.html zeigen. Nun wechselst du in das Fenster der Datei index.html und machst dasselbe. 1. Text Seite 2 eintragen 2. Text markieren 3. Mit der Maus seite2.html auswählen Nun musst du noch beide Dateien speichern (Menü: Datei Alles speichern). In der Browservorschau kann man nun zwischen den Dateien hin und her klicken. Aufgaben 1. Füge in die zweite Seite ein weiteres Bild aus dem bildervorlagenordner ein. Wiederhole die Schritte wie oben beschrieben. 2. Erstelle mindestens eine weitere neue Seite für andere Bilder (du kannst die bestehende Seite2 auch durch Datei Speichern unter unter anderem Namen speichern und dann den Text und die Bilder anpassen. Binde jeweils ein Bild in eine Seite ein und verlinke alle Seiten untereinander. 3. Den Rest der Zeit kannst du noch mit dem Tipptrainer üben.