FrontPage 2003 - Einführung

FrontPage 2003 - Einführung
INHALT:
Einleitung: Grundlagen des Internets
Vorbereitung und Webseite Planung
MS Frontpage
Inhalt und Erscheinungsbild einer Webseite
Webseite Strukturieren
Webseite Speichern und Prüfen
Multimedia-Elementen einfügen
Hyperlinks
Webseite Veröffentlichen
Zusätzliche Features
Index
Exkurs HTML-Grundbefehle
Einleitung: Grundlagen des Internets
•
Die beiden Säulen des WWW (World Wide Web) sind das Internet-Protokoll HTTP und
die Programmsprache HTML (Hypertext Markup Language).
•
HTML ermöglicht uns unsere Informationen so darzustellen, dass sie vom jeweiligen
Browser (wie Explorer, Netscape, Mozilla, usw.) in der für den Benutzer optimalen Form
dargestellt werden können - mit automatischer Anpassung an die Größe und Form
seines Bildschirmfensters, und mit der Schriftart, Schriftgröße und Farbe. (siehe Exkurs
HTML-Grundbefehle)
•
Unterschiede der Browser: Wenn Ihre ersten Web-Seiten auf dem eigenen Browser mit
Ihren persönlichen Einstellungen nun gut aussehen, dann bedeutet das noch lange nicht,
dass sie auch bei anderen Browsern gut aussehen oder lesbar sind. Wenn Sie wollen,
dass Ihre Web-Seite von allen Interessenten gelesen werden kann, dann müssen Sie
darauf achten, dass Ihre HTML-Files von den gängigen Browsern richtig verarbeitet
werden. (z.B. in die verschiedene Versionen von Internet Explorer, Netscape, usw).
•
Daher gilt: prüfen Sie Ihre Seiten stets unmittelbar nach der Erstellung mit zwei
verschiedenen Browsern.
Vorbereitung und Webseite Planung
Was soll auf die erste Seite? Begrüßung, Kurzinfo etc. Gliedern Sie Ihre Informationen
übersichtlich, daher brauchen Sie zuerst eine gründliche Inhaltsrecherche und -analyse und
können damit eine logische Struktur erstellen! Teilen Sie außerdem die Informationen in
überschaubare Portionen und Themen auf. Das erleichtert die Arbeit und kommt auch den
Leserinnen entgegen.
Welche Kriterien machen eine gute Homepage aus?
•
•
•
•
•
•
Wie lange braucht die Startseite, bis sie geladen ist? (Sie sollte mit einem Modem nicht
mehr als 10-20 Sekunden brauchen!)
Ist das Layout so gewählt, dass ich die Seite gut lesen kann? Ist die Internetadresse so
gewählt, dass ich sie mir merken kann?
Ist die Navigation klar und übersichtlich? Finde ich von der Startseite z.B. sofort zu
Kontaktinformationen (also zur Adresse, zu den Telefonnummern bzw. zu den
Mailadressen)? Komme ich von jeder Seite auf die Startseite bzw. auf die anderen
Seiten?
Sind die für mich wichtigen Informationen in geeigneter Form vorhanden? Sind die
Informationen auch aktuell? Ist die Website so gestaltet, dass ich gerne wieder
hinschaue? Wird die Homepage laufend ausgebaut und aktualisiert?
Gibt es Fehlermeldungen beim Laden der Seite? Kann ich die Seite auch ohne
Zusatzprogramme (wie Adobe, Word, usw.) anschauen? Funktionieren alle Links oder
gibt es „tote“ Verweise?
Ist die Seite sowohl mit dem Internet Explorer als auch mit Netscape lesbar?
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
1
MS Frontpage
Microsoft bietet mit FrontPage2003 ein komplettes Paket für den Entwurf und die Verwaltung
von Webseiten an. Es hat viele Funktionen, die Sie benötigen, um eine Web-Site relativ einfach
und schnell zu erstellen. Mit FrontPage stehen dem Anwender Hilfsmittel zur Verfügung, die
das Veröffentlichen im Web wesentlich erleichtern. Es ist damit heute recht einfach, auch ohne
Kenntnisse der HTML (= Hyper Text Markup Language) gut gestaltete Seiten zu erzeugen.
Frontpage ist mit einer grafischen Benutzerführung ausgestattet und erlaubt uns, HTML-Seiten
fast wie mit einer modernen Textverarbeitung (vgl. Word) anzufertigen.
Frontpage organisiert Ihre Webseiten in sogenannten „Webs“. Darunter versteht man (bzw.
Microsoft) eine Gruppe von Dateien (HTML-Seiten, Grafiken usw.) und Ordnern, die mit
Frontpage geöffnet, bearbeitet und getestet werden können.
FrontPage ist ein schneller Editor für HTML-Dokumente. Die Besonderheit ist die Integration
von beidem Ansichten: Ein Seitenlayout kann sehr schnell in der „Entwurf“-Ansicht erstellt und
dann im HTML-Quelltext („Code“) nachbearbeitet werden. Dazu muss man nur in den jeweils
anderen Bearbeitungs- bzw. Darstellungsmodus wechseln.
MS Frontpage starten
Menüs immer vollständig anzeigen
In „Extras“, „Anpassen…“ auswählen. Auf
„Menüs immer vollständig anzeigen“ klicken.
Frontpage Oberfläche
Titelleiste
Menü
1. Symbolleiste
2. Symbolleiste
Weitere Ansichtsoptionen
Aufgabenbereich
Ansichtübersicht
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
2
Inhalt und Erscheinungsbild einer Webseite
Formatierung von Text und Schriften
Planen Sie für alle Ihre Seiten durchgehend das gleiche Schriftlayout. Das erleichtert das
Lesen und auch das Navigieren durch Ihre Homepage. Verwenden Sie auch durchwegs die
gleichen Gestaltungselemente, also passende Hintergründe (die Sie auf Lesbarkeit getestet
haben!), reduzieren Sie die Anzahl der verwendeten Schriften auf eine. Beachten sie auch,
dass nicht jeder Anwender dieselben Zeichensätze auf seinem Computer hat wie Sie.
Empfehlenswert sind diese Typen: Verdana, Arial, Courier New und Times.
Wählen Sie aus dem Menüpunkt „Format“, „Zeichen…“ (dabei haben Sie mehrere Optionen)
und drücken Sie auf „Übernehmen“ denn auf „OK“:
oder markieren Sie den Text denn wählen Sie die Schrifttyp, Größe, Art, Ausrichtung, Farbe,
usw. aus der 2. Symbolleiste
BEISPEIL:
Standardschrift vs. Schriftart: Arial und Fett, Größe: 6 (24pt), Ausrichtung: zentriert, Farbe: blau
SPIECHER Sie die Seite unter Dateiname „index“ !!
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
3
Hintergrund bestimmen
Ein Hintergrund soll keinesfalls vom eigentlichen Text ablenken und muss einen starken
Kontrast zum Text bilden. Wenn Sie eine Grafik verwenden wollen, dann muss die
entsprechende Grafik entweder ein *.GIF- oder *.JPEG-Format sein. Hintergrundbilder werden
immer über das gesamte Dokument verteilt und füllen den ganzen Bildschirm.
Nun müssen Sie noch den Seitenhintergrund und die Textfarbe für Hyperlinks festlegen:
Halten Sie die Maus auf die lehre
Webseite und klicken Sie rechts.
In das erscheinende Menü wählen Sie
„Seiteneigenschaften“ aus und es öffnet sich
dieser Zwischenbildschirm:
Sie können auch über das Hauptmenüpunkt „Format“, „Eigenschaften“ auswählen und denn
auf „Formatierungen“ klicken.
Als Hintergrund können wir entweder eine Farbe einstellen oder ein vorhandenes Bild als
Hintergrunddatei wählen (dabei müssen die erst das Kästchen „Hintergrundbild“ anklicken, das
Bild aussuchen und denn einfügen). Zu beachten ist, dass diese Einstellungen gut überlegt
sein müssen, da die Lesbarkeit Ihrer Datei sehr vom Kontrast der Hintergrund- und der
Textfarbe abhängt.
„Allgemeine“ Information über die Webseite wie Seitenbeschreibung, und Stichwörter können
Sie hier auch eingeben damit ihre Seite schneller in Suchmaschinen gefunden werden kann.
Außerdem können Seitenränder unter „Erweitert“ und die Sprache festgelegt werden.
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
4
Webseite Speichern und Prüfen
•
Für die Homepage wird abhängig vom benutzten Server standardmäßig der Dateiname
default.htm oder index.htm vorgeschlagen. Ein Webserver erkennt an diesem Namen
eine Homepage. Benutzen Sie deshalb diese Vorschlagsnamen für Ihre Homepage.
•
Vermeiden Sie in Dateinamen Sonder- oder Leerzeichen, damit Ihre Web-Seiten von
den Webservern problemlos verarbeitet werden können.
•
Wählen Sie kurze, aber aussagekräftige Seitentitel für Ihre Web-Seiten. Sie erscheinen
in der Titelleiste der Browser und werden beim Ausdrucken einer Web-Seite als Titel in
der Kopfzeile angezeigt. Außerdem werden sie in die Bookmarks (Favoriten oder
Lesezeichen) aufgenommen.
•
Über dem Menüpunkt „Datei“ – „Eigenschaften“ können Sie im Register „Allgemein“ den
Seitentitel einer Web- Seite nachträglich ändern.
•
Falls Sie neue Änderungen in Ihrer Web-Seite speichern wollen, klicken Sie die Diskette
auf die Schaltfläche oder betätigen Sie STRG S.
Ein Muss: immer wieder die Seite speichern
und zur Kontrolle in mehreren Browsern
(Explorer und Netscape) testen. Leider sind viele HTML-Befehle von Frontpage mit Netscape
nicht kompatibel. Was also gut im Explorer aussieht, kann in Netscape katastrophal aussehen.
Sie können die Seite im Browser testen auf diese Weise: Klicken Sie im Menü auf „Datei“,
.
„Browservorschau“ und wählen Sie einen Browser aus oder Klicken sie auf
Speichertipps:
1.
Dateinamen müssen klein geschrieben werden
2.
es dürfen keine Leerstellen im Dateinamen sein
3.
auch keine Umlaute, Sonderzeichen und „ß„dürfen vorkommen
4.
alle Dateien müssen sich in einem Ordner bzw. Unterordnern befinden
5.
nur Schriften wie Verdana, Arial, Times New Roman und Courier dürfen verwenden
werden
6.
die erste Seite heißt immer „index.htm“ (und kann sonst nicht veröffentlicht werden!)
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
5
Webseite Strukturieren
Tabellen erstellen
Das Platzieren von Bildern und Textblöcken sind - anders als in Word – am besten mit Hilfe
von Tabellen oder Ebenen möglich. Um eine Tabelle einzufügen gibt es die drei Möglichkeiten:
von der Symbolleiste
aus dem Menü
In den Aufgabenbereich
Text oder Bilder in den Tabellen
können Sie beliebig formatieren.
Möglich ist links-, rechtsbündig
und zentriert – oder auch
Blocksatz. Klicken Sie für die
Ausrichtungen in der FormatSymbolleiste aufs entsprechende
Symbol.
Tipp: Verwenden Sie möglichst
simple Tabellen, denn
verschachtelte Tabellen
funktionieren manchen Browsern
oft nicht gut, die Bestandteile sind
dann ineinander verschoben, die
Seite ist unleserlich, usw.
BEISPIEL:
SPIECHERN Sie die Seite unter Dateiname „index“ !! Denn Klicken sie auf
Vorschau im Browser zu sehen.
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
um eine
6
Tabellen und Zelleneigenschaften
Wenn die Tabelle fertig ist, können sie noch die Tabellenränder verschwinden lassen, wenn
man sie nicht sehen sollten oder auch vergrößern. Rufen Sie mit Hilfe des Kontextmenüs der
Tabelle (rechte Maustaste auf der Tabelle) die Tabelleneigenschaften auf und setzen Sie die
„Kein
Rahmenstärke auf 0. Sie können auch über das 2. Symbolleiste,
Rahmen“ auswählen (oder nur äußere/innere Rahmen einfügen).
Die Tabelleplatzierung und Größe können jederzeit durch anklicken die Ränder verändert
werden. Jede einzelne Zelle kann über Zelleneigenschaften inhaltlich formatiert werden.
Tipp: Über „Tabelleneigenschaften“, entfernen Sie die Häkchen bei „Breite angeben“ und
„Hohe angeben“ damit die Tabellen sich automatisch an die Bildschirmgröße anpassen.
Der Frontpage Editor kann Dateien vieler gängiger Dateiformate öffnen und konvertiert diese
Dateien dann in HTML. Wenn Sie aber in die Tabelle nicht selbst einen Text eingeben,
sondern eine vorhandene Textdatei nutzen wollen, ist das recht einfach: Sie importieren
diese Daten durch Klicken auf „Einfügen“ und „Datei…“. Wählen Sie aus dem Menü unten
den gewünschten Dateityp aus.
Listen erstellen
Wie in Word können sie auch in FrontPage
Listen mit Nummerierungen oder
Aufzählungszeichen (einfache oder grafische)
erstellen.
Der Absatz (Einzüge und Abstände) ändern
Sie über den Menupunkt „Format“, „Absatz“.
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
7
Multimedia-Elementen einfügen
Arbeiten mit Bildern (Grafiken und Clipart)
Grafiken sind ein wichtiger Teil einer WWW-Seite, doch sie verlangsamen die Ladezeiten einer
Seite. Derzeit sind nur zwei Typen fürs Publizieren im Internet geeignet: das JPG-Format und
das GIF-Format. GIFs können nur maximal 256 Farben oder Graustufen darstellen. Dieser Typ
vergleicht Pixel untereinander um kleinere Dateien zu erzeugen. JPGs haben etwa 1/5 der
Größe eines entsprechenden GIFs und speichern bis zu 16,7 Mio. Farben, das heißt, sie
eignen sich gut für (eingescannte) Fotos.
Es gibt mittlerweile natürlich ganz viele Grafiken im Netz und seit kurzem gibt es auch
empfehlenswerte kostenlose Sammlungen wie www.clip-art.com, www.free-clip-art.com, oder
www.freegraphics.com. Eine andere Möglichkeit, um gezielt nach Bildern zu suchen, bieten
die Suchmaschinen Lycos (www.lycos.de) und Altavista (altavista.com). Dort können wir einen
Suchbegriff eingeben und die Maschinen suchen zu dem Begriff nur Fotos und Grafiken. Um
Grafiken zu kopieren oder zu speichern, klicken sie mit dem rechten Maustaste auf dem Bild
und wählen Sie von dem Menü „Bild speichern unter…“ oder „Kopieren…“ aus.
Bilder aus dem Menü einfügen:
Bilder fügen Sie in Ihr Dokument ein durch Klicken auf dem
Menüpunkt „Einfügen“, „Grafik“ und denn „Aus Datei“ oder „Clipart“.
Fotos können Sie direkt von einem eingeschlossenen Scanner oder
Kamera runterladen; selbst erstellte Zeichnungen, WordArt und
Videos können Sie auch einbinden.
Eine
umfangreiche
Clip-Art-Bibliothek
von
Schaltflächen,
Hintergrundbildern, Symbolen und anderen Bildern steht zur freien
Verwendung zur Verfügung.
Wenn Sie „Clipart“ aus dem Menü auswählen, stehen alle
vorhandenen Clipart in den Aufgabenbereich bereit. Als Alternativ
können Sie auch direkt in den Aufgabenbereich „ClipArt“ auswählen
(siehe unten).
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
8
BEISPIEL:
SPIECHER unter Dateiname „kriterien“ !! Denn Klicken sie auf
der Browser zu sehen.
um eine Vorschau in
Hyperlinks
Wenn Sie eine Website entwerfen, ist einer der wichtigsten Aspekte die Bereitstellung einer
logischen Navigationsstruktur, die es den Sitebesuchern ermöglicht, den gewünschten Inhalt
schnell und einfach zu finden. Sie sollten sicherstellen, dass die Sitebesucher immer wissen,
an welcher Stelle der Website sie sich gerade befinden, und ihnen den entsprechenden
Kontext für den Inhalt bereitstellen, den sie gerade lesen. Ein Hyperlink ist eine Verknüpfung
von einer Webseite zu einer anderen. Dabei kann es sich auch um eine Bild- oder
Multimediadatei, eine E-Mail-Adresse oder ein Programm handeln. Wenn ein Besucher einer
Site auf den Hyperlink klickt, wird das Ziel in einem Webbrowser angezeigt, geöffnet oder
ausgeführt, abhängig von der Art des Zieles.
Linken (= verbinden) Sie nun die Seiten!
Ein Texthyperlink ist ein Wort oder Ausdruck, dem Sie einen Ziel (den Speicherort eines
Objekts, eines Dokuments, einer Seite im World Wide Web oder eines sonstigen Zieles im
Internet) angibt. Wenn Sie nun mehrere einzelne Seiten geschrieben, gelayoutet und
abgespeichert haben, sollen Sie sie mit anklickbaren Hyperlinks verbinden (= linken). Dafür
brauchen Sie eine durchgehende Navigationsstruktur (oder Indexliste), die auf allen Ihren
Seiten gleich oder ähnlich aussieht. (Das erleichtert den Umgang damit!).
Hyperlinkliste (textbasiert):
Machen Sie
dazu einen
Verweis auf der
ersten Seite
(index), denn
zweite, usw.
Markieren Sie
den Verweis (in
diesem Fall
„Willkommen“
mit der Maus.
Klicken Sie dann oben auf das Weltsymbol mit dem
oder klicken Sie mit der rechten Maustaste.
Kettenglied
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
9
Fügen Sie in der Dialogbox den Namen Ihrer erste Seite ein („index.htm“), löschen Sie vorher
jedoch „http://“. Vergewissern Sie sich, dass das Zielverzeichnis stimmt – Sie sehen es ganz
oben neben „Suchen in“. Sie brauchen den Befehl „http://“ bei einem Link, wenn dieser
Verweis sich auf eine Adresse (URL) im Internet bezieht, also z.B. bei „http://www.unituebingen.de“. Auf der Indexseite, fügen Sie die Hyperlinks in die Indexliste nach und nach bis
Sie alle Seiten verlinkt haben. Am Schluss können sie diese Hyperlinkliste kopieren und in alle
andere Seite (am besten an der gleichen Stelle) reinkopieren.
Setzen Sie danach auf Ihrer ersten Seite einen Link zur zweiten (Hier beide in der Indexliste
unter „Kriterien“ sowie auf der Seite unter „Welche Kriterien machen eine gute Homepage
aus?“)
Bestätigen Sie den Link mit OK und speichern Sie die Seite
.
Testen Sie den Link im Browser
.
BEISPEIL:
Hyperlink… auswählen, und auf die
Text markieren, rechte Maustaste auf dem text klicken,
zweite Seite („kriterien“) verweisen (in Adresse also, als Ziel eingeben).
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
10
Interaktive Schaltflächen
In Microsoft FrontPage können Sie auf einfache Weise Schaltflächen zu Webseiten
hinzufügen. Über „Einfügen“, wählen Sie „Interaktive Schaltfläche…“ aus.
Sie können Einstellungen ändern,
wie
z. B.
Schaltflächentext
hinzufügen, die SchaltflächenHintergrundfarbe auswählen und
einen
Hyperlink
definieren.
Darüber hinaus haben Sie die
Möglichkeit, die Schriftart, den
Schriftgrad und die Schriftfarbe für
jeden Status der Schaltfläche
anzugeben, wie z. B. Original-,
Hover- und gedrückte Schaltfläche.
Sie können die horizontale und
vertikale Ausrichtung festlegen
und
die
Größe
und
die
Proportionen der Schaltfläche
ändern.
Beim Hinzufügen einer interaktiven Schaltfläche erstellt FrontPage Schaltflächensymbole.
Beim Speichern der Webseiten werden Sie von FrontPage aufgefordert, auch diese
Schaltflächensymbole zu speichern.
Grafiken und andere Objekten als Hyperlinks
Sie können Text oder ein Bild als Hyperlink angeben. Ein Bildhyperlink ist ein Bild, dem Sie mit
einen Ziel-URL zuweisen. Markieren Sie das Bild oder Grafik und klicken Sie dann oben auf
oder klicken Sie mit der rechten Maustaste. Fügen Sie
das Weltsymbol mit dem Kettenglied
denn das entsprechende Hyperlink ein.
Sie können das gesamte Bild als Standardhyperlink zuweisen. In diesem Fall kann der
Sitebesucher auf einen beliebigen Teil des Bildes klicken, um dessen Ziel anzuzeigen. Eine
Schaltfläche ist beispielsweise ein Bild mit einem Standardhyperlink.
Sie können auch einen oder mehrere Hyperlinkbereiche auf dem Bild markieren die denn
verschiedene Teile einer Website repräsentiert. Der Sitebesucher klickt nun auf einen
bestimmten Bereich der Bild, um die entsprechende Seite anzuzeigen.
Hyperlinks zu anderen Webseite und zu Emails
Eine hinzugefügte Schaltfläche, Bild oder Text kann markierte mit einer anderen Seite auf der
aktuellen Website, einer Seite im World Wide Web oder einer E-Mail-Adresse verknüpft
werden.Ein Hyperlink zu einer andere Webseite zeigt beispielsweise die Seite im Webbrowser
an, und ein Hyperlink zu einer Worddatei öffnet die Datei in dem Browser. Um einen Verweis
auf eine andere Webseite hinzufügen brauchen Sie den Befehl „http://“ bei einem Link, wenn
dieser Verweis sich auf eine Adresse (URL) im Internet bezieht, also z.B. bei „http://www.unituebingen.de“.
Wenn ein Besucher auf einen Text oder ein Bild mit einem Hyperlink zeigt, ändert sich der
Zeiger zu einer Hand , wodurch angezeigt wird, dass der Benutzer auf das Element klicken
kann. Microsoft FrontPage folgt Hyperlinks und zeigt sie abhängig vom jeweiligen Ziel
unterschiedlich an:
• Das Ziel ist eine Webseite: FrontPage öffnet die Seite zur Bearbeitung in der
Seitenansicht.
• Textmarke: FrontPage öffnet die Seite und führt einen Bildlauf zur Textmarke durch.
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
11
•
•
Datei: FrontPage öffnet die Datei im zugehörigen Bearbeitungsprogramm. Eine
Textdatei öffnet FrontPage beispielsweise im Editor.
Das Ziel befindet sich nicht auf der aktuellen Website: FrontPage öffnet eine Kopie der
Zielwebseite oder -datei.
Webseite Veröffentlichen
Vorgangsweise:
1.
Sie brauchen eine Benutzungsbewilligung und ausreichend Speicherplatz auf einem
Webserver. (Gratis-Webspace zum Testen bekommen Sie z.B. bei www.kostenlos.de)
2.
Sie müssen die HTML- Dateien und die darin verwendeten Bilder etc. mittels FTP oder
MSFrontpage auf dem Web-Server abspeichern.
3.
Sie müssen die HTML-Dateien auf dem Server dann testen und korrigieren.
4.
Sie können Ihre HTML-Dateien bei den Suchmaschinen anmelden. Mein Tipp: Gehen Sie
zu www.fireball.de, dort gibt es Tools, mit denen Sie hervorragende „Metatags“ (der HTMLTeil, den die Suchmaschinen auslesen und dann anzeigen) erstellen können.
5.
Sobald Ihr Projekt dann öffentlich zugänglich ist, sind Sie dafür verantwortlich, es laufend
zu bearbeiten und es, wenn der Inhalt nicht mehr stimmt, zu löschen.
Wie publiziere ich meine Seiten im Netz?
Es gibt viele Möglichkeiten zum Übertragen von Inhalten ins Internet. Diese reichen vom
Verwenden des einfachen File Transfer Protocols (FTP) bis zum Verwenden der FrontPageServererweiterungen, um Informationen mit dem HyperText Transport Protocol (HTTP) direkt
auf einem Webserver abzulegen.
Und das Veröffentlichen Ihrer
Frontpage-Website auf dem
Webserver ist einfach. Klicken
Sie im Frontpagemenü auf
„Datei“,
„Website
veröffentlichen…“ und klicken
sie auf „FrontPage oder
SharePoint Services“ denn auf
falls OK. Ihre Seite ist nach
kurzer Zeit im Web! (Ist es
großes Seite, braucht die
Übertragung natürlich länger.)
Unter der Kartei „Veröffentlichen“ können Sie auch entscheiden welche Seiten veröffentlicht
werden sollen (nur geänderte, usw.)
Mit Frontpage erstellte Web-Seiten können auf jedem Internet- oder Intranet- Webserver
gespeichert werden. Webseiten, die Frontpage-Komponenten enthalten, erfordern, dass auf
dem Webserver, der der Site als Host dient, die sogenannten Frontpage „Server
Extensions“ installiert sind. Wenn Ihr Webserver Frontpage (also die „Server Extensions“)
nicht unterstützt, müssen Sie die Dateien mittels FTP auf den Server überspielen. Sie klicken
denn in das Fenster „Eigenschaften des Remotewebsite“ auf FTP und geben die Speicherort
und FTP-Verzeichnis ein.
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
12
Zusätzliche Features
Frames
Um den Besuchern Ihres Webs den Umgang mit den Web-Seiten zu erleichtern, ist ein
einheitlicher Aufbau aller Seiten wichtig. So ist für den Besucher zu jedem Zeitpunkt ersichtlich,
wo er sich innerhalb des Webs befindet und wie er im Web navigieren kann. Bei der
Strukturierung der Seiten können Ihnen Frames helfen.
Eine Framesseite ist eine spezielle Art von HTML-Seite, mit der das Browserfenster in
verschiedene Bereiche, so genannte Frames (= Rahmen) unterteilt wird, von denen jeder eine
andere Seite anzeigen kann. Eine Framesseite enthält keine sichtbaren Inhalte: Sie ist
lediglich ein Behälter, in dem angegeben wird, welche anderen Seiten angezeigt werden und
wie diese Seiten angezeigt werden. Wenn Sie auf einer Seite, die in dem einen Frame
angezeigt wird, auf einen Hyperlink klicken, wird die Seite, auf die dieser Hyperlink verweist,
normalerweise in einem anderen Frame, dem so genannten Zielframe, angezeigt.
Framesseiten werden häufig für Kataloge und Artikellisten oder jede beliebige andere Art von
Seiten verwendet, bei denen es sinnvoll ist, per Klick auf einen Hyperlink in dem einen Frame
eine Seite in einem anderen Frame anzuzeigen.
Um Frames zu verwenden, klicken Sie im Menü „Datei“ auf „Neu“. Klicken Sie im
Aufgabenbereich Neu unter „Neue Seite“ auf „Mehr Seitenvorlagen“. Klicken Sie auf die
Registerkarte „Framesseiten“. Wählen Sie eine Vorlage aus, um eine Vorschau des Layouts
anzuzeigen, und klicken Sie dann auf OK. Legen Sie die Startseite (Die erste Seite, die in
einem Frame angezeigt wird, wenn der Besucher einer Website zu einer Framesseite geht, die
den Frame enthält) fest, die in den einzelnen Frames angezeigt werden soll. Legen Sie die
weiteren Seiten fest, die zuerst angezeigt werden sollten und nennen sie das ganze index.html
und speichern Sie.
Inlineframe
Abgesehen davon, dass ein Inlineframe und sein Inhalt auf einer vorhandenen Webseite
eingebettet sind, gleichen Inlineframes Frameseiten. Ein Inlineframe kann alles aufnehmen,
was Sie auch in eine normale Seite einfügen können. Einer der Vorteile der Verwendung von
Inlineframes liegt darin, dass Sie, um eingebettete Inhalte zu haben, keine separate
Frameseite erstellen müssen. Inlineframes können auf verschiedene Weise verwendet werden:
zum Einfügen eines Vertrags, den der Sitebesucher ausfüllen soll oder als Behälter für ein
Formular, usw. Über „Einfügen“ können Sie „Inlineframe“ auswählen.
Formularen
Wenn Sie ein Formular einfügen (über „Einfügen“, ‚Formular…“) fügt Microsoft
FrontPage einen rechteckigen, von einer gestrichelten Linie umgebenen
Bereich ein, der die Schaltflächen Absenden und Zurücksetzen enthält.
Innerhalb dieses rechteckigen Bereichs können Sie nun Text und
Formularfelder,
z. B.
Textfelder,
Optionsfelder,
Kontrollkästchen,
Dropdownfelder und Schaltflächen, hinzufügen.
Zeigen Sie im Menü Einfügen auf Formular, und wählen Sie dann die Felder
aus, die Sie zum Formular hinzufügen möchten.
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
13
Webkomponente
Mithilfe von Webkomponenten in Microsoft FrontPage können Sie eine Vielzahl von Features
zu Ihrer Website hinzufügen, wie z. B. Zugriffszähler, die die Anzahl von Besuchern einer
Webseite registrieren, oder Fotosammlungen, die eine Reihe von Grafiken enthalten. Um
Webkomponente einzufügen, wählen Sie aus dem Menü „Einfügen“, „Webkomponente“ aus
und entscheiden Sie welche Art einzubinden.
Zwei Arten von Webkomponenten stehen zur Auswahl: Erstellungs- oder Browsekomponenten.
Erstellungskomponenten können das Erstellen und Entwerfen von Webseiten vereinfachen und
sind in FrontPage verfügbar. Zum Hinzufügen einer Erstellungskomponente zu Ihrer Website
(z. B. eine Fotosammlung oder eine Hyperlinkleiste) muss auf dem Webserver, der als Host für
Ihre Website dient, keine spezielle Software oder Servertechnologie installiert sein.
Browserkomponenten sind in Websites auf Webservern vorhanden, auf denen die Microsoft
FrontPage-Servererweiterungen, Microsoft SharePoint Team Services oder Microsoft
Windows SharePoint Services ausgeführt werden.
Textmarken
Eine Textmarke ist eine Textstelle oder ein Textausschnitt in einer Datei, dem Sie zu
Referenzzwecken einen Namen zuweisen. Mithilfe von Textmarken können Sie einen Abschnitt
Ihres Dokuments kennzeichnen und zu einem späteren Zeitpunkt einen entsprechenden
Verweis oder eine Verknüpfung darauf erstellen. Markieren Sie den Text, dem Sie eine
Textmarke zuweisen möchten. Klicken Sie im Menü Einfügen auf Textmarke. Geben Sie unter
Name der Textmarke einen Namen für die Textmarke ein (Leerzeichen sind zulässig), oder
wählen Sie einen Namen aus.
Designs
Über 60 anpassbaren Designs machen es Ihnen einfach, eine professionelle Website auf die
Beine zu stellen (im Aufgabebereich zu sehen). In jedem Design bereits sind Aufzählungen,
Schaltflächen, Hintergrund, Seitenbanner, horizontale Linie und Schriftschnitte aufeinander
abgestimmt.
Literaturliste
http://www.bildungsservice.at/technik/internet/homepage1/homepage1.PDF
http://www.tibs.at/technik/internet/homepage1/frontpage2000.PDF
http://www.tibs.at/schulhomepage/internetauftritt.PDF
http://www.rrzn.uni-hannover.de/Dokumentation/Handbuecher/frontpage_2002.html
http://office.microsoft.com/assistance/preview.aspx?AssetID=HP052853251031&CTT=98
„SelfHTML“ von Stefan Münz: www.teamone.de/selfhtml
http://www.kefk.net/Software/Anwendungen/FrontPage/Shortcuts/index.asp
http://www.kefk.net/Software/Anwendungen/FrontPage/Authoring/index.asp
http://www.kefk.net/Software/Anwendungen/FrontPage/Versionen/index.asp
http://www.frontpagehilfe.ch/
http://www.frontpagehilfe.de/hilf_fp2003.htm
http://www.frontpage2003.com
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
14
Exkurs HTML-Grundbefehle
Wenn Sie sich ein wenig mit der Hyper Text Markup Language befassen wollen, bekommen Sie nun
dazu Gelegenheit.
Wir geben die Struktur der ersten Seite ein (HTML-Befehle nennen wir übrigens „Tags“).
<html>
<head>
<title>Titel Ihrer Seite</title>
</head>
<body> Seiteninhalt (Hier stehen Text, Bilder und Formatierungen)
</body>
</html>
Anmerkung: <html> ist immer der erste Tag einer Internetseite, </html> der letzte! Der Schrägstrich
dient also in der Programmsprache zum Abschalten eines Befehls bzw. Tags. Die Seite hat auch einen
Kopfteil <head>, ein teil davon ist der Seitentitel <title>, das ist jener Teil, den ein Browser als
Lesezeichen oder Favoriten speichert! Wir sehen ihn in der obersten Programmzeile. Die eigentliche
Text- und Bildinformation steht immer erst im <body>.
Hintergrundfarbe: Erweiterung den vorhandenen <body> Tag. Fügen Sie „bgcolor=yellow“
zwischen die Klammern ein. So soll nun das Ergebnis aussehen: <body bgcolor=yellow>
Text eingeben: schreiben Sie nach dem „Body“-Tag einige Zeilen Text hin. Der Tag für den
Zeilenumbruch lautet <br>. Der Tag für einen Absatz lautet <p>.
Text Formatierung: Wenn Sie den Tag <u> verwenden, wird alles was danach kommt unterstrichen.
Verwenden Sie </u> zum Abschalten des Tags. Mit <b> erzwingen Sie den Fettdruck der folgenden
Passage, mit </b> schalten Sie den Tag wieder weg.
Schriftgröße und Art: Verwenden Sie den Tag „size“ bzw. „face“ dafür so: <font face=“Arial” size=12>
Der Text, der hinter der Anweisung steht, weist diese Schriftgröße auf. Sie schalten den Tag mit
</font> wieder aus. Microsoft verwendet für Größenangaben die Tags <big> und <small>. Einmal
<big> vor dem Wort heißt eine Stufe größer als Standard, <big><big><big> bedeutet drei Stufen
größer als Standard. Der Befehl zum Abschalten lautet auch in diesem Fall wieder </big></big></big>.
Für Überschriften gibt es diese Formatierungen: entweder <h1> (sehr groß), <h2> (groß) und <h3>
(etwas größer als Standard). Nach der Überschrift verwenden Sie diese Tags zum Ausschalten: </h1>,
</h2> und </h3>.
Bild integrieren und auf der Seite zentrieren: Die Voraussetzung dafür ist, dass Sie schon ein *.jpg in
Ihr Verzeichnis hineinkopiert haben. Am Beispiel von einen Bild unter „xyz.jpg” im Verzeichnis
gespeichert:
Dazu gibt es diese Tags:
<center>
<img src=“xyz.jpg”>
</center>
„img“ steht für image, also Bild, und „src“ ist die Abkürzung für „source“, also Quelle.
linken (verbinden) die Seiten miteinander:
Legen Sie nun auf der ersten Seite einen Schalter mit dem Namen “weiter!” (zur neuen Seite
„seite2.htm“) an. Geben Sie den Tag ein: <a href=“seite2.htm”>Weiter!</a>
“a” steht für “anchor”, “href” für “hypertext reference“. So haben Sie Ihren ersten „Link“ programmiert.
Auf der zweiten Seite („seite2.htm“) bauen wir nun eine Sprungmarke (Link) mit dem Namen "Zur
ersten Seite" zur ersten Seite ein. Das muss so aussehen:
<a href=“index.htm”>Zur ersten Seite!</a>
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
15
BIESPIEL: Geteilter Ansicht (mit „Code“ oder HTML und den grafischen Entwurf)
HTML-Kurzübersicht
Seitenstruktur
<html>
<head>
<title>Meine Homepage</title>
</head>
<body>Erste Zeile
</body>
Textfarbe
Hintergrund
Link
Absatz
Text
formatieren
</html>
<body text=Farbe link= Farbe vlink=Farbe alink= Farbe>
(Statt dem englischen Wort können Sie auch die Hexadezimalzahl der Farbe verwenden.)
link = Standardverbindung
vlink = besuchter Link
alink = aktiver Link
<body bgcolor=Farbe> Eine bestimmte Farbe als Hintergrund (background)
<body background=datei.jpg> Ein bestimmtes Bild als Hintergrund
<a href=„datei.htm„>Linkname</a> Verbindung zu einer Datei
<a href=„verzeichnis/datei.htm„>Linkname</a> Link zu Datei in Unterverzeichnis
<a href=„http://www.asn-ibk.ac.at/bildung„>Linkname</a> Link zu Adresse im Netz
entweder <p> (paragraph) oder <br>, <br> steht für Zeilenumbruch (break)
<b> fett (bold)
<u> unterstreichen
<center> zentrieren
Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004
16