Kimimaru

Ich bin der Gründer dieses Forums da in vielen anderen Foren darüber gemeckert wurde das nicht los sei und sowas ähnliches. Also ich bin JEDEN Tag on und bin für Fragen ofen die mit diesem Forum zu tun haben. Hoffentlich wird es euch hier gefallen und ihr seit jeder Zeit herzlich wilkommen. Alles zu meiner Person findet ihr im Forum unter dem Thread "Über euch" so das war alles.

Frontpage 1 – Website erzeugen

Arbeitsauftrag
Dieses FrontPage-Projekt erfolgt nach der Leittextmethode. Gehe die Arbeitsvorschriften der Reihe nach durch und notiere Dir Anmerkungen und Verbesserungsvorschläge.

Erläuterungen
Für die Entwicklung einer Internetpräsentation sollst Du Dich mit dem Anwendungs-system MS FrontPage vertraut machen, das viele Aufgaben eines Web-Designers hilfreich unterstützen kann.

Programmoberfläche



Vorgehen
 Starte FrontPage auf Deinem PC
 Wähle den Menüpunkt Datei > Neu…
 Im Aufgabenbereich klickst Du Website mit einer Seite… an und öffnest damit das Webvorlagenmenü.
 Unter dem Reiter Allgemein wählst Du die Option Standardwebsite aus und legst unter Adresse der neuen Website ein Arbeitsverzeichnis fest (z.B. U:\schueler1).
 Bestätige diese Arbeitsschritte mit OK.

Nun wurde durch FrontPage automatisch das Webverzeichnis mit einer Grundstruktur an Verzeichnissen und Dateien angelegt, in dem Deine neue Website einstehen wird. Den Erfolg der Aktion kannst Du daran feststellen, dass Dein Verzeichnis das abgebildete Icon besitzt.

 Schreibe nun den Text und speichere die Datei.

Sie hat automatisch den Dateinamen index.htm. (Tipp: nicht gespeicherte Dateien besitzen ein * hinter dem Dateinamen.) Über einen Rechtsklick in die Seitenoberfläche und den Kontextmenüpunkt Seiteneigenschaften kannst Du Einstellungen zu Titel oder Hintergrund vornehmen.

 Erzeuge nun weitere Dateien mit den oben angeführten Namen.

Beachte dabei: Dateinamen sollen nicht länger als 8 Zeichen sein und nur aus Kleinbuchstaben bestehen. Nur Buchstaben, Ziffern und _, aber keine Sonderzeichen, keine Umlaute, keine Leerzeichen. Sonst spielt euch die Unix-Webserversoftware des Webspaceproviders u.U. einen Streich.

Frontpage 2 – Verlinken von Webseiten


Erläuterungen
In einem Modellbetrieb ist die Schüler GmbH gegründet worden. Du hast den Auftrag für dieses Unternehmen deine Internetpräsentation zu erstellen. Die Seiten der Präsentation sind von einigen Mitschülern bereits angelegt worden und teilweise mit Inhalten versehen. Die Dateien befinden sich im Verzeichnis schueler1. Kopiere die Seiten in Dein Web-Verzeichnis.


Struktur der Präsentation
Du willst nun diese Seiten so miteinander verknüpfen, dass sie sich nur durch Klicken auf die linke Maustaste öffnen und schließen lassen.
 Wechsel von der Websiteansicht in die Navigationsansicht

 Erstelle durch Ziehen der Dateien aus der Ordnerliste in das Navigationsfenster folgende Struktur.




Hyperlinks erstellen
Öffne die Datei index.htm und erzeuge unterhalb des Textes folgende einzeilige Tabelle.

Produkte AGB Kontakte Anfahrt

Nun sollen die Begriffe in den Zellen zu Hyperlinks werden, die die entsprechende Seite öffnen.
 Markiere das Wort Produkte, das zum Hyperlink werden soll.
 Menüleiste > Einfügen > Hyperlink
 Wähle im Fenster Hyperlink erstellen die entsprechende Datei aus.
 Schließe den Vorgang mit OK ab.

Den Erfolg Deiner Arbeit kannst Du testen, in dem Du in der Entwurfsansicht bei gedrückter Strg-Taste den erstellten Hyperlink anklickst. Du wirst dabei zur verlinkten Seite springen.

 Verlinke nun die gesamte Präsentation.
 Erzeuge zusätzlich auf jeder Seite einen Hyperlink, der jeweils zurück zur Startseite index.htm zurückführt.

