Kurs_InfoKursInfo
Zur AnmeldungAnmeldung

Frontpage - Probe-Lektion

 
  1. Text- und Absatzformatierungen
  2. Laufschriften
  3. Bilder einbinden
  4. Hyperlinks auf Bilder setzen
  5. Bilder bearbeiten
  6. Hotspots

1. Text- und Absatzformatierungen


Der Text ist gekürzt, im Original vorhanden.

Markieren Sie die entsprechende Textpassage, die Sie bearbeiten möchten und rufen Sie den Menüpunkt Format, Zeichen auf. Alternativ können Sie auch mit einem Rechtsklick in die Markierung das entsprechende Kontextmenü aufrufen.

Dort können Sie (wie Sie es möglicherweise von Word gewohnt sind) beispielsweise die Schriftart und -größe einstellen, können die Textfarbe verändern und besondere Effekte einstellen.

ACHTUNG: Der Effekt blinkend kann nur beim Netscape Navigator angezeigt werden, nicht jedoch beim Internet Explorer!

Viele der Formatierungen können Sie auch über die Symbolleiste Formatierung erreichen:

image007.gif 77x25   sind die Symbole für Fettdruck, Kursivdruck und Unterstreichung

sind die Symbole für Hintergrundfarbe und Schriftfarbe. Wenn Sie auf das kleine Dreieck neben dem Symbol klicken, erhalten Sie eine Farbpalette, aus der Sie die gewünschte Farbe wählen können.

Absätze formatieren

Stellen Sie den Cursor in den Absatz, den Sie formatieren möchten. Wählen Sie den Menüpunkt Format, Absatz. Hier können Sie zwischen den Ausrichtungen links- und rechtsbündig wählen, sowie zentriert und Blocksatz. Darüber hinaus kann man hier den rechten und linken Einzug vergrößern bzw. verkleinern, den Abstand vor und nach einem Absatz festlegen und den Zeilenabstand bestimmen.

Auch in diesem Fall gibt es zur Vereinfachung Symbole in der Formatleiste, die mit einem schnellen Klick das gleiche bewirken:

sind die Symbole für linksbündige, zentrierte und rechtsbündige Ausrichtung

*verkleinern bzw. vergrößern den linken Einzug. Mit jedem weiteren Klick auf das entsprechende Symbol wird der Einzug weiter vergrößert bzw. verkleinert.

Sie können Absätze auch rahmen: Wählen Sie Format, Rahmen und Schattierung und klicken Sie auf Kasten. Im gleichen Register können Sie auch die Farbe des Rahmens, die Linienart und –stärke sowie die Abstände vom Text bestimmen. Wenn Sie dem Rahmen noch eine Farbe als Hintergrund zuweisen möchten, wechseln Sie im gleichen Dialogfenster auf das Register Schattierung. Dort können Sie sowohl eine Hintergrundfarbe, als auch die Vordergrundfarbe, d.h. die Farbe des Textes festlegen. (Ein Hintergrundbild einzufügen macht an dieser Stelle keinen Sinn, da unsere Absätze zu klein sind. Wir werden zu einem späteren Zeitpunkt auf die Hintergrundbilder eingehen!)

Und nun eine kleine Aufgabe zu diesem Bereich: Formatieren Sie den Text, den Sie eingegeben haben, wie folgt:

Die Überschrift wurde zentriert, fett und größer eingestellt.

Beim ersten Absatz wurde nur die erste Zeile eingezogen.

Das Wort Vorstandsmitglieder wurde durch Fettdruck und Kursivschrift hervorgehoben, das Wort Rhein hat einen farbigen Hintergrund erhalten.

Der nächste Absatz wurde insgesamt eingerückt, der Zeilenabstand auf 1,5 Zeilen gestellt.

Der letzte Absatz wurde zentriert, mit einem farbigen Rahmen und Hintergrund versehen, die Schrift wurde ebenfalls farbig eingestellt und der Rahmen selbst wurde links und rechts eingerückt.

Speichern Sie zum Abschluss Ihre Seite Geschichte.htm und schließen Sie sie.



2. Laufschriften erstellen


