|
|
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:
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.
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
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).
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:
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.
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.
|