Herzlich Willkommen bei. Webentwicklung mit Frontpage. Steffen Schwientek Große Klostergasse Friedberg Tel /13175

Transkript

1 Herzlich Willkommen bei Webentwicklung mit Frontpage

2 Wege zu einer eigenen Webpräsenz Idee, etwas der Öffentlichkeit mitzuteilen Webseite erstellen Bei einem ISP (Internet Service Provider) die eigene Webseite online stellen Eine grobe Vorstellung, welche Inhalt die Seite später haben soll, sind sehr hilfreich. Das fertige, spätere Layout ist beim normalen HTML edieren nicht so wichtig, das kann man auch später noch formatieren (beim arbeiten mittels css2 Layouts sind Formatierungsangaben am Anfang später sogar hinderlich) Beim Arbeiten Frontpage empfiehlt es sich hingegen, auch Anfangs ein Layout im Kopf zu haben. Bemerkung: Im weiteren Verlauf dieses Leitfadens wird zunächst der Layoutgedanke zurückgestellt

3 Möglichkeiten der Erstellung von Webseiten - Provider Mittels vorgefertigter Vorlagen des Providers Webseite ist schnell und mit wenig Aufwand erstellt Layout beschränkt sich auf die Vorlagen, die der ISP bereithält Je nach Qualität der Vorlage ist die Seite gut oder weniger gut für den Benutzer lesbar Größere Webseiten werden mit der Zeit unwartbar. Es muss online zwangläufig online gearbeitet werden

4 Webseite per Hand erstellen Erstellen der Webseite mittels Texteditor und Browser Oder einem HTML Editor Möglich, da die entsprechenden Techniken leicht erlernbar sind. Dies war von dem Erfinder des Webs, Tim Berners Lee auch so vorgesehen. Er hat diese Sprache extra so einfach gestaltet. Im Gegensatz zu einer normalen Sprache hat der HTML-Wortschatz gerade mal gut 100 Vokabeln, wobei viele nicht mal unbedingt gebraucht werden

5 Webseite offline erstellen Mittels eigens dafür hergestellter Programme (Dreamweaver, Homesite, Frontpage, NVU) Arbeiten mittels Vorlagen mit den bekannten Einschränkungen Freies Arbeiten möglich Kurze Einarbeitungszeit Nachteile Quellcode wird leicht unleserlich und aufgebläht Ergebnis mit machen Browsern nicht oder nur schlecht lesbar

6 ann Webseiten mit vielen verschiedenen Techniken erstellen Bei sinnvoller Nutzung beeindruckende Ergebnisse in kurzer Zeit Nachteil: Bei der Erstellung ist man geneigt, diese Funktionsumfang auch auszunutzen Nicht jeder Browser/Server unterstützt jeden Frontpage-output

7 Frontpage starten und Miniseite erstellen Aufgabe: Starten Sie Frontpage und erstellen Sie ihre erste Seite, bestehend nur aus der Überschrift Hallo Welt und dem Satz Meine erste Webseite Menü Datei, Neu, Seite/Web, Neue leere Seite Erstmal nur Einträge aus dem Strukturmenü auswählen Überschrift erster Ordnung auswählen Keine Formatierungen ala fett, kursiv vornehmen Strukturmenü: Das Erste popup-pulldown Menü mit den Einträgen : normal, Überschrift 1,...

8 Design und Vorschau Frontpage unterstützt 4 verschiedene Ansichten des Dokuments Design Quellcode (Das, was später der Browser interpretieren soll, edierbar) Split Modus (Oben Design, unten Quellcode) Vorschaumodus (Vorschau im eingebauten IE) Der Splitmodus gibt es erst ab Frontpage 2003

9 Aufgabe 2 Stellen Sie Stichpunktartik ihre liebsten Hobbys vor Verwenden Sie zur Sortierung ausschließlich das Stil Dropdown Menü Stellen Sie anschließend ihr Lieblingshobby mit einigen wenigen Worten vor. Also einfach im Strukturmenü eine Aufzählung wählen... Und für den Text als Struktur normal wählen

10 Elemente zur Textstrukturierung <h1> Überschrift erster Ordnung </h1> <h6> Überschrift sechster Ordnung </h6> <p>paragraph</p> <em> schwach betonter Text </em> <strong> stark betonter Text </strong> <abbr> Abkürzung </abbr> Wenn Sie in der HTML Ansicht die bisherigen Dokumente anschauen, so sollten Sie zumindest einige der obigen HTML Befehle (tags) wiedererkennen.