Öffnen Sie erneut Ihre Homepage (index.htm). Markieren Sie dort Ihre Überschrift und wählen den Menüpunkt Einfügen, Komponente, Laufschrift. Wenn Sie zuvor nichts markiert haben, können Sie auch an dieser Stelle Ihren gewünschten Laufschrifttext eingeben.

In diesem Dialogfenster bestimmen Sie noch:

Ø      welche Laufrichtung der Text nehmen soll. Zur Auswahl stehen natürlich links und rechts

Ø      wie schnell der Text durch Ihr Laufband wandern soll. Verzögerung legt fest wann eine erneute Bewegung der Laufschrift erfolgen soll, Betrag legt fest, um wie viel Pixel der Text sich nach links bzw. rechts verschiebt. (Hier hilft nur experimentieren!)

Ø      das Verhalten. Es bestimmt, ob der Text auf der einen Seite in das Laufband ein- und an der anderen Seite wieder hinauslaufen soll (=Umlaufen) oder ob sich der Text im Laufband hin und her bewegen soll (=Oszillieren) oder ob der Text nur einmal einläuft und danach im Laufband stehen bleiben soll (=Einschieben)

Ø      die Breite, Höhe und Farbe des Laufbandes. Legen Sie beispielsweise die Breite auf 75% und die Höhe auf 50 Pixel fest und zentrieren Sie danach die Laufschrift.

Ø      ob der Text kontinuierlich das gewählte Verhalten beibehält oder ob er dieses Verhalten x mal wiederholt und danach auf dem Bildschirm stehen bleibt

Wenn Sie die gewünschten Einstellungen vorgenommen haben, bestätigen Sie mit OK und wechseln ins Vorschau-Fenster.  Nur dort können Sie die Laufschrift sehen, in der Normalansicht sehen Sie das Laufband nur statisch.

Möchten Sie die Einstellungen im nachhinein verändern, klicken Sie in der Normalansicht doppelt auf die Laufschrift – dadurch öffnet sich das entsprechende Dialogfenster erneut. Wenn Sie die Schriftattribute ändern möchten, genügt es dass die Laufschrift markiert ist. Es stehen Ihnen alle Zeichenformatierungen zur Verfügung. Möchten Sie die Breite oder Höhe des Laufbandes verändern, können Sie auch an den Anfasserpunkten ziehen.

ACHTUNG: Ausschließlich der Internet Explorer kann die Laufschrift auch tatsächlich anzeigen! Der Netscape Navigator und andere Browser übernehmen zwar alle Formatierungen, nicht aber die Bewegung!!!



3. Bilder einbinden


Legen Sie eine neue Seite an und nennen Sie sie Katalog.htm. Wir wollen hier einige Bilder einbinden, die unsere Fanartikel für unseren Strandverein vorstellen.

Wählen Sie den Menüpunkt Einfügen, Bild, Clipart und suchen Sie sich ein Bild Ihrer Wahl aus. Fügen Sie es ein. Markieren Sie das Bild, indem Sie es einmal anklicken und fassen Sie es an einem Eckpunkt an (Anfasserpunkte). Ziehen Sie es bei gedrückter Maustaste auf die gewünschte Größe. Wählen Sie danach durch Rechtsklick auf die Grafik im Kontextmenü Bildeigenschaften und wechseln Sie ins Register Erscheinungsbild. Dort können Sie folgende wichtige Einstellungen vornehmen:

Ausrichtung:

Wenn Sie hier links (rechts) wählen, bedeutet das, dass das Bild links (rechts) steht und der Text den gesamten Platz rechts (links) daneben ausfüllt.

Wenn Sie TextOben (Mitte) wählen, bedeutet das, dass eine Zeile des Textes rechts am oberen Rand (rechts in der Mitte) des Bildes steht und der Rest unterhalb des Bildes fortgesetzt wird.

Probieren Sie einfach die verschiedenen Einstellungen einmal durch


Dicke der Rahmenlinie:

Rahmenlinie=0 bedeutet, dass das Bild ohne Umrahmung angezeigt wird

Horizontalabstand:

Ist der horizontale Abstand zwischen Bild und Text

Vertikalabstand:

