|
Webseitengestaltung für Fortgeschrittene
Unter die Motorhaube geschaut: HTML als Grundgerüst für Internetseiten Sie haben nun die wichtigsten Schritte kennen gelernt, mit deren Hilfe Sie mit dem Editor FrotpageExpress Internetseiten gestalten können. Nun wollen wir uns die Internetsprache HTML einmal näher anschauen. Aber keine Angst, es geht lediglich darum, das Grundgerüst einer Internetseite kennen zu lernen. Das ist notwendig, falls Sie bestimmte Dienste, wie Counter und Gästebücher etc. auf Ihren Seiten nutzen möchten; „programmieren“ müssen Sie aber nicht.
Im Grunde handelt es sich bei html-Dateien um plumpe Textdateien, die Sie mit dem Windows-Editor schreiben können. Der einzige Unterschied besteht darin, dass die erstellten Dokumente nicht die Endung *.txt, sondern *.htm haben. Innerhalb des Dokuments wird mit ganz gewöhnlichem Text dem Internetbrowser gesagt, wie er die einzelnen Elemente darstellen soll. Diese Befehle werden Tags genannt und stehen immer in dreieckigen Klammern.
So sagt der Tag <html> am Beginn des Dokuments dem Browser, dass hier nun Befehle folgen, die eine Internetseite darstellen sollen. Am Schluss des Dokuments steht der gleiche Tag mit einem Querstrich, der besagt, dass hier das Ende der Internetseite erreicht ist </html>.
Hier ein Beispiel für eine einfache Internetseite
|
|
Gut zu erkennen sind die Tags <html> und </html> die Anfang und Ende der html-Informationen angeben. Daneben gibt es aber noch zwei weitere Bereiche. Den Headbereich und den Bodybereich.
Headbereich: Der Headbereich wird mit dem Tag <head> eingeleitet und mit </head> wieder abgeschlossen. Hier stehen im Regelfall später im Browserfenster nicht direkt sichtbare Informationen, wie z.B. die bereits behandelten Metainformationen. Aber auch der Titel der Seite, der später in der obersten Browserzeile angezeigt wird. Er wird mit dem Tag <title> begonnen und mit dem Tag </title> beendet.
Bodybereich: Der Bodybereich wird mit dem Tag <body> eingeleitet und mit </body> wieder abgeschlossen. Hier stehen im Regelfall alle Informationen, die später im Browserfenster angezeigt werden sollen; z.B. steht hier, welche Bilddateien wo und in welcher Größe dargestellt werden sollen oder, welcher Text angezeigt wird.
So viel zur Einführung in die Internetsprache html.
|
|
Vereinfachte Navigation mit der Hilfe von Frames Mit Sicherheit sind Ihnen im Internet schon einmal Webseiten aufgefallen, die in mehrere Bereiche aufgeteilt sind, von denen einzelne gescrollt werden können. Dies ist mit der Hilfe von Framesets möglich. Ein Framset ist in erster Linie eine ganz normale Internetseite. Allerdings befiehlt diese dem Browser, das Ansichtsfenster in unterschiedliche Anzeigefenster, auch Frames genannt, zu zerlegen. In jedem einzelnen Frame können nun andere Internetseiten angezeigt werden.
|
Zusammengefasst:
|
Ein Frameset ist eine Internetseite, die in unterschiedliche Anzeigefenster (Frames) aufgeteilt ist. In den einzelnen Frames können andere Internetseiten dargestellt werden. |
|
Nachfolgend wird erläutert, wie Sie mit der Hilfe von FrontPage Express ein einfaches Frameset erstellen können.
Beispiel für eine Frameseite Unten die Abbildung einer Frameseite, wie Sie im Internetexplorer dargestellt wird. Das Frameset besteht aus zwei Bereichen (Frames). Im linken Frame wird eine Internetseite angezeigt, die eine Navigationsleiste enthält. Der Inhalt dieses Frames bleibt immer gleich. Durch Anklicken der Links auf der Navigationsleiste werden entsprechende Seiten im rechten Frame aufgerufen.
|
|
Erstellung einer einfachen Frameseite und Bearbeitung der Hyperlinks Nun soll ein einfaches Frameset, wie im obigen Beispiel gezeigt, erstellt werden. Insgesamt gilt es, mindestens drei html-Dateien zu gestalten:
1) die Seite, die im linken Frame angezeigt wird (Navigationsseite) und immer gleich bleibt [bitte unter dem Namen navigationsseite.htm abspeichern] 2) mindestens eine Seite, die im rechten Frame angezeigt wird [bitte unter dem Namen anzeigefenster.htm abspeichern] 3) die Seite, die das eigentliche Frameset mit den zwei Frames enthält
Nun zur Erstellung des Framests:
1) beginnen Sie in FrontpageExpress mit einer leeren Seite 2) Da das Programm keine automatisierte Routine zur Erstellung hat, müssen die Einstellungen manuell im Quelltext vorgenommen werden.
|
|
|
Um den Quelltext bearbeiten zu können, wählen Sie nun in der Menüleiste den Eintrag „Ansicht“ und dort den Eintrag „HTML...“. Nun öffnet sich ein neues Fenster (siehe unten), in welchem Sie die aktuelle Seite in der Internetsprache html sehen. Hier müssen Sie nur einige kurze Ergänzungen vornehmen, damit aus der normalen Internetseite ein Frameset wird. |
|
|
|
||
|
3) Bitte fügen Sie nun folgende Zeilen ein: a. hinter </head> die Zeile <framesets cols=“150,*“> Damit wird festgelegt, dass der linke Frame 150 Pixel breit ist und der rechte Frame den Rest der Seite füllt. b. In der nächsten Zeile geben Sie Folgendes ein: <frame sc=“navigationsseite.htm“ name=“Frame1“ target=“Frame2“> Damit wird die Webseite “navigationsseite.htm” später in den linken Frame eingeladen; der Frame erhält den Namen “Frame1” und die Seiten, die mit Klick auf Hyperlinks aufgerufen werden, werden in Frame2 angezeigt
|
|
|
c. |
Als nächstes geben Sie die direkt darunter die nachfolgende Zeile ein, um festzulegen, welche Seite beim Aufrufen im rechten Frame erscheinen soll: <frame sc=“anzeigefenster.htm“ name=“frame2“> |
|
d. |
Zum Abschluss geben Sie vor der letzten Zeile </html> noch nachfolgende Zeile ein: </frameset> Damit sind alle Einstellungen abgeschlossen. Der Quelltext müsste nun wie folgt aussehen: |
|
4) Beenden Sie nun die Eingabe durch Klick auf das „OK“-Button und speichern das Frameset unter einem beliebigen Namen ab. 5) Wenn Sie nun die Frame-Datei mit Hilfe des Explorers aufrufen, müsste das komplette Frameset im Internetexplorer zu sehen sein
Mit der Erstellung des Framesets sind Sie aber noch nicht fertig! Im rechten Frame sollen nach Anklicken eines Links alle weiteren Seiten aufgerufen werden. Dazu müssen die Hyperlinks entsprechend bearbeitet werden:
1) Öffnen Sie die Datei „navigationsseite.htm“ in FrontPage Express. 2) Markieren Sie das Bild oder den Text in welchen Sie einen Hyperlink einfügen wollen. 3) Wählen Sie in der Menüleiste „Einfügen“ und dort „Hyperlink“ und gehen bei der Zuordnung des Hyperlinks vor, wie in Kapitel 4.8. beschrieben. 4) Bevor sie mit „OK“ den Vorgang abschließen, geben Sie noch den Eintrag Frame2 in das Feld hinter dem Eintrag „Ziel-Frame“ ein:
Dies bewirkt, dass die Seite später beim Aufruf durch den Hyperlink im rechten Frame angezeigt wird. 5) Wiederholen Sie den Vorgang für alle weiteren Links und speichern die Änderungen ab. 6) Wenn Sie nun das Frameset im Internetexplorer öffnen und auf einen Link klicken, wird die entsprechende Seite im rechten Frame angezeigt.
|
Achtung:
|
Sofern das Frameset sofort nach Eingabe Ihrer Internetadresse erscheinen soll, müssen Sie die Datei für das Frameset natürlich index.htm nennen, da dies die Datei ist, die vom Browser nach Eingabe der Internetadresse automatisch als erstes geöffnet wird. |
|
Alternativen zu Microsoft Frontpage Express Frontpage Express ist mittlerweile etwas in die Jahre gekommen. Bis zur Browserversion 5 wurde es zusammen mit dem Internetexplorer verteilt. Auch beim Betriebsystem Windows war es bis zur Version 98 Second Edition dabei. Seither hat sich Microsoft nicht mehr um das Programm gekümmert und auch auf der offiziellen Homepage von Microsoft ist nichts mehr über das Programm zu erfahren. Langfristig gilt es folglich, Alternativen zu finden. Zudem sind mittlerweile einige Alternativen auf dem Markt, die wesentlich mehr können, was den Funktionsumfang und die Bedienbarkeit anbelangt. Hier sollen einige kurz vorgestellt werden:
Netscape Composer Zusammen mit dem Internetbrowser Netscape Navigator, der kostenlos abgegeben wird, verteilt Netscape auch seinen Composer. Vom Funktionsumfang entspricht das Programm Frontpage Express; nur mit dem Unterschied, dass sich Netscape noch aktiv um das Programm kümmert. Beim Umstieg von Frontpage Express ist die Bedienung etwas gewöhnungsbedürftig.
Der große Bruder von Frontpage Express: Frontpage 2000 bzw. 2002 ist die kommerzielle Version des Programms zur Internetseitengestaltung von Microsoft. Mit ihm kann man nicht nur Internetseiten gestalten, sondern auch umfangreiche Webprojekte verwalten. Zudem bietet das Programm eine Vielzahl von Vorlagen und Hilfestellungen für den Einsteiger. Mit 399 DM (offizieller Herstellerpreis) ist es allerdings auch eines der teureren Programme. Für Schüler und Studierende gibt es allerdings Sonderlizenzen. Gegen Vorlage einer gültigen Immatrikulationsbescheinigung erhält man das Programm als uneingeschränkte Schullizenz auch für einen Preis von knapp 165 DM.
Der Konkurrent: Namo Webeditor Das Programm orientiert sich, was Bedienung und Funktionsumfang angeht, weitgehend an Frontpage 2000; ist aber etwas einfacher zu bedienen und glänzt zudem mit einer sehr umfangreichen Sammlung an Vorlagen und Grafiken. Mit 225 DM ist die Version 4.0 etwas günstiger als Frontpage. Unter www.namo.com kann auch die englische Version 3.08, die kostenlos und uneingeschränkt genutzt werden kann, herunter geladen werden. Ein Download des Programmes lohnt sich trotz der englischen Menübefehle, da auch der Einsteiger sich relativ schnell intuitiv zurecht finden kann.
1st Page 2000 ist das Hilfsmittel, um schnell und einfach Websites zu erstellen und, um html zu erlernen. Der Editor ist Freeware. http://www.evrsoft.com/1stpage/
Arachnophilia ein sehr netter Editor ist Arachnophilia, der Nachfolger von WebThing. Es ist ein Share-Care Programm (schwer zu erklären, aber ganz nett) und läuft unter Win95 und NT. http://arachnoid.com/
Home Page Wizard Der Compuserve Home Page Wizard ist für Anfänger im Web Publishing sehr gut geeignet und unterstützt gerade unerfahrene Anwender durch einen Assistenten und eine Buttonleiste. Die jeweils neueste Version finden Sie unter der Adresse: http://ourworld.compuserve.de/
Star Division - Star Office Star Office ein komplettes Office Paket für verschiedene Betriebsysteme mit einem relativ gutem html-editor. Die Personal Edition steht für nichtkommerzielle Nutzung kostenlos in der Download-Sektion zur Verfügung http://www.sun.com/staroffice
|
|
Weitere Hilfen zu Frontpage Express · http://www.thgm.pf.bw.schule.de/FP-Express-Anleitung/ · http://www.teach-online.karlsruhe.de/HILFEN/PROGRAMM/FrontpageExpress/index.htm · http://www.jura.uni-tuebingen.de/cz/frontpag/frontpage.pdf · http://www.mts-online.at/ONLINE/support/frontpage-anl.htm · http://www.frontpagehilfe.de/anleit_fpex.htm
Allgemeine Seiten mit Hilfen und Informationen für Webautoren · http://www.webmasterplan.de · http://www.webmasterweb.de · http://www.kostenlos.de/internet/ · http://www.pcgarage.de/midi/1a-midi-archiv.htm · http://www.self.hp.de · http://www.besucherboom.de · http://www.computerwissen.de
Cliparts · http://www.cgipower.de/pages/Cliparts/menu/Zirkus/zirkus.html · http://www.anigifs.net/Animierte-Gifs.html · http://www.clipartarchiv.de/
Homepages von FH-Studierenden und –Dozenten · http://fh-bund-av.istcool.de/ · http://www.christian-scheller.de · http://www.franzegle.com/ · http://www.jankowitsch.de/ · http://www.jochenkurr.de/beruf.htm · http://home.nexgo.de/rageville · http://www.punktorg.org/fhma/ · http://www.selbstvermarktungsstrategie.de · http://www.talentmarketing.de
|