Frontpage: Grafiken, CSS und dynamische Elemente

Ebenso wie Texte oder Links lassen sich mit Frontpage natürlich auch ganz leicht Bilder, Hintergrundgrafiken, CSS oder dynamische Elemente einfügen.

Einzelne Bilder einbinden und verlinken

Für Bilder und Grafiken auf Webseiten verwendet man am besten die komprimierten Grafikformate: GIF, JPEG und PNG. Um ein Bild in einer FrontPage Webseite einzubinden klickt man im Menü auf Einfügen -> Grafik und wählt denn den entsprechenden Ort auf dem die Grafik liegt aus. Zwischendurch sollte man immer wieder den Entwurf speichern. Wenn die Grafiken oder Bilder nicht im Hauptordner der Website abgelegt wurde, dann fragt FrontPage beim Abspeichern der HTML-Seite mit dem Dialogfenster Eingebettete Dateien speichern nach, ob es diese Grafik sichern soll. Hat man vorher die entsprechenden Bilder in dem Stammordner der Website bereits abgelegt, dann erscheint das Dialogfeld Eingebettete Dateien speichern nicht. Das Dialogfeld dient zwei wichtigen Funktionen zum einen sorgt es dafür dass in dem Stammordner eine Kopie der Grafik angelegt wird, die beim Veröffentlichen der Internetseite auch angezeigt wird und zum anderen kann man in diesem Dialogfeld auch das Bildformat ändern. Damit man sich in dem Stammordner der Internetseite besser zurechtfindet ist es empfehlenswert einen Unterordner mit dem Namen "Bilder" oder "Images" anzulegen. Dies kann man auch in dem Dialogfeld Eingebettete Dateien speichern machen. Mit dem Button Ordner wechseln kann man entweder einen schon angelegten Bildordner auswählen oder mit einem Klick auf die Schaltfläche Neuen Ordner erstellen einen neuen Ordner anlegen und das Bild dort hineinspeichern. Anschließend sollte man mit einem Klick der rechten Maustaste auf den Neuen Ordner diesen noch in Bilder oder Images umbenennen.

Darstellung: Bild einfügen

Möchte man ein Bild oder eine Grafik mit einer weiterführenden Seite verlinken so geht man folgendermaßen vor. Durch einen Doppelklick auf das eingefügte Bild öffnet sich das Dialogfenster Bildeigenschaften in dem man im vordersten Reiter Optionen, wie die Ausrichtung, die Rahmendicke, die Grafikgröße und auch den horizontalen und vertikalen Abstand zum Text einstellen kann. In dem mittleren Reiter dieses Dialogfensters kann man dann die URL eintragen, auf die das Bild verlinken soll sowie auch einen Alternativ-Text, der angezeigt werden soll, wenn das Bild noch nicht vollständig geladen ist oder wenn das Bild beim User nicht angezeigt werden kann.

Grafiken und Clips bearbeiten

Um ein Bild mit den Bildbearbeitungswerkzeugen bearbeiten zu können, muss es zuvor markiert werden. Ist die Symbolleiste Bilder in FrontPage gerade nicht sichtbar, so kann man diese über Einfügen -> Werkzeugleiste -> Bilder öffnen.

Darstellung: Die Grafik-Werkzeugleiste

Mit den in der Abbildung gezeigten Werkzeugen kann man auf das Bild einen Text schreiben, es drehen oder spiegeln, den Kontrast, die Helligkeit oder Farbe ändern und vieles weitere mehr. Der Kreativität sind hier kaum Grenzen gesetzt. Wenn man mit dem Mauszeiger auf ein Symbol zeigt, dann erscheint ein Tooltip, der beschreibt wofür dieses Werkzeug eingesetzt werden kann.

Imagemaps