Die Dateien computer.htm, drucker.htm, scanner.htm, tische.htm und schrank.htm sind noch leer. Sie sollen später mit Inhalten gefüllt werden. Dennoch können sie bereits jetzt durch Verweise in die Struktur eingebaut werden.

Frontpage 3 – Verlinken zu Textmarken

Erläuterungen
In einer Internetpräsentation sollte der Inhalt einer Seite möglichst auf den Bildschirm passen, damit die Informationen sofort komplett angezeigt werden. Das würde aber bedeuten, dass lange Texte in einzelne Stücke zerhackt werden müssten. Dadurch würde die gesamte Präsentation unübersichtlich. Sind lange Texte in einer Seite darzustellen, so werden sie mit Hilfe von Textmarken gegliedert. Diese Textmarken können dann per Hyperlink direkt angesprungen werden.

Gliederung durch Textmarken



Textmarken erstellen
In der Datei agb.htm sollen nun die einzelnen Abschnitte durch Textmarken erreichbar sein.
 Markiere die Zeile „1 Umfang der Lieferung“.
 Menü > Einfügen > Textmarke…
 Schließe das Fenster Textmarken mit OK.
 Markiere nun in der Tabelle den Begriff Lieferumfang.
 Wähle die Befehlsfolge Einfügen > Hyperlink und anschließend die Schaltfläche Textmarke…
 Wähle: 1 Umfang der Lieferung.
 Schließe das Textmarkenfenster mit OK.
 Schließe das Hyperlinkfenster mit OK.

Erweiterung
Verknüpfe, wie oben beschrieben, alle Abschnitte der Allgemeinen Geschäftsbedingungen miteinander.
Erstelle eine Textmarke aus der Überschrift. Auf diesen Beginn der Seite kann dann mit dem Begriff „Anfang“ im Text verwiesen werden, nachdem er zum Hyperlink gemacht wurde.

Frontpage 4 – Interaktive Schaltflächen

Erläuterungen
Du hast bisher die Seiten über Hyperlinks miteinander verknüpft, die Du auf Wörter gelegt hast. Eine professioneller aussehende Variante ergibt sich, wenn der Anwender Schaltflächen anklicken kann, die ihn zur gewünschten Seite der Website bringen.

Sicherung
Erstelle Dir eine Kopie des Webverzeichnisses. Arbeite aber im ursprünglichen Webverzeichnis weiter.

Auftrag
Die Hyperlinks der Startseite index.htm sollen gegen Interaktive Schaltflächen ausgetauscht werden. Das Design der Oberfläche soll “glatter“ erscheinen.



Interaktive Schaltflächen
 Setze den Cursor in die erste Zelle der Tabelle.
 Wähle Menü > Einfügen > Interaktive Schaltflächen…
 Wähle unter Schaltflächen ein Design Deiner Wahl.
 Gib unter Text die Beschriftung der Schaltfläche ein
 Wähle unter Hyperlink > Durchsuchen die Zieldatei für den Verweis an.
 Bestätige Deine Eingaben mit OK.
 Gehe für die 3 weiteren Hyperlinks entsprechend vor.
 Speicher die Änderungen und teste das veränderte Design.

Tipp: Lege über die Schaltfläche Rahmenlinien nun noch fest, dass keine Rahmenlinien angezeigt werden. So können Objekte optimal positioniert werden.


Frontpage 5 – Navigationsleisten

Erläuterungen
Eine weitere Art der Verlinkung kann über Navigationsleisten realisiert werden. Lege dazu erneut eine Sicherungskopie Deiner Arbeit an.

Navigationsleiste erstellen
 Lösche die Tabelle mit den Links auf der Startseite index.htm
 Wähle nun Menü > Format > Gemeinsame Randbereiche…