Ist der vertikale Abstand zwischen Bild und Text

Es ist in diesem Register auch möglich, eine genaue Größe für das Bild einzugeben. Dies ist vor allem wichtig, wenn Sie mehrere Bilder auf einer Seite in einer bestimmten Größe darstellen möchten. (Achtung: Verzerrung der Bilder!). Wenn Sie das Bild nicht verzerren möchten, muss gleichzeitig das Kontrollfeld Seitenverhältnis beibehalten aktiviert sein.

Versuchen Sie nun einmal folgendes Erscheinungsbild in Ihrer Seite katalog.htm zu erzeugen:

Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser.


image008.gif 145x113 Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser. Dies ist unser beliebtes Liederheft mit vielen lustigen Liedern zu Sommer, Strand und Wasser.




4. Hyperlinks auf Bilder setzen


Sie können auf Bilder auch einen Hyperlink setzen. Markieren Sie zunächst ein Bild auf Ihrer Seite und wählen Sie im Kontextmenü Hyperlink. Wir setzen den Hyperlink auf eine neue Seite, d.h. wählen Sie im Dialogfenster den rechten Button für Hyperlink auf neuer Seite erstellen. Speichern Sie diese Seite unter dem Namen Bestellformular.htm ab und ändern Sie auch gleich den Titel auf Bestellformular. (Wir werden dieses Bestellformular in einer späteren Lektion erstellen.). Überprüfen Sie, ob der Hyperlink funktioniert.



5. Bilder bearbeiten


Frontpage stellt ein weiteres Werkzeug zur Verfügung, um Bilder zu bearbeiten, den Microsoft Image Composer. Sie können sich mit dem Image Composer z.B. sehr schöne kleine Schaltflächen selbst basteln. Um einen kurzen Einblick in dieses Hilfsprogramm zu bekommen, bauen wir uns eine kleine „Home-Schaltfläche“.

Fügen Sie ein Bild aus den Clipart ein, auf dem ein Haus zu sehen ist oder wenn Sie nichts passendes finden, eine einfache leere Webschaltfläche. Klicken Sie doppelt auf dieses eingefügte Bild – der Image Composer öffnet sich automatisch. (Sollte er das nicht tun, speichern Sie Ihre Seite noch einmal ab.)

Wir bestimmen zunächst die Größe unserer Schaltfläche, in dem wir den Menüpunkt Datei Komposition einrichten wählen. Legen Sie hier die genaue Breite und Höhe fest und bestätigen Sie mit OK. Auf dem Bildschirm ist nun eine Art Schablone festgelegt. Achten Sie auf die Hilfslinien – wenn Ihre angegebene Größe kleiner ist als das Originalbild, können Sie die Schablone nicht direkt sehen, weil sie hinter dem Bild versteckt ist. Sie müssen nun Ihr Bild mit Hilfe der Anfasserpunkte genau in diese Schablone ziehen, d.h. in der Regel verkleinern. Die angezeigten Hilfslinien können Ihnen dabei helfen.

Ihre neue Schaltfläche soll auch beschriftet werden. Aktivieren Sie am linken Bildschirmrand in der Toolbox das Textsymbol image010.gif 25x23  indem Sie es anklicken. Ihr Mauszeiger verändert sich zu einem Fadenkreuz, das Sie auf Ihrem Bild aufziehen. Dadurch entsteht ein Textfeld, in das Sie nun HOME schreiben. Sie können in der Text-Symbolleiste den Schriftgrad oder die Farbe der Schrift bestimmen. Wenn Sie fertig sind, klicken Sie einfach einmal außerhalb des Textfeldes. Es wird automatisch in der Größe an den Text angepasst. Verschieben Sie das Textfeld zum Schluss genau an die Stelle Ihres Bildes, wo es stehen soll. Hierfür bewegen Sie den Mauszeiger über das Textfeld bis er sich in ein Kreuz verwandelt, halten dann die Maustaste gedrückt, verschieben bis zur richtigen Stelle und lassen dann los.