11 Ungeordnete Liste Struktur einer ungeordneten Liste <ul> <li>listenpunkt</li> <li>noch ein Listenpunkt</li> <li>und noch einer</li> </ul> Der generierte Output für Quelltextschauer

12 Webseiten edieren im Quellcode Fügen Sie in der Quellcodeansicht ein weiteres Interessengebiet ein! Wechseln Sie dazu zwischen Design und Quellcodemenü hin und her! Heben Sie ihr wichtigstes Hobby hervor! Hier sollen Sie einfach nur ein bißchen Firm in der HTML Sprache werden. Bei manchen Frontpagekonstrukten sind diese hilfreich

13 HTML All das, was bislang erstellt wurde ist reines HTML. Alle im VHS-Kursheft angegebenen Themen können mit HTML pur abgehandelt werden

14 Was heißt HTML HTML: Abkürzung für Hyper Text Markup Language auf deutsch etwa Hypertextauszeichnungssprache

15 Was heißt HTML Hyper Text Markup Language Auszeichnungssprache: Der Text wird mittels logischer Strukturen wie Überschriften, Paragraphen, Listen und Tabellen ausgezeichnet. Keine Programmiersprache! Deswegen: Wenig Angriffsfläche für Viren/Trojaner Nochmal:

16 Was heißt HTML Hyper Text Markup Language Im Gegensatz zu einem Buch hat der Leser die Möglichkeit durch Verweise (sog. Links) zu anderen interessanten Stellen zu springen.

17 Technik (2) Frontpage unterstützt neben HTML noch viele Techniken im begrenzten Umfang Für den Anfang empfiehlt es sich, die meisten Techniken zu deaktivieren Auch bei größeren Projekten: Immer versuchen, mit möglichst geringen technischen Vorraussetzungen auf Anwenderseite zu planen. Frontpage ist halt kein reiner HTML Editor, auch wenn er für die meisten Seiten als solcher benutzt wird

18 Aufgabe: Techniken Deaktivieren Deaktivieren Sie Java, Javascript, ASP, und VB: Welche Erweiterungen Sie später auch aktivieren: Lassen Sie die Unterstützung für VBA und AcitveX deaktiviert. Zu viele Sicherheitslücken, selbst WinXP hat es in der Standardeinstellung deaktiviert

19 Tabellen Tabellen werden in HTML verwendet zur logischen Strukturierung Als gestalterisches Layoutmittel Vorerst verwenden wir es als nur als Mittel zur Strukturierung

20 Aufgabe 4 In der Datei ergebnis_monza.txt finden Sie die Rennergebnisse des GP Monza inkl. Rennteam und Rückstand zum Sieger. Stellen Sie das Ergebnis als Tabelle mit den folgenden Spalten dar: Platz Fahrer Team Rückstand Benutzen Sie dazu die Designansicht des Browsers Tabelle/Insert Table Größeres Problem war das Einfügen einer simplen Textdatei in Frontpage Frontpage 2002 stellt dafür ein extra Tool zur Verfügung: Menü Einfügen Datei Bei der dann folgenden Frage einfach Standardabsätze auswählen, und Frontpage nimmt eine recht sinnvolle Formatierung des Textes in Absätzen vor.. Eine Formatierung in Tabellen geht leider nicht automatisch, das muss dann sowieso per Hand gemacht werden

21 <table > <tr> <th>kopfzelle</th> <th>kopfzelle</th> </tr> <tr> <td>datenzelle</td> <td>datenzelle</td> </tr> </table> Syntax Im Quelltext wird man solche Konstrukte wiederfinden

22 Bemerkungen zur Tabelle Durch <tr></tr> werden Zeilen erzeugt <td></td> füllt in die einzelnen Zeilen mit Datenzellen aus Hinweis: Befinden sich in einer Zeile mehr <td> Einträge als in anderen Zeilen, so werden die anderen Zeilen auch um einen leeren Eintrag ergänzt Viele Editoren bieten einen Tabellenassistenten Bemerkung zielt vor allen Dingen auf die, die auch mal eine HTML Seite per Hand bearbeiten.

23 Bilder Wie in diesem Vortrag, lockern Bilder auch eine Webseite auf. Dabei sind jedoch einige Dinge zu beachten