Hinweis: Sollte der Menüeintrag nicht anwählbar sein, ist die Frontpage-Installation nicht konfiguriert worden. Dann muss diese Einstellung nachträglich vorgenommen werden. Dazu unter Menüleiste > Extras > Seitenoptionen > Registerkarte (Dokument)erstellung > im Listenfeld Frontpage- und Sharepoint-Technologien > Vollständig auswählen und mit OK bestätigen.


 Nimm folgende Einstellungen vor: Anwenden auf alle Seiten
 Entscheide Dich für die Anordnung der Navigationsschaltflächen.
 Bestätige mit OK.

 Nach dem Bestätigen müssen noch allgemeine Eigenschaften der Hyperlinkleiste bestimmt werden.
 Führe dazu einen Doppelklick auf die neu erzeugte Navigationsleiste aus.
 Variiere die Einstellungen unter dem Reiter Allgemein und überprüfe jeweils das Ergebnis.
 Danach wird der Stil festgelegt und mit OK bestätigt.

 Überprüfe durch Abspeichern und Starten im Browser den Erfolg Deiner Arbeit.











Frontpage 6 – Frameset erstellen

Erläuterungen
Du kennst Frames aus dem Internet. Durch ein Framset wird der Bildschirm in Bereiche eingeteilt. Am häufigsten findet man folgende Einteilung:
Oben – Seitenbanner (gleich bleibend)
Links – Menüsteuerung (gleich bleibend, hier: AGB, Kontakte, Anfahrt)
Rechts – Content-Frame mit den Inhalten der verschiedenen Webseiten (veränderlich)

Vorbereiten von Frameseiten
 Kopiere alle Seiten aus dem Verzeichnis schueler1 in ein neues Verzeichnis schuelerfr1.
 Öffne Frontpage und dann den Menüpunkt > Datei > Website öffnen…
 Wähle den Ordner schuelerfr1 aus und bestätige mit OK.
 Wähle Menü > Datei > Neu… und im Arbeitsbereich den Punkt Mehr Seitenvorlagen.
 Im Fenster Seitenvorlagen > Reiter Frameseiten auswählen > Banner und Inhaltsverzeichnis markieren > mit OK bestätigen.

So sollte Deine Programmoberfläche jetzt aussehen:


Erzeugen der Frameseiten
 Die Frames sollen nun mit Inhalt gefüllt werden. Dazu müssen die Frames zuerst als eigenständige htm-Dokumente abgespeichert werden.
 Schaltfläche Neue Seite im oberen Frame anklicken > banner eintippen.
 Schaltfläche Neue Seite im linken Frame anklicken > menue eintippen.
 Schaltfläche Neue Seite im rechten Frame anklicken > aktuell eintippen.
 Menüpunkt > Datei > Speichern auswählen. Dabei werden die Wörter banner, menue und aktuell als Dateinamen übernommen.
 Wichtig! Nach diesem Speichern fordert Frontpage noch mal zum Speichern der gesamten Seite auf. Bevor das bestätigt wird, ist erst der Dateiname mit index.htm einzugeben, da diese Seite (mit den 3 Frames) unsere Startseite sein soll.
Frontpage 7 – Frames mit Menü

Erläuterungen
Nach dem Anlegen des Framesets, müssen die Seiten mit Inhalten gefüllt werden.

Content-Frame
 Gib im rechten Frame den Text so ein, wie er in der Abbildung zu erkennen ist.


Menü-Frame
 Lösche das Wort menue und erzeuge, wie Du es bereits gelernt hast, 3 Interaktive Schaltflächen: AGB, Kontakte und Anfahrt.
 Achtung! Bei der Auswahl des Hyperlinkziels muss unbedingt der Zielframe angegeben werden, in dem der Link angezeigt werden soll. Bei uns ist das der Hauptframe.
 Zusätzlich brauchen wir noch eine Schaltfläche, die zur Startseite index.htm zurückführt. Auch dafür sollst Du eine Schaltfläche anlegen. Aber Vorsicht: als Zielframe für diese Seite muss „Ganze Seite“ gewählt werden. Weißt Du warum?



 Wähle im Menü > Datei > Alle speichern und überprüfe das Design im Browser.
Frontpage 8 – Banner in Frameseiten

Banner-Frame
Das Banner fehlt noch. Dazu sind 3 Schritte notwendig.

 Lösche zunächst das Wort banner im oberen Frame.
 Wähle danach aus dem Menüpunkt Format > Design das Design „Blöcke“ für alle Seiten aus.
 Klicke nun in der Leiste Ansichten den Bereich Navigation an und erzeuge folgendes Bild, in dem Du die Datei banner.htm aus der Ordnerübersicht in die Navigation unter die index.htm ziehst.
 Kehre in die Seitenansicht zurück und rufe die Seite index.htm auf, falls sie nicht schon geöffnet ist.
 Stelle den Cursor in den Banner-Frame.
 Wähle aus dem Menü > Einfügen > Seitenbanner aus.
 Bestimme die Eigenschaften des Seitenbanners wie folgt.



 Bestätige alle Eingaben mit OK.
 Das Seitenbanner ist nun eingefügt und kann noch zentriert werden.
 In der Navigationsübersicht sollte nun folgendes Bild zeigen.















