FrontPage 2003 - Einführung

INHALT: FrontPage 2003 - Einführung 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 Format- Symbolleiste 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 um eine Vorschau im Browser zu sehen. Zentrum für Datenverarbeitung der Uni. Tübingen, Rachel Schutte, 2004 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 Rahmenstärke auf 0. Sie können auch über das 2. Symbolleiste, Kein 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 Machen Sie dazu einen Verweis auf der ersten Seite (index), denn zweite, usw. Markieren Sie den Verweis (in diesem Fall Willkommen mit der Maus. 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): Klicken Sie dann oben auf das Weltsymbol mit dem Kettenglied oder klicken Sie mit der rechten Maustaste. 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: Text markieren, rechte Maustaste auf dem text klicken, Hyperlink auswählen, und auf die 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ächen- Hintergrundfarbe 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 das Weltsymbol mit dem Kettenglied oder klicken Sie mit der rechten Maustaste. Fügen Sie 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 HTML- Teil, 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 FrontPage- Servererweiterungen, 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

Frames Zusätzliche Features 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 Textfarbe Hintergrund Link Absatz Text formatieren <html> <head> <title>meine Homepage</title> </head> <body>erste Zeile </body> </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