24 Bilder Auflösung/Dateigröße beachten Bilder aus der Kamera/Scanner sind oft sehr groß (oft mehrere MB) Lange Ladezeiten beim Nutzer, Schwierigkeiten bei der Bildbearbeitung. Bildschirm hat etwa eine Auflösung von 1 Megapixel Bild mit einem Grafikprogramm anpassen Bilder im Text sollten nicht mehr als 6 kb groß sein, Bildschirmfüllende Bilder sollten nicht mehr als 100kB sein

25 Bildformate Als Bildformate für die Darstellung in Webseiten sind folgende Formate etabliert JPG für Photos GIF für graphische Darstellungen, z.b. Logos und Diagramme PNG ebenfalls wie GIF für graphische Darstellungen, flexibler jedoch weniger verbreitet

26 Aufgabe: Bilder einfügen Aufgabe: Fügen Sie in der Designansicht das Bild des Oldtimers in die Datei Geschichte des Automobils ein und edieren Sie diese sinnvoll Tipp: Einfügen/Bild Anmerkung: Frontpage besitzt eine rudimentäre (für sehr viele Fälle aber ausreichende) Bildbearbeitung. Auch hier: Eine fremde Textdatei läßt sich einfach mittels Einfügen Date bewerkstelligen. Mit der gleichen Methode läßt sich auch eine MS Word Datei umwandeln, dabei geht wegen der unterschiedlichen Anforderung Papier/Web allerdings ein Großteil des Layouts verlogen.

27 Erklärung des Quellcodes Bilder werden mit dem img Tag in Webseiten eingefügt: <img src="bilder/logo.jpg" width="breite" height="höhe" alt="alternativer Text" /> src: Verweis auf Namen und Ablageposition des Bildes auf dem Webserver. width: Breite des Bildes in Pixeln (optional) Angabe enweder in px (Pixeln) oder in % height: Höhe des Bildes (optional) alt: Alternativtext, falls kein Bild angezeigt werden kann Für die Quelltextgucker. Ein normaler Frontpagenutzer klickt einfach auf das entsprechende Button.