Wichtig zum Abschluss ist die Speicherung dieser neuen Schaltfläche. Alle Bilder, die Sie im Image Composer bearbeiten und die Sie in Ihrer Web-Site benutzen möchten, müssen Sie zweifach speichern – einmal als Dateityp mic und einmal als Dateityp gif. Das gif-Format ist für ihre Web-Site, die Schaltfläche kann als solche nicht mehr geändert werden. Das mic-Format speichert die einzelnen Komponenten der Schaltfläche (Der Image Composer nennt sie Kobolde!), die dann im nachhinein auch noch geändert oder angepasst werden können.

Das heißt für Sie: Wählen Sie den Menüpunkt Datei, Speichern unter. Vergeben Sie den Namen home und wählen Sie als Dateityp gif. Machen Sie das gleiche noch mal, also Datei, Speichern unter. Vergeben Sie wieder den Namen home und wählen dieses mal den Dateityp mic. Schließen Sie den Microsoft Image Composer, dadurch befinden Sie sich wieder im Frontpage Editor. In Ihrer Ordnerliste tauchen nun home.gif und home.mic auf (wenn nicht müssen Sie Ihre Ansicht aktualisieren, indem Sie die Funktionstaste F5 drücken!). An Ihrem Bild hat sich aber rein gar nichts verändert.

Markieren Sie Ihre alte Schaltfläche und löschen Sie sie mit Entf. An der gleichen Stelle binden Sie Ihre neue Schaltfläche jetzt ein: Einfügen, Bild, aus Datei. Suchen Sie aus der Dateiliste Ihre home.gif und bestätigen Sie mit OK.

Legen Sie zum Schluss auf Ihre Schaltfläche einen Hyperlink zur index.htm und Ihre Schaltfläche ist perfekt.

6. Hotspots


Will man auf ein Bild bzw. ein Foto verschiedene Links legen, die zu unterschiedlichen Seiten verweisen, setzt man Hotspots. Beispielsweise könnten Sie ein Foto Ihrer Familie in die Website einbauen, und je nachdem welche Person man auf dem Foto anklickt geht die entsprechende Seite mit den Informationen zum Familienmitglied auf.

Wir werden das jetzt auf der Seite Vorstand.htm versuchen. Öffnen Sie die Seite und fügen Sie dort ein Bild ein, dass verschiedene Personen zeigt (Einfügen, Bild, Clipart, dort z.B. bei Menschen).

image011.png 313x242

Wenn man nun auf die Gesichter klickt, sollen die entsprechenden Seiten aufgehen: susi_sand.htm, michel_meer.htm und fritz_fröhlich.htm (noch anzulegen!).

Sie müssen zunächst die Grafikleiste aktivieren, sofern sie nicht am unteren Bildschirmrand zu sehen ist: Ansicht, Symbolleiste, Grafik. Markieren Sie die Grafik, damit die Buttons der Grafikleiste aktiviert sind.

Klicken Sie in der Leiste einen Button für Hotspots an: image013.gif 73x24  Es stehen ein rechteckiger und ein runder Hotspot sowie ein Polygon zur Verfügung. Wenn Sie danach den Mauszeiger auf die Grafik bewegen, ändert er sich zum Bleistift. Haben Sie den rechteckigen Hotspot ausgewählt, ziehen Sie das Rechteck am besten von links oben nach rechts unten auf. Haben Sie den runden Hotspot gewählt, ziehen Sie den Kreis vom Kreismittelpunkt nach außen hin auf. Beim Polygon, also Vieleck, klicken Sie bei jedem Wendepunkt – haben Sie den Ausgangspunkt wieder erreicht, schließen Sie mit einem Doppelklick ab.

In jedem Fall geht das Ihnen bekannte Dialogfenster für die Hyperlinks auf. Wählen Sie aus der Dateienliste die Datei, zu der der Hotspot führen soll. Probieren Sie die drei unterschiedlichen Hotspots an den drei Gesichtern einfach aus.

image014.png 322x250

Schauen Sie nach, ob die Links zu den richtigen Seiten führen.

Der Text ist gekürzt, im Original vorhanden.

© Sylvia Zürker. Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung, auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.



LernenimInternet Home
Kurs_InfoKursInfo
Zur AnmeldungAnmeldung