Frontpage 9 – Frames mit Untermenü

Erläuterungen
Über die Schaltfläche Produkte wurde bisher eine neue Menüseite aufgerufen, die über Links die Internetseiten der einzelnen Produkte wie Computer, Scanner, Drucker, usw. aufrufen ließ. Diese Verknüpfung soll nun in Frames gestaltet werden.

Schritt 1
 Erzeuge eine neue Frameset über die Menüpunkte Datei > Neu > Mehr Seitenvorlagen…
 Als Formatvorlage wird unter dem Reiter Frameseiten „Banner und Inhaltsverzeichnis“ ausgewählt.
 Füge im neuen Banner-Frame über die Schaltfläche „Startseite festlegen“ die Seite banner.htm ein.
 Klicke im linken neuen Menüframe die Schaltfäche „Neue Seite“ und schreibe das Wort „menue1“ in den Frame. Hier erscheinen später die Schaltflächen für die Produkte (Computer, Drucker, Scanner).
 Klicke im rechten neuen Content-Frame die Schaltfläche „Neue Seite“ und schreibe das Wort „produkt1“ in den Frame. Hier erscheinen später die Informationen zu den Produkten.
 Speichere nun alle neuen Frameseiten mit dem Befehl Datei > Speichern unter ihren vorgeschlagenen Namen und die gesamte Seite unter dem Namen produkte.htm ab.



Schritt 2
 Rufe die Datei index.htm auf und füge im Menü eine Interaktive Schaltfläche „Produkte“ hinzu (siehe auch S.7).
 Wähle aber als Zielframe die Option „Ganze Seite“ aus. Dadurch erscheint die Seite produkte.htm als gesamte Frameseite.
 Öffne die Datei produkte.htm
 Füge im linken Frame Interaktive Schaltflächen für die Produkte (Computer, Scanner, Drucker) ein (Zielframe = Hauptframe).
 Füge im rechten Frame einen allgemeinen Text zu allen Produkten ein (vgl. Abb. oben).
 Speicher alle Dateien und überprüfe das Ergebnis im Browser.

Frontpage 10 – Dynamische Effekte

Erläuterungen
Bei der Gestaltung von Texten wurden bisher nur statische Elemente verwendet. Dynamische Effekte können Seiten sinnvoll ergänzen, da sie die Aufmerksamkeit des Betrachters erhöhen. Zu viele Effekte bewirken allerdings das Gegenteil, sie wirken dann schlichtweg nervig. Vorsicht: Nicht alle Browser können diese Effekte anzeigen!

Beispiel 1 – Mouseover
 Öffne die Seite produkte.htm mit dem Text „Aktuelle Produktinformationen“.
 Markiere den Text „Aktuelle Produktinformationen“.
 Menü > Ansicht > Symbolleisten > DHTML-Effekte aktivieren.



 Wähle in dieser Symbolleiste das Ereignis „Mouseover“, bei Übernehmen „Formatierung“.
 Verändere im nun erscheinenden Fenster ausschließlich die Schriftfarbe auf „rot“.
 Speichere die Veränderungen und teste den Effekt im Browser.

Beispiel 2 – Bilder austauschen
 Füge auf der gleichen Seite einen Computer als Clipartgrafik ein. Einfügen > Grafik > Clipart…
 Markiere die Grafik
 Wähle in der DHTML-Symbolleiste das Ereignis „Mouseover“, bei Übernehmen „Bild austauschen“.
 Wähle nun eine zweite Clipartgrafik aus (z.B. Drucker).
 Speichere ab und kontrolliere das Ergebnis im Browser.
 Über die Schaltfläche Effekt entfernen können eingebrachte Effekte auch wieder entfernt werden. ;-)

Beispiel 3 - Laufschrift
 Einfügen > Webkomponente > Dynamische Effekte > Laufschrift.
 Text eingeben, der animiert werden soll und verschiedene Parameter testen.


Effekte erst dann einsetzen wenn man sich über das Ziel des Einsatzes im Klaren ist!