28 Urheberrecht Texte und Bilder sind urheberrechtlich geschützt, d.h. Verwenden eines Bildes aus dem Internet auf der eigenen Webseite ist verboten, wenn es nicht ausdrücklich erlaubt ist Im Zweifelsfall beim Autor nachfragen. Texte dürfen nur mit Quellenangabe zitiert werden. Ganz wichtig: Sie sollen nicht stehlen, auch wenns noch so verlockend ist... Gibt im übrigen übel Ärger, wenn man Sie dabei erwischt. Die Herrn Anwälte verlangen da mal schnell 6000 Beabeitungsgebühren (bei einem nicht legalem Bild) (kein Scherz, sondern unser Rechtssystem, vgl.

29 Verweise Die Hypertexteigenschaft von HTML macht die Interoperabilität des World Wide Web überhaupt erst möglich. Diese besteht aus so genannten Hyperlinks, die von sogenannten Ankerpunkten in einer Webseite auf andere Stellen im WWW verweisen. Das Ziel eines Verweises ist häufig eine andere Webseite, kann aber z.b. auch eine Mailadresse oder eine Datei zum herunterladen sein. Verlinken Sie eifrig zu thematisch passenden, und bitten Sie die verlinkten Seiten, zurückzulinken. Ob man bei einer Firmenseite freilich auf die Konkurrenz verlinken sollte, ist dann doch zweifelhaft

30 Verweise Ausgangspunkt eines Verweises ist ein Anker innerhalb der Webseite, der durch das <a> Tag markiert wird. Parameter des Verweises ist die Zieladresse. Innerhalb des Tags ist der Text eingefasst, der im Browserfenster als Verweis dargestellt wird. <a href= Zieladresse >Text des Verweises</a> Wieder was für die Quelltextgucker. Frontpagebesitzer klicken hierbei einfach auf Verweis Einfügen button

31 Verweis extern <a href= Zieladresse >Text des Verweises</a> <a href= >Zur Suchmaschine </a> <a href= ftp://ftp.kde.org > Zum ftp server </a> <a href= > Schicken Sie mir eine </a> In Frontpage gehen auch Verweisen zu ftp oder s einfach. Als Verweisseite einfach ftp:// voranstellen, oder direkt auf klicken

32 Verweis Übung Verlinken Sie die HTML Seite Anfänge des Automobils mit Verlinken Sie die Seite mit ihren Hobbys mit der Seite Geschichte des Automobils. Wichtig, falls Sie eine eigene Internetpräsenz mit mehreren Seiten haben: Sorgen Sie immer für eine gute interne Verlinkung. Bei großen Seiten stellt ihnen Frontpage auch eine Linkverwaltung zur Verfügung.

33 Verlinken-Rechtliches Sie dürfen nicht auf (offensichtlich) rechtswidrige Inhalte verlinken. Damit machen tragen sie nämlich zu dessen Verbreitung bei. Ein Distanzieren von allen Links ist rechtlich nicht geboten, es ist überflüssig. Im Falle des rechtwidrigen Verlinkens sind Sie trotz Disclaimer nach wie vor verantwortlich

34 Möglichkeiten der Texthervorhebung Mittels HTML zeichnet Frontpage Texte direkt aus: Einfach in der Buttonliste (buttons fett, kursiv usw) auswählen Mit rechtem Mausklick auf das zu edierende Textstück und Zeichen auswählen

35 Aufgabe Färben Sie auf ihrer Hobbyseite Den Hintergrund rot Die Textfarbe weiss Zentrieren Sie die Überschrift mittig Tauschen Sie den kreisförmigen Bullets in der Liste durch ein viereckiges aus

36 Stile zentral einfärben Man kann auch einen Stil zentral definieren, ohne dies an jeder Stelle wiederholen zu müssen. Menü Format/Stile öffnen Ins Quellcodemenü: Sich einzelne Tags anschauen Die Stile zentral definieren Die Formatierung des Textes erfolgt hierbei Dateiweit. Man brauch eine andere Hintergrundfarbe nur einmal neu definieren.

37 Aufgabe Definieren Sie zentral für alle Überschriften in Geschichte des Automobils : Die Überschriften gelb unterlegt Den Hintergrund schwarz Die Textfarbe weiss Das Bild mittig Eine solche zentrale Auszeichnung sorgt für schlanken Quelltext und damit leichtere spätere Wartbarkeit. Sie sollten so wenig wie möglich Texte direkt im Text auszeichnen, da dies langfristig eine größere Seite unwartbar macht.

38 Anmerkungungen zu den Stilformatierungen Im ersten Fall haben wir HTML und/oder CSS erzeugt, der an Ort und Stelle eingefügt wurde Im zweiten Fall haben wir ausschliesslich CSS benutzt Vorteil: Quellcode ist leichter lesbar und später besser wartbar Durch zentrale Konfiguration beschränkt man sich auf weniger unterschiedliche Stile

39 CSS CSS: Cascading Style Sheet Trennung von logischer Textauszeichnung (HTML) und Layout (CSS) Anpassung an verschiedene Ausgabemedien (Bildschirm, Braille-Zeile, Handy, Drucker) Layout kann zentralisiert verwaltet werden Anpassung auch für (Seh)Behinderte möglich

40 Autoren, User und Browserstylesheets Das zur Darstellung verwendete Stylesheet kann aus verschiedenen Quellen stammen: Stylesheet des Betrachters Stylesheet des Autors Stylesheet des Browsers Im Regelfall wird die Vorgabe des Webautors benutzt, Sehbehinderte, Handynutzer usw. können aber auch ihr eigenes Stylesheet benutzen Es mag für einen Webautor merkwürdig klingen, aber nicht jeder will eine komplex gestaltete Homepage lesen. Manche bevorzugen einen simplen Stil, der schnell und einfach gelesen ist. Prinzipiell kann beides mit verschiedenen Stylesheets realisiert werden, allerdings vorerst nur im HTML Quelltext, also im Quelltextmodus von Frontpage

41 <head> <style> <!-- CSS zentral definiert im Quellcode h1 {color:red;background-color:black} p,li {color:green; background-image:url(background2.gif)} --> </style> </head> Für Quelltexter...

42 CSS in Frontpage für alle Dateien eines Webprojekts: Zentral an einer Stelle am besten: Zunächst eine CSS-Datei als beispiel laden In den Seitenvorlagen eine CSS Datei auswählen Abspeichern Zu einer HTML-Datei wechseln Im Format/Link zu Stylsheet diese Datei hinzufügen Mit Kentnissen in CSS läßt sich diese Datei auch manuell nach bearbeiten. In Frontpage geht das ganze sonst nur recht unbequem: Die CSS Datei abspeichern, sich im Normamodus anschauen über Format/Layout edieren.

43 Browserkompatibilität All das, was bislang gemacht wurde kann mit graphischen Browsern sehr ähnlich dargestellt werden Für designte Webseiten gilt das leider nicht! Daher: Immer mit mehreren Browsern anschauen (ältere) Frontpageversionen unterstützen nativ diese nicht Wichtig für eine kommerzielle Seite: Sperren Sie möglichst niemanden aus! Also in mehreren Browsern den Output testen, ruhig auch mal alle Optionen deaktivieren. Und auch mal im Browser ein paar mal den Vergrößerungsbutton tippen...

44 Aufgabe: Richten Sie zusätzlich zum Internetexplorer den Mozilla-Firefox ein! Tipp: Vorschau in Browser Bei größeren Ansprüchen sollte man neben diesen beiden auch mit einem Textbrowser anschauen. Kann man sich da auch noch zurechtfinden, ist die Seite recht sicher barrierefrei aufgebaut

45 HTML wurde von ihren Erfindern nicht als Layoutsprache entworfen, sondern zur Informationsübermittlung entworfen Es gab verschiedene Modelle, welche das Web populär machten und. Bei Erstellung einer Seite sollten Sie sich auf eine davon festlegen

46 Layoutmodelle Tabellenlayout Tabelle wird zum Layouten zweckentfremdet Funktioniert generell mit allen Browsern CSS Boxen oder Layer Layout mittels Frames Zweckmäßiges Layoutmittel, gut geeignet für Webautoren. Die von Frontpage verwedneten Webvorlagen verwenden meist Tabellen zur Strukturierung

47 Tabellenlayout Layoutmodelle CSS Boxen oder Layer Sauberer Weg/Trennnung layout Inhalt Wird von Netscape 4 Browsern unzureichend unterstützt Barrierefreihes Design leicht möglich Nur teilweise Unterstützung in Frontpage 2003 Layout mittels Frames Eigentlich das Mittel der Wahl zum Layouten. HTML zum Strukturieren und CSS zum positionieren und um Textgröße/Farbe (und Hintergrund...) zu bestimmen Hintergrundfarbe/Bild und Textfarben lassen sich bereits mit älteren Frontpageversionen bequem vornehmen, das Positionieren einzelner HTML Elemente ist bequem ab Frontpage 2003 möglich

48 Tabellenlayout CSS Boxen oder Layer Layoutmodelle Layout mittels Frames Problematisch für Suchmaschinen, da keine Verzeichnisstruktur nach außen hin sichtbar Würde ich wegen der schwierigeren Verlinkbarkeit nicht mehr wählen. Vorteil ist die leichter zu realisierende Dokumentstruktur..

49 Aufbau einer Frameseite Zum Aufbau einer Webseite unter Verwendung von Frames werden mehrere HTML Dateien benötigt: Der Frameset, dieser unterteilt das Browserfenster in einzelne Segmente und verweist für jedes dieser Segmente auf eine HTML-Datei Zu jedem Segment wird eine eigene HTML Datei für den Inhalt benötigt

50 Zweigeteilter Frameset Frame1 Frame2 Wichtig: Diese Konstrukt besteht aus 3 Frames: Segmet 1 (eigentlich eine normale HTML Datei) Segmet 2 (eigentlich eine normale HTML Datei) und eine zusätzliche Framedatei, welche die beiden Dateien Segment 1 und Segment 2 verbindet

51 Dreigeteilter Frameset Frame2 Frame1 (1.HTML Datei) Frame3 (3.HTML Datei)

52 Aufgabe: Frameset Erstellen Sie eine zweigeteilte Framedatei, indem Sie die Datei Geschichte des Automobils in den oberen Teil, und die Datei mit ihren liebsten Hobbys ins untere Frame bringen Tipp: Erstellen Sie eine neue Datei Andere Seitenvorlagen auswählen Auf die Frameseite gehen Nächstes mal vielleicht mit neuem leeren Web anfangen? Bei einer TN gabs da mächtig durcheinander...

53 Tabellenlayout

54 Tabellenlayout anlegen Im Gegensatz zu den Frames muß man bei Tabellen bereits bei der Erstellung eine Große Tabelle anlegen. Nachträgliche Änderungen sind in Frontpage nur mittels copy&pase möglich Am Anfang wird eine große Tabelle erstellt, die später mit Inhalt gefüllt wird. Tabelle ist wörtlich, zum layouten werden manche Zellen zusammengefaßt

55 Tabellenlayout-wie Seite 1 Seite 2 Seite 3 Seite 4 Banner/top Haupttext Seite 1 Beim Tabellenlayout muß jedes einzelne Thema durch eine fast identische Unterseite dargestellt werden. Man erzeugt damit viele, nur durch den Haupttext unterschiedliche html-dateien

56 Tabellenlayout-wie Seite 1 Seite 2 Seite 3 Seite 4 Banner/top Haupttext Seite 2 Seite 1, Seite 2 sind dabei Links zu den entsprechenden unterseiten

57 Tabellenlayout-Warnung Frontpage macht ihnen das erstellen von auch komplexem Tabellenlayout einfach Gefahr von stark verschachtelten Tabellen Google kann den Inhalt von solchen Tabellen kaum noch folgen

58 google-pagerank Google versucht den Inhalt einer Seite zu analysieren und ordnen. Vorgehensweise: Titel und Überschriften sind sehr wichtig Keine Überschriften wie Willkommen auf meiner Homepage verwenden Anzahl der Verweise, die auf resp. Von der Homepage ausgehen sind Ebenfalls wichtig Also: eifrig Überschriften vergeben, ordentliche Seitentitel vergeben Benutzer von stark geschachteten Webseiten der normalen Frames bekommen technisch von google im pagerank einen Dämpfer, da google diese Seiten schlechter indizieren kann.

59 Seite-Barrierefreihet Barrierefreihe Seiten lassen sich am ehesten realisieren, wenn man die Seiten nach dem Inhalt strukturiert aufbaut Nicht zu kleine/exotische Schriften Frontpage-Output nicht nur im IE anschauen, sondern auch im Firefox, Safari Richtige Webdesigner testen ihre Seite auch noch einen Textbrowser wie lynx Zusatz: Barrierefrei heißt, daß jeder Mensch einen gleichwertigen Zugang zu dieser Seite bekommt. Für öffentliche Stellen gibt's eine EU Richtlinie, die irgendwann auch mal verbindlich werden könnte. Die meisten im Netz verfügbaren Seiten sind es leider zur Zeit nicht.

60 Barrierefreiheit 2 Geben Sie bei zu jedem Bild ein Alternativtext an Sowas gehört auch dazu: Jedes Bild mit einem Alternativtext zu versehen

61 Frontpage Hinweise (2) Frontpage produziert einen HTML-Qelltext, der unter ästhetischen (und sprachtechnischen) Gesichtspunkten schlecht ist. Bei auch geringen HTML-Kentnissen im Quellcodefenster kontrollieren und verbessern!

62 Wahl des richtigen Providers Finden Sie heraus, welche Techniken Sie verwendet haben. Frontpage-Erweiterungen? Falls ja: Nur Provider nehmen mit Frontpage-Erweiterung Wollen Sie die Seite später ausbauen (SHop)? PHP/JSP/ASP + SQL Datenbank wichtig Der Microsoft Weg wäre: MS IIS (Webserver) MS SQL (Datenbank) ASP Programmierung Ist wegen der höhreren Lizenzkosten bei den Providern deutlich teurer als eine Lösung, die auf Apache, MySQL und PHP (allesamt Lizenskostenfrei) Qualitativ sind die Unterschiede recht gering, naturgemäß funktionieren die Frontpage- Erweiterungen am besten auf Servern, welche auf MS IIS aufsetzen. Inzwischen scheint aber auch die Unterstützung der Frontpageerweiterungen auf einem Apache möglich

63 Seite hochladen (2) Schätzen Sie ihren Speicher- und Datendurchsatz Faustregel Datendurchsatz: 5GB reichen anfangs für eine unbekannte Seite Wollen Sie die Seite ausbauen? Provider wählen, die Tarifwechsel zulassen Wie wichtig ist ihnen die Erreichbarkeit? Provider nehmen, die einen Mindestdatendurchsatz garantieren

64 Provider finden Dort einfach nach den eigenen Bedürfnissen forschen Gewerbliche sollten nach sog. Premiumprovider ausschau halten. Premiumanbieter sind schon länger als ein Jahr auf dem Markt, bieten Ausfallstatistiken usw.

65 Seite hochladen Zugangsdaten per ftp: Server:home.arcor.de Benutzer:vhs-frontpage Passwort: vhs-hat-kein-geld Auf ihrer Seite müssen Sie natürlich passwort und Benutzer anpassen. Der Provider teilt dies mit!

66 Frontpage Erweiterungen Inhaltsverzeichnis automatisch anlegen Suchfunktion Alles erhältlich über : einfügen/webkomponente Die Suchfunktion arbeitet nur, falls der Server Frontpageerweiterungen besitzt

67 Frontpage-Vorlagen Man unterscheidet zwischen Formatvorlagen CSS, Frames und allgemeine Fertigen Webseiten

68 Frontpage-Formatvorlage Formatvorlagen liefern nur eine einzige Seite mit. Machen i.d.r nicht wesentlich mehr als etwas Beispieltext in eine Layoutstruktur zu füllen, damit der Nutzer sehen kann, wie eine Page gebaut werden kann Tatsächlich haben wir Formatvorlagen schon kennengelernt, als wir eine Frameset-Seite erstellt haben, da wir nur so die entsprechende Funktionalität freischalten konnten.

69 Frontpage-Webvorlage In diesem Fall wird schon eine recht umfangreiche Webseite inkl. Struktur und Beispieltext vorgegeben Dies alles kann nur in einem neuen web geöffnet werden. Verwendung von Frontpage eigenen Strukturen Strukturen: Dinge wie Erzeugung von einem Inhaltsverzeichnis oder der Buchführung einer Linkliste sind solche Strukturen, welche das Programm bereithält. In diesem Fall hat der Output der HTML Fenstereingabe recht wenig mit dem zu tun, was dem Broweser geliefert wird, da FP in diesem Fall erst beim publizieren das entsprechende HTML erzeugt. Man kann dies leicht am durch die Quelltextansicht am Browser nachvollziehen

70 Aufgabe: Weblayoutvorlage Gehen Sie den Assistenten Firmenpräsenzweb durch Alle Angaben, die Sie hier tätigen, können später in FP nich geändert werden Menü Datei Seite neu oder Web Webvorlagen (auf der rechten Seite) Dort Firmenpräsenzweb klicken Die Fragen anschließen so gut es geht beantworten möglichst nicht mehr anklicken, als man später wirklich haben will, da die Komplexität später stark zunimmt

71 Aufgaben verteilen Direkt nach beenden des Assistenten kommen Sie zu Aufgaben die Sie noch zu erledigen haben. Später in Ruhe durchgehen! Jetzt: Erstellen Sie eine neue, zusätzliche Aufgabe: Datei pr02 dem Benutzer Malte zum bearbeiten geben Tipp: In die Ordneransicht wechseln, richtige Datei markieren, in Datemenü Neue/Neue Aufgabe wählen Anmerkung: Aufgaben sind nach Frontpage bereits erledigt, wenn man sich nur ein wenig an der Seite gefummelt hat. Dient daher nicht zur Leistungsüberprüfung, sondern nur zur Verteilung an mehrere Mitarbeiter, die man anschließend aber noch selbst kontrollieren muss.

72 Linkverwaltung / Strukturierung einer großen Seite Frontpage kann automatisch die interne Navigation der Seite ermöglichen. Dazu dienen: Navigationsansicht Hier können einzelne Unterseiten neuen Oberseiten zugeordnet werden Hyperlinkleiste (normale Seitenansicht) Hier kann festgelegt werden, zu welchen internen (Unter)seiten ein Link angelegt werden kann.

73 Aufgabe: Navigationsansicht Machen Sie sich mittels Navigationsansicht klar, wie die doch recht umfangreiche Seite strukturiert wurde. Verschieben Sie das Angebot Service1 zu den Produkten, und beobachten Sie inwieweit sich das bei in der entsprechenden Seite auswirkt Versuchen Sie nicht, die änderungen in der HTML ansicht nachzuvollziehen. Letzendlich steckt das Geheimnis in den Zeilen <meta name= Microsoft Border content= tlb,default > <meta name= Microsoft Theme content= iris 000,,default > Bemerkung: Die Namen in der Navigationsansicht sind einfach Dateinamen zugeordnet, ohne allerdings identisch zu sein. Das in der Navigation angezeigte home ist nichts anderes als die Datei index.html.

74 Hyperlinkliste Ist der zweite Teil der Seitenverwaltung: Frontpage erzeugt hiermit vollautomatisch Links zu Dateien in verschiedenen Verwaltungsebenen, die in der Navigationsleiste zu erkennen sind. Die Navigation erfolgt auschließlich ebenenweise Bei der Bearbeitung dieser sollte man daher stets die Navigationsstruktur im Hinterkopf haben Nur am Rande: Manuelles hinzufügen einer Hyperlinkleiste ist über das Menü Einfügen/Navigation möglich.

75 Hyperlinkliste-Ebenen Hyperlinkleisten sortiert nur Ebenenweise in der Baumstruktur, also Legt Links nur von der untersten Ebenen zur nächsthöheren Oder Legt eine Linkliste zu untergeordneten Ebenen an Legt auch Links zu den den files in der gleichen Ebene an, allerdings nur dann, falls sie der gleiches Elternkategorie angehören

76 Aufgabe:Hyperlinkstruktur Bearbeiten Sie die (unbearbeitete) Hyperlinkleiste in der der Navigationseinheit Produkt 2 (Datei prod02.htm), so daß von dort Links zu den Produkten 1 und 3 erscheinen Was geschieht mit der Navigation in den Servicekategorien? Durch Doppelklick un der Naviansicht kommt man zu den entsprechenden Dateien. Dort kann man alle Navigationsleisten mit Rechtsklick und Hyperlinkeigenschaften bearbeiten Beachte aber: Damit werden nicht etwa nur die die Linkleiste in für die Datei Produkt 2 erstellt, sondern auch für alle anderen Files der gleichen Ebene

77 Hyperlink-Besonderheit Die oberste Kategorie (Home, Suchen...) wirk besonders: Innerhalb dieser kann man nicht von gleicher Ebene, sondern nur von oberster Ebene sprechen Home ist nur über Home ansprechbar. Dumm: Die Mitglieder der obersten Ebene können sich niemals als Mitglieder der gleichen Ebene angesprechen werden. Für diese gilt immer die Sonderregel (warum auch immer...) ies

78 Hyperlink-Aufgabe 2 Erstellen Sie sinnvolle Hyperlinkstrukturen auch für die oberste Seite, und auf alle Ebenen, auf der Sie noch unbearbeite Hyperlinklisten finden

79 Automatisch generierter Inhalt Frontpage kann automatisiert ein rudimentäres Inhaltsverzeichnis anlegen. Es werden alle Seiten erfaßt Überschriften werden damit nicht erfaßt

80 Aufgabe: Neues Produkt hinzufügen Die Seite kann auch recht einfach über die Navigationsleiste erweitert werden. Legen Sie ein ein viertes Produkt an. N Tipp: Neue Seiten werden automatisch in die Tochterebene des aktiven (mit der Maus markierten) Navigationselement angelegt) Also: In der Naviansicht einfach mit der Maus Produkte auswählen (einfachklick) und anschließend ganz Simpel eine neue, leere Seite öffnen. Sie können sogar den