Sicherlich haben Sie schon oft ein Imagemap im Internet gesehen und benutzt. Imagemaps werden auch Hotspots genannt und sind Bilder die in mehrere Segmente eingeteilt wurden, welche jeweils mit einem separaten Hyperlink versehen werden können. Imagemaps verwendet man zum Beispiel wenn eine Firma sehr viele Regionalstellen hat und dann auf ihrer Internetseite eine Landkarte mit den Bundesländern abbildet auf welcher der User das gewünschte Gebiet auswählen kann. Oder ein Reiseveranstalter bietet Reisen ans Meer und ins Gebirge an. So genügt ein Bild um auf unterschiedliche weiterführende Seiten zu verlinken.
Die Symbolleiste Bilder lässt sich, falls sie nicht schon in FrontPage angezeigt, wird über Einfügen -> Werkzeugleiste -> Bilder öffnen. Um in FrontPage einen Hotspot in ein auf der HTML-Seite vorhandenes Bild einzufügen markiert man mit der Maus das gewünschte Bild und wählt das passende Hotspot Werkzeug aus. In der Abbildung unten sind die Hotspot-Werkzeuge rot umrandet. Mit dem Werkzeug wählt man die entsprechenden Segmente aus und zeichnet mit dem Stift auf dem Bild den Bereich nach. Danach öffnet sich ein Dialog-Fenster wie beim Einfügen eines Hyperlinks. In diesem Fenster kann man den ausgewählten Bereich mit der gewünschten Webseite oder einer Datei verknüpfen.

Darstellung: Eine Image-Map erstellen

In FrontPage zeichnen

Um die Zeichenleiste in FrontPage zu öffnen geht man auf Ansicht -> Symbolleisten -> Zeichnen. Noch schneller lässt sich die Zeichenleiste mit dem Zeichen-Button in der Werkzeugsliste auswählen.

Darstellung: Die Zeichenschaltfläche

Diese Leiste zum Zeichnen hat fast die gleichen Funktionen wie die in Microsoft Word. Es stehen Autoformen, Linien, Pfeile, Rechteck, Ellipse, Textfeld, WordArt, Füll-, Rahmen und Textfarbe sowie Schatten- und 3D-Funktion und Strich- und Linienart zur Verfügung. Auch hierbei kann man seiner Phantasie freien Lauf lassen. Wenn man ein Bild in FrontPage erstellt hat das Programm automatisch den passenden HTML-Code dazu und sichert das Bild zum Beispiel als image001.gif.

Einfügen von Cascading Style Sheets (CSS)

Cascading Style Sheets, kurz CSS ist eine Beschreibungssprache für strukturierte Daten wie HTML und XML. Mit Hilfe von internen, externen und inline CSS kann man festlegen, wie ein besonders ausgezeichneter Inhalt aussehen soll. Der Vorteil von externen Stylesheets ist der, dass nur eine Stylesheet-Datei erstellt wird und alle Seiten einer Website damit verknüpft werden können. Wenn man dann später eine Überschrift oder die Hintergrundfarbe bzw. das Hintergrundbild ändern möchte, dann muss nur die eine externe CSS-Datei geändert werden und nicht alle einzelnen Seiten. Daher ist es von Vorteil, für das komplette Layout stets ein externes Stylesheet zu verwenden. Interne Stylesheets verwendet man dann, wenn nur auf einer bestimmten Seite eine andere oder weitere Darstellung eines bestimmten Inhalts benötigt wird. Ein Inline-CSS bezieht sich auf ein einzelnes Seitenelement oder eine bestimmte Folge eines einzelnen Seitenelements.
In FrontPage können alle CSS-Typen eingefügt werden. FrontPage bietet bereits verschiedene Stylesheets als Vorlagen an. Um ein externes CSS aus diesen Vorlagen zu wählen klickt man im Menü Datei -> Neu. Daraufhin öffnet sich rechts das Aufgabenfenster. Dort wählt man unter Neue Seite die Verknüpfung Mehr Seitenvorlagen. In dem Dialogfeld aktiviert man die Registerkarte Stylesheets und kann dort unter verschiedenen Vorlagen eine auswählen. Um das auswählte Stylesheet einer Seite zuweisen zu können muss es noch gespeichert werden. Wichtig ist beim Speichern auf die richtige Dateiendung (.css) zu achten. Wenn das externe CSS gespeichert wurde kann es einer Webseite zugewiesen werden. Die Zuweisung eines externen Stylesheets erfolgt recht einfach. Zuerst klickt man in der Symbolleiste ganz links auf die Schaltfläche Neue Seite erstellen. Die geöffnete Seite sollte sich im Entwurfsmodus befinden. Nun wählt man im Menü Format -> Stylesheet-Verknüpfungen klickt dann auf Hinzufügen und wählt dann das zuvor abgespeicherte style.css aus. Daraufhin schreibt FrontPage automatisch in den HTML-Code diesen Befehl für das externe Stylesheet:

Um ein internes Stylesheet zu erstellen wählt man im Menü Format -> Formatvorlage und dann Neu. Im Feld Name (Selektor) gibt eine Bezeichnung für die Vorlage ein zum Beispiel Stil1, Stil2 oder Header1, Header2. Anschließend wählt man aus, ob es sich um ein Absatz- oder Zeichenformat handeln soll und kann dann nachfolgend, wenn man auf die Schaltfläche Format drückt die jeweiligen Einstellungen vornehmen und mit OK bestätigen.
FrontPage schreibt dann automatisch zwischen den <head> und den </head> Tag in den HTML-Code der geöffneten Seite beispielsweise folgende interne CSS-Anweisung:

Einen angelegten internen Stil kann man einem markierten Text zufügen, wenn man oben in der Format-Symbolleiste in dem ganz linken Dropdownfenster "Stil" den entsprechenden Stil auswählt.
Die HTML-Anweisung eines Inline-CSS-Befehls könnte so aussehen:

Hinzufügen dynamischer Elemente

Dynamische Elemente können sein ein Zugriffszähler, ein Datums- oder Uhrzeitfeld sowie Applets, Plug-Ins beziehungsweise Steuerelemente. Ein Zugriffszähler zeigt dem Besucher einer Website an, wie viele User bereits diese Seite angeschaut haben. Bevor Sie jedoch einen Zugriffszähler auf einer Webseite hinzufügen prüfen Sie bei Ihrem Webserveradministrator oder Internetdienstanbieter, ob der Webserver auf dem die Site veröffentlicht werden soll über eine dieser Technologien verfügt: Microsoft FrontPage 2002 Servererweiterungen, SharePoint Team Services v1.0 oder Microsoft Windows SharePoint Services. Um einen Zugriffszähler einzufügen muss die Seitenansicht im Entwurfsmodus geöffnet sein. Dann wählen Sie in der Menüleiste unter Einfügen -> Webkomponente -> und unter Komponententyp Zugriffszähler aus, dann können Sie zwischen verschiedenen Vorlagen oder einem benutzerdefinierten Bild, das die Zahlen 0 bis 9 in gleichmäßigen Abständen zeigt und im GIF-Format vorliegt, auswählen. Wenn ein benutzerdefiniertes Bild ausgewählt wird, das sich im Ordner Bilder befindet, dann ist es wichtig den richtigen Pfad anzugeben zum Beispiel: bilder/zahlen.gif Um den Zähler auf 0 zurückzusetzen aktivieren Sie bitte das Kontrollkästchen Zähler zurücksetzen auf 0. Der HTML-Code eines Zugriffszählers aus der Vorlage kann so aussehen:

Und der Source-Code eines Zugriffszählers mit einem benutzerdefinierten Bild kann so aussehen:

Öfter noch als Zugriffszähler findet man auf Webseiten ein Datums- und oder Uhrzeitfeld. Diese Elemente können auch als JavaScript-Befehl in den Source-Code geschrieben werden oder eben als dynamisches Element in der Entwurfsansicht einer Seite in FrontPage eingefügt werden. Ein Datums- oder Uhrzeitfeld lässt sich nur in der Entwurfsansicht einfügen. Mit der Eingabemarke wird die Stelle ausgewählt an der das Datum und oder die Uhrzeit angezeigt werden soll. Im Menü wählt man unter Einfügen -> Datum und Uhrzeit aus und in dem sich öffnenden Dialogfeld das Format für Datum und Uhrzeit und ob das Datum und oder die Uhrzeit der letzten Bearbeitung oder der letzten Aktualisierung angezeigt werden sollen. Der HTML-Code eines Zeitstempels der das aktuelle Datum und die aktuelle Zeit anzeigt sieht beispielweise so aus:

Der JavaScript-Befehl für eine aktuelle Datums/Uhrzeitanzeige ist wesentlich länger und kann alternativ in den HTML-Code kopiert werden:

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Tabellen und Design

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project