81 Bearbeitung einzelner Seiten Mache Elemente der einzelnen Seiten können/müssen in der Navigationsansicht erstellt werden Seitentitel Dokumentüberschrift Als Seitentitel bezeichnet man das von Windows erstellte Browserumrandung.

82 Aufgabe: Produkt erstellen 2 Titel und Dokumentüberschrift legen am besten Sie in der Navigationsübersicht an Den eigentlichen Inhalt natürlich auf der entsprechenden Seite...(am besten mit Bild) Verkaufen Sie auf der soeben angelegten Seite den Oldtimer Sentinel

83 Suchen und Feedback Diese beiden Felder Funktionieren ausschließlich, falls die Seite auf einem frontpage-fähigen Browser veröffentlicht wurde. Also auch nicht auf dem heimischen PC! Das Suchmenü können sie einfach in jede beliebige Seite einfügen, indem Sie im Menü Einfügen Webkomponente Websuche klicken

84 Benutzereingaben abspeichern Auf einem Frontpage-erweiterten Server lassen sich auch von einem Benutzer übermitteltem Daten weiterverarbeiten: Methode: Einfach ein Eingabefeld erzeugen und konfigurieren Menü Einfügen/ Formular... Bemerkung: Die in der Vorlage verwendete Methode, die Benutzerangabe in einem separaten File abzuspeichern ist Unsinn, da hierbei nur ein einziger Nutzer etwas dauerhaft aufschreiben kann. Sinnvoll wäre hierbei eine Datenbankanbindung...

85 Vielen Dank für ihre Aufmerksamkeit