This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
atelier für gestaltung, niesner & huber, wuppertal Sylvia Hasselbach, [email protected] Anna Plenk, [email protected] Roswitha Leferink, Düsseldorf; Barbara Decker, München mediaService, Siegen freiburger graphische betriebe, Freiburg
Inhaltsverzeichnis Teil I: Einführung und Installation .......................................................15 1
Was ist FrontPage? ...........................................................................................17 1.1 Neu in FrontPage 2002 ............................................................................17 1.1.1 Navigation................................................................................17 1.1.2 Neue Seite oder neues Web......................................................18 1.1.3 Dynamic HTML ........................................................................20 1.1.4 Script Editor..............................................................................20 1.2 Struktur und Aufbau.................................................................................21 1.2.1 Menüsystem .............................................................................21 1.2.2 Der Editorbereich .....................................................................22 1.3 Dialoge ....................................................................................................25 1.3.1 Die wichtigsten Dialogfelder .....................................................25 1.3.2 Grundeinstellungen des Programms .........................................25 1.3.3 Seitenoptionen für ein Web ......................................................26 1.3.4 Basisoptionen eines Webs .........................................................32 1.3.5 Seiteneigenschaften..................................................................35 1.4 Die Komponenten....................................................................................39 1.4.1 Übersicht ..................................................................................39 1.4.2 Umgang mit Komponenten......................................................40
2
Server-Erweiterungen .......................................................................................43 2.1 Vorbereiten der FrontPage-Erweiterung....................................................43 2.1.1 Installation der FrontPage-Erweiterungen..................................43 2.1.2 Upgrade und Kompatibilität FrontPage 2000 zu FrontPage 2002 ........................................................................44 2.2 Konfiguration der FrontPage-Erweiterungen .............................................45 2.2.1 Einen virtuellen Server erweitern ...............................................45 2.3 SharePoint Services ..................................................................................48 2.3.1 Übersicht über die Verwaltungsfunktionen................................48 2.3.2 SharePoint Konfigurationseinstellungen ....................................49 2.3.3 SharePoint-Verwaltung virtueller Server ....................................51 2.3.4 SharePoint Websites und FrontPage..........................................54 2.4 SharePoint-Teamfunktionen .....................................................................55 2.4.1 Listen........................................................................................55 2.4.2 Diskussionsrunden ....................................................................56 2.4.3 Dokumente ..............................................................................56
6
Inhaltsverzeichnis
3
Das Internet und seine Dienste ........................................................................57 3.1 Einführung und Grundbegriffe .................................................................57 3.1.1 Grundlagen und FrontPage ......................................................58 3.1.2 Grundbegriffe...........................................................................58 3.2 Die Internet-Protokolle und ihr Ursprung..................................................62 3.2.1 Die Organisationen ICANN und IANA.......................................62 3.2.2 Das ISO/OSI-Modell und die Internet-Protokolle .......................63 3.2.3 Request For Comments (RFC) ...................................................66 3.2.4 Internetprotokolle im Detail ......................................................67 3.3 Höhere Netzwerkprotokolle......................................................................76 3.3.1 Hypertext Transfer Protocol (HTTP) ..........................................76 3.3.2 File Transfer Protocol (FTP) .......................................................81 3.3.3 Protokolle für E-Mail-Verkehr ....................................................87 3.3.4 Codierungsstandard für E-Mail: MIME ......................................92 3.3.5 Network News Transfer Protocol (NNTP)..................................96
4
Basiswissen Online-Marketing..........................................................................99 4.1 Die Gestaltung von Webseiten .................................................................99 4.1.1 Zehn Regeln für gutes Design ...................................................99 4.2 Online-Marketing ...................................................................................101 4.2.1 Definition ...............................................................................101 4.2.2 Zehn Grundregeln für erfolgreiches Marketing .......................103 4.2.3 Werbung für Online-Angebote ..............................................105 4.2.4 Optimal anmelden .................................................................105 4.2.5 Bannertauschprogramme .......................................................107 4.2.6 Werbenetzwerke.....................................................................108 4.2.7 Attraktive Werbeplätze............................................................108 4.2.8 Kundenbindung .....................................................................109 4.3 Domainnamen .......................................................................................110 4.3.1 Namen im Internet .................................................................110 4.3.2 Alternativen ............................................................................112 4.3.3 Konventionell werben.............................................................113
5
Basiswissen HTML ...........................................................................................115 5.1 Die Sprache des Web – HTML ................................................................115 5.1.1 Einführung in HTML ...............................................................115 5.1.2 Kleine Fallen in HTML .............................................................117 5.2 HTML-Grundlagen .................................................................................119 5.2.1 HTML pur ...............................................................................119 5.2.2 Ein bisschen Farbe ..................................................................120 5.2.3 Text und Layout .....................................................................121 5.2.4 Linien .....................................................................................125 5.2.5 Formatierungen......................................................................126 5.2.6 Sonderzeichen ........................................................................131 5.2.7 Bilder und Hyperlinks einbinden .............................................132
Teil II: Webseiten-Gestaltung mit FrontPage ....................................187 6
Arbeiten mit FrontPage-Webs ........................................................................189 6.1 Ein neues Web erstellen..........................................................................190 6.1.1 Die Webstruktur .....................................................................193 6.2 Die erste Seite ........................................................................................195 6.3 Änderungen am Web vornehmen ..........................................................196 6.3.1 Erstellen neuer Seiten..............................................................196 6.3.2 Erstellen neuer Ordner ............................................................197 6.3.3 Umbenennen von Ordnern und Dateien.................................197 6.3.4 Verschieben und Löschen von Dateien und Ordnern ..............197 6.4 Verwendung von Unterwebs ..................................................................199 6.5 Die Webvorlagen ...................................................................................200 6.5.1 Die Vorlage Leeres Web ..........................................................201 6.5.2 Die Vorlage Persönliches Web.................................................201 6.5.3 Die Vorlage Projekt-Web .........................................................204 6.5.4 Die Vorlage Kundenunterstützungs-Web ................................210 6.6 Die Web-Assistenten...............................................................................213 6.6.1 Der Web-Assistent für Firmenpräsenz im Internet....................213 6.6.2 Der Diskussionsweb-Assistent..................................................225 6.7 Webs importieren und ergänzen ............................................................231 6.7.1 Der Webimport-Assistent ........................................................231 6.7.2 Dateien, Ordner und Webs importieren ..................................235
8
Inhaltsverzeichnis
6.8
6.9
7
Import eines Webs als ein Unterweb.......................................................237 6.8.1 Vorbereitung ..........................................................................237 6.8.2 Ein Unterweb veröffentlichen..................................................238 Konfiguration von Webs .........................................................................240 6.9.1 Allgemeine Optionen..............................................................241 6.9.2 Webparameter........................................................................244 6.9.3 Zugriffsberechtigungen ..........................................................246 6.9.4 Quellcodekontrolle .................................................................247 6.9.5 Erweiterte Verzeichnisstruktur von Webs .................................248
Erstellen und Gestalten von Internetseiten ...................................................251 7.1 Was sind Internetseiten?.........................................................................251 7.1.1 Was ist Hypertext? ..................................................................252 7.1.2 Die Struktur von HTML ...........................................................252 7.1.3 Adressierung von Seiten .........................................................255 7.2 Einstieg in die Seitengestaltung ..............................................................257 7.2.1 Eine neue Seite erstellen .........................................................257 7.2.2 Speichern von Seiten ..............................................................258 7.2.3 Dateitypen in FrontPage .........................................................259 7.3 Seiteneigenschaften ...............................................................................260 7.3.1 Allgemeine Optionen..............................................................261 7.3.2 Hintergrund............................................................................262 7.3.3 Meta-Tags ..............................................................................264 7.3.4 Sprache und Codierung..........................................................269 7.3.5 Arbeitsgruppe.........................................................................270 7.3.6 System- und Benutzervariablen...............................................271 7.4 Text .......................................................................................................271 7.4.1 Besonderheiten von HTML-Text..............................................272 7.4.2 Text eingeben und bearbeiten ................................................274 7.4.3 Absätze und Umbrüche ..........................................................277 7.4.4 Überschriften ..........................................................................280 7.4.5 Zeichenformatierungen ..........................................................281 7.4.6 Zeichenformatierungen ..........................................................286 7.4.7 Spracheinstellungen und Rechtschreibung..............................289 7.5 Grafiken einfügen...................................................................................291 7.5.1 Bilder einfügen .......................................................................292 7.5.2 Die ClipArt-Gallery..................................................................293 7.5.3 Clip Organizer ........................................................................296 7.6 Hyperlinks ..............................................................................................297 7.6.1 Text mit Hyperlinks versehen ..................................................297 7.6.2 E-Mails versenden ...................................................................299 7.6.3 Textmarken ............................................................................300 7.6.4 Hyperlinks an Grafiken ............................................................301 7.6.5 Image Maps ...........................................................................301
Inhaltsverzeichnis
7.7
7.8
9
7.6.6 Rollovers.................................................................................303 7.6.7 Hinter den Kulissen .................................................................304 Seitenvorlagen .......................................................................................306 7.7.1 Vorlagen auswählen ...............................................................307 7.7.2 Neu aus vorhandener Seite .....................................................309 Websites für alle .....................................................................................310 7.8.1 Plattformübergreifende Seitenentwicklung .............................310 7.8.2 Schriftarten.............................................................................312 7.8.3 Browserkompatibilität .............................................................314 7.8.4 Anpassungen für behinderte Internetnutzer ............................317 7.8.5 Hardwarevoraussetzungen......................................................318 7.8.6 Farben ....................................................................................319 7.8.7 Die Geschwindigkeit der Anbindung ......................................321
8
Bilder und Design ...........................................................................................325 8.1 Grundlagen des Designs.........................................................................325 8.2 Bilder in Internetseiten ...........................................................................330 8.2.1 GIF .........................................................................................330 8.2.2 JPEG .......................................................................................333 8.2.3 Andere Formate......................................................................334 8.2.4 Formate im Vergleich..............................................................335 8.3 Bilder vorbereiten und bereitstellen ........................................................336 8.3.1 Bilder digitalisieren .................................................................336 8.3.2 Andere Ressourcen .................................................................337 8.4 Bilder mit FrontPage bearbeiten .............................................................337 8.4.1 Bilder einfügen .......................................................................337 8.4.2 Die Bildeigenschaften festlegen ..............................................338 8.4.3 Bilder in FrontPage bearbeiten ................................................341 8.5 FrontPage-Designs .................................................................................346 8.5.1 Designs zuweisen ...................................................................346 8.5.2 Designs ändern.......................................................................347 8.5.3 Randbereiche definieren .........................................................349
9
FrontPage-Webs veröffentlichen....................................................................351 9.1 Die Fehler-Checkliste ..............................................................................351 9.1.1 Stimmen die Inhalte?..............................................................351 9.1.2 Haben Sie alle rechtlichen Aspekte berücksichtigt?..................355 9.1.3 Ist alles korrekt geschrieben? ..................................................356 9.1.4 Sind alle Seiten verlinkt? .........................................................357 9.1.5 Sind alle Seitentitel richtig benannt? .......................................358 9.1.6 Funktionieren alle Hyperlinks?.................................................359 9.1.7 Welche Schwachpunkte hat Ihr Web? .....................................361 9.1.8 Wie stellen Browser das Web dar?...........................................364 9.1.9 Sind die Seiten bereit für Suchmaschinen?..............................365 9.1.10 Was sagen andere zu Ihrem Web? ..........................................366
10
Inhaltsverzeichnis
9.2
9.3
9.4
9.5 9.6
Seíten für die Veröffentlichung auswählen ..............................................366 9.2.1 Synchronisierung....................................................................367 9.2.2 Seiten zur Veröffentlichung kennzeichnen ..............................367 Das Web veröffentlichen ........................................................................368 9.3.1 Die Daten des Webservers ......................................................368 9.3.2 Optionen für die Veröffentlichung ..........................................369 9.3.3 Server mit Servererweiterungen ..............................................369 9.3.4 Server ohne Servererweiterungen ...........................................370 Andere Veröffentlichungswege...............................................................372 9.4.1 Der Windows-FTP-Client .........................................................373 9.4.2 Andere FTP-Programme..........................................................374 Veröffentlichung auf dem lokalen System ...............................................374 Nach der Veröffentlichung .....................................................................375 9.6.1 Site-Check ..............................................................................375 9.6.2 Anmeldung bei Suchmaschinen..............................................375
Teil III: Fortgeschrittene Webs erstellen ...........................................377 10 Layout und Interaktion ...................................................................................379 10.1 Tabellen .................................................................................................379 10.1.1 Anlegen einer Tabelle .............................................................379 10.1.2 Tabellen bearbeiten ................................................................383 10.1.3 Die Größe von Zellen verändern .............................................386 10.1.4 Tabellen formatieren...............................................................387 10.1.5 Umwandlung von Tabellen und Text ......................................389 10.1.6 Dokumentvorlagen für Tabellen..............................................390 10.2 Formulare ..............................................................................................391 10.2.1 Formulare erzeugen................................................................392 10.2.2 Formulare anpassen................................................................392 10.2.3 Die Formularfelder im Überblick .............................................399 10.2.4 Dokumentvorlagen und Assistenten für Formulare ..................407 10.2.5 Der Formular-Assistent............................................................408 10.3 Frames ...................................................................................................411 10.3.1 Ein Frameset und Seiten anlegen ............................................412 10.3.2 Frames sinnvoll einsetzen........................................................413 10.3.3 Browser ohne Frameunterstützung ansprechen ......................414 10.3.4 Frames teilen und verschachteln .............................................414 10.3.5 Frameeigenschaften anpassen ................................................415 10.3.6 Darstellung der Frames anpassen............................................417 10.3.7 Zielframes für Hyperlinks anlegen ...........................................417 10.4 Listen .....................................................................................................418 10.4.1 Aufzählungen .........................................................................419 10.4.2 Nummerierungen...................................................................420 10.4.3 Definitionslisten ......................................................................421 10.4.4 Listen einsetzen ......................................................................422
erstellt von ciando
Inhaltsverzeichnis
11
11 Stylesheets und Dynamic HTML.....................................................................423 11.1 Stylesheets verstehen .............................................................................424 11.2 Stylesheets verknüpfen und einbetten ....................................................426 11.2.1 Stylesheet-Typen ....................................................................426 11.2.2 Selektoren ..............................................................................427 11.2.3 Externe Stylesheets mit dem Dokument verknüpfen ...............428 11.3 Stylesheets definieren .............................................................................428 11.4 Stylesheets anpassen ..............................................................................430 11.4.1 Zeicheneigenschaften .............................................................430 11.4.2 Absatzeigenschaften ...............................................................432 11.4.3 Rahmeneigenschaften ............................................................433 11.5 Positionierung mit Stylesheets ................................................................435 11.5.1 Relative und absolute Positionierung.......................................435 11.6 DHTML-Effekte .......................................................................................437 11.6.1 Animationseffekte ...................................................................437 11.6.2 Mouseover-Effekte ..................................................................438 11.6.3 Effekte für den Internet Explorer .............................................438 11.6.4 Seitenübergänge ....................................................................440 12 Die FrontPage- Komponenten........................................................................441 12.1 Nutzen und Funktion der Komponenten ................................................441 12.1.1 Komponenteneigenschaften anpassen ....................................443 12.2 Inhaltsverzeichnis ...................................................................................443 12.3 Suchformular .........................................................................................445 12.4 Navigationsleisten ..................................................................................446 12.5 Seitenbanner..........................................................................................448 12.6 Elemente einschließen............................................................................449 12.6.1 Seiten einschließen .................................................................449 12.6.2 Seiten nach Zeitplan einschließen ...........................................450 12.6.3 Bild nach Zeitplan einschließen...............................................451 12.7 Anzeigenwechsler ..................................................................................451 12.8 Hoverschaltfläche ...................................................................................452 12.9 Office-Komponenten..............................................................................453 12.9.1 Office-Tabelle .........................................................................453 12.9.2 Office Diagramm ....................................................................455 12.9.3 Office Pivot Table ...................................................................455 12.10 Weitere Komponenten ...........................................................................456 12.10.1 Zugriffszähler..........................................................................456 12.10.2 Kommentar ............................................................................457 12.10.3 Ersetzen..................................................................................457 12.10.4 Datum und Uhrzeit.................................................................458 12.10.5 Laufschrift...............................................................................459 12.10.6 HTML-Markup ........................................................................460 12.10.7 Java-Applets............................................................................461
12
Inhaltsverzeichnis
12.10.8 12.10.9 12.10.10 12.10.11
Andere Dateiformate einbinden ..............................................462 Video......................................................................................463 ActiveX-Steuerelemente..........................................................464 Entwurfszeit-Steuerelemente...................................................466
Teil IV: FrontPage-Webs erweitern ....................................................469 13 Web-Management mit FrontPage..................................................................471 13.1 Ein Web planen ......................................................................................471 13.1.1 Wieso wollen Sie eine Internetpräsenz errichten? ....................471 13.1.2 Was soll kommuniziert werden?..............................................472 13.1.3 Wer ist die Zielgruppe, wer die Konkurrenz? ...........................472 13.1.4 Wie sollen die Inhalte präsentiert werden? ..............................473 13.1.5 Welche Gestaltungsmittel sind angemessen? ..........................473 13.1.6 Wie sieht die Zeitplanung aus? ...............................................473 13.1.7 Wer arbeitet am Web mit?......................................................474 13.1.8 Welche technischen Erfordernisse gibt es? ..............................474 13.1.9 Welche Kosten verursacht die Web-Site?.................................474 13.1.10 Wie wird die Web-Site bekannt gemacht?...............................475 13.2 Mit der Navigationsansicht arbeiten .......................................................475 13.2.1 Eine Webstruktur erzeugen .....................................................476 13.2.2 Die Ansicht anpassen ..............................................................477 13.3 Aufgabenverwaltung ..............................................................................477 13.3.1 Kategorien..............................................................................478 13.3.2 Kategorien erstellen und verwalten .........................................479 13.3.3 Mehrautorenumgebung .........................................................479 13.3.4 Prüfstatus ...............................................................................480 13.3.5 Aufgaben erstellen ..................................................................480 13.3.6 Berichte ..................................................................................481 13.3.7 Aufgaben erledigen und prüfen ..............................................483 14 Datenbankanbindung und Programmierung ................................................485 14.1 Datenbankpraxis ....................................................................................485 14.1.1 Das Datenbankprojekt ............................................................485 14.1.2 Planung der Datenbankstruktur ..............................................485 14.1.3 Entwurf der Seiten und Formulare ..........................................486 14.1.4 Aktivierung des Datenbankzugriffs ..........................................487 14.1.5 Erweiterung durch Active Server Pages ...................................491 14.2 Datenbankfunktionen im Detail..............................................................493 14.2.1 Verbindung zu einer Datenbank .............................................494 14.2.2 Formulare und Datenbanken ..................................................496 14.3 Umgang mit den generierten Codes ......................................................498 14.3.1 Die Ergebnisseite ....................................................................499 14.3.2 Formularauswertung...............................................................499 14.3.3 Interaktiver Datenbankeditor ..................................................500
Inhaltsverzeichnis
13
15 Programmierung von Webseiten ...................................................................503 15.1 Active Server Pages ................................................................................503 15.1.1 Die Programmierung mit VBScript ..........................................503 15.1.2 Eine Einführung in VBScript ....................................................507 15.1.3 Programmieren mit VBScript ..................................................511 15.2 Übersicht Bibliotheken ...........................................................................515 15.2.1 Zusätzliche allgemeine Bibliotheken........................................515 15.2.2 Objekte des Webservers..........................................................516 15.2.3 Mitgelieferte Komponenten ....................................................517 15.3 Datenspeicherung ..................................................................................526 15.3.1 Kollektionen mit Scripting.Dictionary......................................526 15.3.2 Dateizugriff.............................................................................528 15.4 Webserver-Bibliothek..............................................................................538 15.4.1 Die Objekte Request und Response.........................................538 15.4.2 Daten aus einem Formular entnehmen ...................................540 15.4.3 Daten mit Hilfe des URL übertragen........................................544 15.4.4 Weiterleitung (Redirection) .....................................................545 15.4.5 Wie Sie Sessions benutzen können..........................................546 15.4.6 Applikationen .........................................................................552 15.5 Datenbankzugriff ...................................................................................556 15.5.1 Einführung in ADO .................................................................556 15.5.2 Einführung in SQL ..................................................................558 15.5.3 ADO praktisch verwenden ......................................................575 15.6 Die FrontPage-Skriptbibliotheken ...........................................................584 15.6.1 Übersicht FrontPage-Skriptbibliotheken ..................................585 15.6.2 Die Datei global.asa eines FrontPage-Webs.............................585 15.6.3 Die Formularbibliothek fpdbform.inc ......................................588 15.6.4 Die Datenbankbibliothek fpdblib.inc.......................................590 15.6.5 Die Datenbankbibliothek fpdbrgnX.inc...................................594 15.7 Der Microsoft Skript-Editor .....................................................................601 15.7.1 Übersicht über die Entwicklungsumgebung ............................601 15.7.2 Seiteneigenschaften: Einstellungen für ASP .............................604
Teil V: Anhang ....................................................................................607 A
Die FrontPage-Werkzeuge..............................................................................609 A.1 FrontPage 2002 .....................................................................................609 A.1.1 Standard (Kapitel 1, 6 und 7) .................................................609 A.1.2 Format (Kapitel 7)...................................................................611 A.1.3 Berichte (Kapitel 6) .................................................................612 A.1.4 DHTML-Effekte (Abschnitt 11.4) .............................................612 A.1.5 Formatvorlage (Kapitel 11) .....................................................612
HTML-Referenz ...............................................................................................617 B.1 HTML 3.2...............................................................................................617 B.1.1 HTML 3.2-Elemente................................................................617 B.1.2 Übersicht und Einteilung ........................................................619 B.1.3 HTML 3.2-Elemente................................................................619 B.1.4 Liste der Elemente ..................................................................638 B.2 HTML 4..................................................................................................638 B.2.1 HTML 4 – Einführung .............................................................638 B.2.2 Liste der Elemente ..................................................................639 B.2.3 Neue strukturelle Elemente in HTML 4....................................640 B.3 Cascading Style Sheets - CSS..................................................................646 B.3.1 CSS – Klassenübersicht ...........................................................646 B.3.2 Die CSS-Referenztabellen........................................................647 B.3.3 Weitere Informationen............................................................653
C
Angebote im Internet .....................................................................................655 C.1 Offizielle Web Sites.................................................................................655 C.2 Newsgroups zu FrontPage......................................................................655 C.3 Tipps & Tricks ........................................................................................656 C.4 Englische Web Sites zum Thema ............................................................656 C.5 Themes (FrontPage-Designs) ..................................................................656 C.6 FrontPage-Add-ins..................................................................................657 C.7 Newsgroups zu Internet-Themen ...........................................................657 C.7.1 Deutschsprachige Newsgroups...............................................657 C.7.2 Englischsprachige Newsgroups ...............................................657 C.8 Bildarchive .............................................................................................658 C.8.1 Online-Anbieter ......................................................................658 C.8.2 Anbieter von Clip-Art-Sammlungen ........................................658 C.9 Online-Recht ..........................................................................................658 C.9.1 Newsgroups ...........................................................................658 C.10 Suchmaschinen und Verzeichnisse..........................................................659 C.11 Software und Services ............................................................................659
D
Die Autoren.....................................................................................................661 Stichwortverzeichnis.......................................................................................663
I Einführung und Installation Díe Frage mag Ihnen unsinnig erscheinen. Wer kauft sich schon ein FrontPage-Buch und weiß nicht, was das ist? Die Beantwortung nimmt trotzdem einigen Raum ein. Neueinsteiger erfahren, was sie mit FrontPage machen können und ob der Einsatz für einen bestimmten Zweck lohnt. Umsteiger von der 98er oder der 2000er Version – und solche, die es werden wollen – lernen die Vorteile und Erweiterungen kennen. FrontPage ist ein Werkzeug zur Entwicklung von Hypertext-Systemen, die im Folgenden als Webs bezeichnet werden. Das Programm unterstützt Sie beim Design, bei der Verknüpfung von Seiten und der Erstellung des Layouts. Es existieren Hilfsmittel zur Kontrolle auf fehlerhafte Verknüpfungen, der Versionskontrolle und zum Upload der Daten auf einen Server. Nicht zuletzt unterstützt FrontPage die Entwicklung von Skripten – sowohl auf dem Server als auch für den Browser.
erstellt von ciando
FrontPage ist ein komplexes Autorenwerkzeug, das sich vielfältig in die Microsoft Office Umgebung einklinkt. Viele Dialoge sind vereinheitlicht und teilweise mit anderen Programmen identisch. Entsprechend können sich Einstellungen in FrontPage auch auf andere Teile der Office-Suite auswirken, auch auf den Internet Explorer. FrontPage und der Internet Explorer Die Betrachtung der fertigen Seiten wird in aller Regel mit dem Internet Explorer erfolgen. An dieser Stelle sei gleich gesagt, dass Sie auf jeden Fall auch den Netscape Navigator installieren sollten, um Ihre Layouts auf „Browserfestigkeit“ zu prüfen. Trotzdem ist der Internet Explorer ein wesentlicher Bestandteil der Entwicklungsumgebung. Auf die Besonderheiten im Umgang wird in den entsprechenden Abschnitten hingewiesen.
1
Was ist FrontPage?
1.1
Neu in FrontPage 2002
Wenn Sie bereits mit FrontPage 2000 gearbeitet haben, werden Sie sich sicherlich sehr gut zurechtfinden in FP 2002. Die Bedienung ist grundsätzlich gleich geblieben wurde und lediglich den neuesten Windows-Versionen angepasst. Der Schritt von FP 98 nach FP 2002, in dem die beiden Komponenten FrontPage Editor und FrontPage Explorer zu einem einzigen Programm zusammengefasst wurden, war wesentlich umfangreicher und mit größerem Aufwand an Umstellung verbunden. Das Arbeiten mit FP 2002 ist im Prinzip genau gleich geblieben. Die neue Version hat an Umfang zugelegt. So gibt es beispielsweise noch das eine oder andere Design (früher: FrontPage Themen) mehr zur Auswahl und einige neue Servererweiterungen. Am auffälligsten ist sicherlich das neue Wording in der deutschen Version von FrontPage 2002. Die Benennung von Menüpunkten, Schaltflächen, Funktionen etc. hat sich in der neuen Version an vielen Stellen geändert, was oft von zweifelhaftem Nutzen ist. Es heißt nun zum Beispiel „Grafik“, was vorher „Bild“ hieß und aus „Spread Sheet“ wurde die „Office-Tabelle“. Gemeint ist natürlich nach wie vor dasselbe.
1.1.1
Navigation
Die Navigation zwischen den einzelnen Bearbeitungsfenstern erfolgt über die graue Werkzeugleiste ANSICHTEN an der linken Seite: 왘 Seite. In dieser Ansicht bearbeiten Sie die Seite in zwei Modi (Im WYSI-
WYG1-Editor oder im HTML-Quellcode). Eine dritte Ansicht bietet eine Vorschaufunktion. Der Wechsel erfolgt mit drei Registerkarten im Bearbeitungsfenster:
왘 Ordner. Diese Ansicht zeigt alle Ordner Ihres Projekts an und erlaubt die
Navigation. 왘 Berichte. In dieser Ansicht können Sie sich die Ergebnisse der verschiede-
nen Berichte anschauen. Berichte bieten eine gute Unterstützung für die Fehlersuche.
1. WYSIWYG = What You See Is What You Get
17
1 Was ist FrontPage? 왘 Navigation. Wenn Sie Webseiten mit den Navigationselementen von
FrontPage aufbauen, können Sie hier die Navigation grafisch entwerfen. 왘 Hyperlinks. Alle Hyperlinks der Site finden Sie in der dieser Ansicht. Ein
gutes Werkzeug zur Fehlersuche. 왘 Aufgaben. Ob im Team oder alleine: Definieren Sie alle Aufgaben, und
schon verfügen Sie über ein einfaches, aber leistungsfähiges Projektmanagementwerkzeug.
1.1.2
Neue Seite oder neues Web
Die Schritte zum Öffnen neuer Seiten oder ganzer Webs sind in FrontPage 2002 neu angeordnet. Ob Sie nur eine leere neue Seite anlegen wollen oder ein ganzes Web mit Hilfe eines Assistenten – alles das geht über das Menü DATEI | NEU | SEITE ODER WEB. Abbildung 1.1: Neue Seite oder Web im zweiten Untermenü
Es öffnet sich ein Fenster, im Aussehen ganz den neuesten Windows-Versionen entsprechend. Hier finden Sie auf einen Blick unter anderem die zuletzt aufgerufenen Seiten, die Vorlagen für eine leere Seite oder ein leeres Web und die Links auf eigene und vorgegebene Seiten- und Webvorlagen.
18
Neu in FrontPage 2002 Abbildung 1.2: Das Fenster „Neue Seite oder neues Web“ – mit neuem Gesicht
Bereits das Fenster für die Seitenvorlagen beispielsweise kommt dann aber wieder im altbekannten Windows-Gewand. Man ist sich offenbar noch nicht vollständig im Klaren darüber, ob das neue Layout gut oder schlecht ist. Bei FrontPage dürfen Sie es sich aussuchen, hier gibt es beides. Abbildung 1.3: Das Fenster „Seitenvorlagen“ – Altbekanntes
19
1 Was ist FrontPage?
1.1.3
Dynamic HTML
Die direkte Unterstützung für Dynamic HTML gibt es seit FrontPage 2000. Dabei werden allerdings bei weitem nicht alle Möglichkeiten ausgereizt, die DHTML bietet. Die einstellbaren Effekte beschränken sich auf die Animation von Elementen oder der gesamten Seite. Hervorzuheben ist die Unterstützung beider Browser – die Animationen laufen auch auf Netscape Navigator (ab Version 4). Browser mit der Versionsnummer 3 oder kleiner stellen die Elemente statisch dar. Abbildung 1.4: Funktionsleiste für DHTML-Effekte
Die Effekte werden in externen JavaScript-Dateien zur Verfügung gestellt und mit <SCRIPT>-Tags eingebunden. DHTML-Profis können diese Elemente leicht editieren.
1.1.4
Script Editor
Neu ist der Microsoft Script Editor, ein komplettes Entwicklungswerkzeug für client- und serverseitige Skripte. Wenn Sie Visual InterDev 6.0 (VID) kennen, werden Sie überraschende Ähnlichkeiten feststellen – es ist praktisch ein VID-Derivat. Dies soll kein Nachteil sein, im Gegenteil, bislang galt VID als das Profiwerkzeug für Webentwickler. Sie können sich mit dem Script Editor auch völlig von FrontPage lösen und Seiten „von Hand“ entwickeln. Dies ist allerdings nur auf einem sehr hohen Niveau möglich. Abbildung 1.5: Microsoft Script Editor: Werkzeug für Profis
20
Struktur und Aufbau
Hervorzuheben ist die Syntaxanzeige, die eine farbliche Markierung für VBScript, JavaScript und HTML bietet. Es gibt einen integrierten Debugger und komfortable Dialoge für Eigenschaften von Elementen. In Kapitel 15 wird der Script Editor ausführlich besprochen. Der Einsatz lohnt, denn die Möglichkeit, nun auch mit „richtigen“ Skriptsprachen programmieren zu können, ist für den professionellen Webdesigner äußerst wertvoll. Gerade mit dem Script Editor hat FrontPage das Image des primitiven Allerweltsbaukastens gründlich abgelegt.
1.2
Struktur und Aufbau
FrontPage ist vom einfachen Werkzeug zu einem komplexen Produkt herangewachsen. Damit verbunden sind komplexe und verschachtelte Dialoge und Menüs. Nicht immer ist es einfach, auf Anhieb den richtigen Befehl zu finden. In diesem Kapitel finden Sie alle wichtigen Dialogfelder und Menüs mit Erläuterungen. Sie können so schnell beim Durchblättern eine Funktion ausfindig machen und sofort ausführen.
1.2.1
Menüsystem
Das Dateimenü enthält alle dateiorientierten Funktionen. Dabei wird zwischen lokalen Zugriffen und dem Webserver unterschieden. Lokal arbeiten Sie mit: 왘 ÖFFNEN 왘 SCHLIESSEN 왘 SPEICHERN, SPEICHERN UNTER, ALLE SPEICHERN 왘 ZULETZT GEÖFFNETE DATEIEN 왘 IMPORTIEREN
Auf dem Webserver (egal, ob lokal installiert oder nicht), arbeiten Sie mit folgenden Funktionen: 왘 WEB ÖFFNEN, WEB SCHLIEßEN 왘 WEB VERÖFFENTLICHEN 왘 EXPORTIEREN 왘 ZULETZT GEÖFFNETE WEBS
Das Menü BEARBEITEN enthält vor allem Funktionen, die beim Editieren einer HTML-Seite benötigt werden. Die Funktionen AUSCHECKEN und EINCHECKEN steuern die Bearbeitung einer Datei durch mehrere Autoren.
21
1 Was ist FrontPage?
Das Menü ANSICHT steuert die Anzeige der einzelnen Bereiche der FrontPage-Oberfläche. Die hier untergebrachten Befehle haben keinen Einfluss auf die HTML-Seiten oder Auswirkungen auf den Server. Das Menü EINFÜGEN dient der Kontrolle von Elementen auf den editierten Seiten. Sie können sowohl HTML-Tags einfügen als auch Zeichen und Daten (beispielsweise Datum und Uhrzeit). Über dieses Menü ist auch der Zugriff auf Formulare, Datenbanken und FrontPage-Funktionen möglich. Einige Elemente verlangen eine spezielle serverseitige Unterstützung. Wenn diese nicht gegeben ist, sind die Einträge deaktiviert. Das Menü FORMAT dient der Formatierung von HTML-Elemente oder dem Steuern spezieller Effekte. Sie haben auch Zugriff auf Cascading Style Sheets (CSS). Inwieweit einige Funktionen aktiv sind und auch Auswirkungen haben, hängt von den aktuell auf der Seite vorhandenen und markierten Elementen ab. Im Menü EXTRAS finden Sie Funktionen, die bei der normalen Bearbeitung von Seiten nicht unmittelbar benötigt werden. Wichtig sind einige grundlegende Einstellungen zum erstellten Web, die im nächsten Abschnitt näher erläutert werden. Das Menü TABELLE dient der Erzeugung und Bearbeitung von Tabellen. Die Optionen sollten keiner weiteren Erläuterung bedürfen – Sie finden alles, was zur Nutzung von Tabellen in HTML notwendig ist. Zwei weitere Menüs sind FRAMES und FENSTER. Sie können mit FRAMES auf Framestrukturen zugreifen, während FENSTER die in FrontPage geöffneten Teilfenster verwaltet und auf das Web selbst keinen Einfluss hat.
1.2.2
Der Editorbereich
Der Editorbereich kann in mehrere Teile gegliedert werden. Links werden eine oder zwei Leisten mit Schaltflächen eingeblendet, die den direkten Zugriff auf elementare Komponenten ermöglichen. Diese wurden bereits im letzten Abschnitt vorgestellt. Für den schnellen Zugriff auf bestimmte Funktionen können Sie die Symbolleisten einsetzen. Die Symbolleisten Abbildung 1.6: Alle Schaltflächen auf einen Blick
22
Struktur und Aufbau
Die folgenden Symbolleisten stehen zur Verfügung: 왘 STANDARD 왘 FORMAT 왘 BERICHTE 왘 DHTML-EFFEKTE 왘 GRAFIKEN 왘 NAVIGATION 왘 POSITIONIERUNG 왘 STIL 왘 TABELLEN 왘 WORDART 왘 ZEICHNEN
Sie können die Symbolleisten leicht anpassen. Standardmäßig stehen nicht alle Befehle zur Verfügung – die Symbolleisten stellen nur eine Auswahl besonders häufig genutzter Befehle bereit. Die Optionen in der Leiste ANSICHTEN haben folgende Bedeutung: 왘 SEITE. Zeigt im Editor die aktuelle Seite zur Bearbeitung an. 왘 ORDNER. Gibt eine Übersicht über die Verzeichnisstruktur des Webs. 왘 BERICHTE. Erstellt Berichte zu bestimmten Elementen des Webs. Dies
dient vor allem der Fehlerkontrolle. Folgende Berichte sind möglich: 왘 ALLE DATEIEN. Zeigt alle verwendeten Dateien an. 왘 KÜRZLICH HINZUGEFÜGTE DATEIEN. 왘 KÜRZLICH GEÄNDERTE DATEIEN. 왘 ÄLTERE DATEIEN. 왘 UNVERKNÜPFTE DATEIEN. Diese Dateien werden normalerweise nicht
왘 왘 왘 왘
왘
angezeigt. Prüfen Sie, ob sich „Dateileichen“ darunter befinden. Es ist normal, wenn Sie hier Datenbanken und teilweise auch Skriptdateien finden. LANGSAME DATEIEN. UNTERBROCHENE HYPERLINKS. Der Bericht zeigt Hyperlinks an, die ins Leere führen. KOMPONENTENFEHLER. PRÜFSTATUS, ZUGEWIESEN, KATEGORIEN. Diese drei Optionen können alternativ aktiviert werden, um den Status von Dateien anzuzeigen, an denen mehrere Autoren arbeiten. VERÖFFENTLICHEN. Dieser Bericht zeigt an, wann zuletzt veröffentlicht wurde und welche Dateien noch veröffentlicht werden müssen.
23
1 Was ist FrontPage? Abbildung 1.7: Übersichtsbericht für eine Site
왘 NAVIGATION. Wenn Sie in FrontPage Navigationselemente erstellen, kön-
nen Sie hier eine grafische Darstellung der Site einsehen. 왘 HYPERLINKS. Auch das ist eine grafische Abbildung der Site, die auf Basis
der in den Seiten enthaltenen Hyperlinks erstellt wird (Abbildung 1.8). 왘 AUFGABEN. Wenn Sie in Teams arbeiten, können Sie hier die Aufgaben-
stellungen koordinieren. Aber auch für den Einzelkämpfer kann die Nutzung bei umfangreichen Projekten hilfreich sein. Abbildung 1.8: Ansicht der Hyperlink-Struktur einer Site
24
Dialoge
1.3
Dialoge
1.3.1
Die wichtigsten Dialogfelder
FrontPage hat einige Dialogfelder, die zwar nur selten benötigt werden, aber elementare Einstellungen enthalten. Erfahrungsgemäß beginnt jedes neue Web mit einer Odyssee durch die Menüs. Sie finden deshalb nachfolgend eine Übersicht über die Dialogfelder.
1.3.2
Grundeinstellungen des Programms
Anpassen der Oberfläche FrontPage bietet eine fast unbegrenzte Anpassungsmöglichkeit für die Oberfläche. Wählen Sie im Menü EXTRAS den Befehl ANPASSEN. Drei Registerkarten stehen zur Auswahl:
Unbegrenzte Anpassungsmöglichkeiten
왘 SYMBOLLEISTEN. Hiermit kontrollieren Sie die angezeigten Symbolleisten. 왘 BEFEHLE. Ein etwas irreführender Name. Sie können hier Menübefehle
auswählen und direkt in das Menü ziehen, um ein eigenes Menüsystem zusammenzustellen. 왘 OPTIONEN. Diese Registerkarte enthält einige Einstellungen, die die An-
zeige betreffen. Abbildung 1.9: Anpassen der Oberfläche von FrontPage 2002
25
1 Was ist FrontPage?
Auch der Menüpunkt OPTIONEN im Menü EXTRAS verbirgt weitere Einstellungen zur Oberfläche. Die Aufteilung zwischen Optionen und Anpassung ist schwer nachvollziehbar. Offensichtlich bezieht sich OPTIONEN mehr auf das Verhalten von Programmelementen und ANSICHT auf die Gestaltung. Es stehen vier Registerkarten mit folgenden Optionen zur Verfügung: 왘 ALLGEMEIN. Hier stellen Sie unter anderem das Startverhalten ein. 왘 EDITOR KONFIGURIEREN. Hier werden Dateierweiterungen mit Editoren
verknüpft. 왘 BERICHTSANSICHT. Auf Berichte wurde im letzten Abschnitt bereits hin-
gewiesen. Das Verhalten einiger Berichte war nicht eindeutig, die Einstellungen, auf denen die Auswahl der Berichte basiert, wird hier vorgenommen. 왘 VERÖFFENTLICHEN. Hier können Sie allgemeine Voreinstellungen zum
Veröffentlichen Ihres Webs festlegen. Ferner finden Sie hier den Zugang zur Protokolldatei, die alle Änderungen protokolliert. Abbildung 1.10: Steuerung der Berichtsansicht
1.3.3
Seitenoptionen für ein Web
Das Dialogfeld heißt SEITENOPTIONEN – ein weiteres Beispiel offensichtlich unzutreffender Benennung. Fast alle Einstellungen unter EXTRAS | SEITENOPTIONEN gelten für das gesamte bearbeitete Web.
26
Dialoge
Kompatibilität Frühere Versionen von FrontPage boten alle Funktionen an – ohne Rücksicht auf Serverumgebungen und Browser, die nicht damit umgehen konnten. Sie mussten selbst darauf achten, nur bestimmte Befehle zu verwenden. Mit dem Dialog KOMPATIBILITÄT können Sie FrontPage 2002 veranlassen, nur bestimmte Funktionen anzubieten.
Alle Browser werden unterstützt
Der erste Teil betrifft browser- und serverseitige Optionen: 왘 BROWSER. Wählen Sie hier aus, für welche Browser Sie entwickeln. 왘 BROWSERVERSIONEN. Hier geben Sie an, ab welcher Browserversion Ihre
Seiten lesbar sein sollen. 왘 SERVER. Diese Einstellung betrifft die serverseitige Unterstützung. Wenn Sie diese Angabe nicht kennen, wählen Sie BENUTZERDEFINIERT.
Im unteren Teil werden konkretere Angaben verlangt: 왘 ACTIVEX-STEUERELEMENTE. Diese Optionen lässt ActiveX zu. Damit
schränken Sie die Verwendung der Seiten auf den Internet Explorer ein. 왘 VBSCRIPT. Dies betrifft die browserseitige Verwendung der Skriptspra-
che VBScript. Auch mit dieser Option schränken Sie die Verwendung der Seiten auf den Internet Explorer ein. 왘 JAVASCRIPT. Diese Skriptsprache sprechen alle modernen Browser.
Abbildung 1.11: Einstellung der Kompatibilität mit bestimmten Umgebungen
27
1 Was ist FrontPage? 왘 JAVA-APPLETS. Java sollten auch alle neueren Browser verarbeiten kön-
nen. 왘 DYNAMIC HTML. Dieses Feature wird nur von Browsern ab Version 4.x
unterstützt, teilweise auch da nur unvollkommen. Testen Sie Ihre Seiten auf jeden Fall auf den wichtigsten Browsern. 왘 FRAMES. Aktivieren Sie dieses Kontrollkästchen, wenn Sie mit Frames ar-
beiten möchten. 왘 CSS 1.0 UND CSS 2.0. Diese beiden Optionen ermöglichen die Verwen-
dung von Cascading Style Sheets. CSS 2.0 wird auch von den neuesten Browsern nicht perfekt umgesetzt; prüfen Sie die Seiten sorgfältig auf allen Zielsystemen. 왘 ACTIVE SERVER PAGES (ASP). Die einzige Option, die den Server betrifft.
Aktivieren Sie dieses Kontrollkästchen, wenn der Server ASP unterstützt (das ist zumindest bei allen Versionen ab 3.0 des IIS und des PWS der Fall). Sie benötigen diese Funktionalität für den Datenbankzugriff. Alle Optionen ändern nichts an bestehenden Seiten, sondern führen nur zur Deaktivierung entsprechender Menübefehle. Sie können also nicht im Nachhinein überprüfen, ob ein Web bestimmte Kompatibilitätsansprüche erfüllt. Hier hilft nur der Test auf dem Zielsystem. Editoroptionen Passen Sie den Editor an!
Die Darstellung des HTML- oder Skriptcodes erfolgt im Editor mit Hilfe von Farben. Die farbliche Darstellung erleichtert enorm die Fehlersuche. Auf der Registerkarte FARBCODIERUNG können Sie die Zuordnung der Farben zu bestimmten Befehlsgruppen ändern. Wie der HTML-Code erscheint, kann ebenfalls umfangreich eingestellt werden. Das Dialogfeld HTML-QUELLE lässt folgende Einstellungen zu: 왘 BEIM SPEICHERN BESTEHENDE HTML ERHALTEN. Der Code, den Sie von
Hand eingeben oder aus vorhandenen Dateien laden, wird nicht verändert. Sie sollten diese Option unbedingt aktiviert lassen. 왘 UNTER VERWENDUNG DER FOLGENDEN REGELN NEU FORMATIEREN. Diese
Einstellung führt zu einigen Eingriffen von FrontPage in die Seite. Bei reinem HTML mag dies funktionieren, komplexe Seiten werden aber manchmal zerstört. 왘 FORMATIERUNG. In dieser Gruppe können Sie einstellen, wie der HTML-
Code auf der Seite erscheint. Die Liste der Tags bezieht sich auf die Angaben ZEILENWECHSEL und ermöglicht die übersichtliche Anordnung auf der Seite. Der Quellcode wird dadurch lesbarer. Denken Sie daran, dass Leerzeichen und Zeilenumbrüche vom Browser zwar ignoriert werden, die Seite aber unter Umständen erheblich vergrößern.
28
Dialoge Abbildung 1.12: Farbcodierung für den Quelltexteditor
Abbildung 1.13: Optionen für die Anordnung von HTML in der Seite
Das nächste Dialogfeld, STANDARDSCHRIFTART, stellt den Basisfont der Seite ein. Dies hat wieder nichts mit der Anzeige im Editor zu tun, auch in dieser Beziehung ist die Zusammenstellung der Dialoge schon eigenartig. Für „normale“ Anwendungen ist die Einstellung US/Westeuropäisch zu verwenden.
29
1 Was ist FrontPage? Abbildung 1.14: Einstellung der Standardschriftart und -fonts
Das nächste Dialogfeld enthält die Standardvorgaben für die Miniaturansicht. Dieses Feature erzeugt eine verkleinerte Kopie eines Bildes und legt einen Hyperlink von der Kopie zum Original an. Die Vorgaben, wie der Bildeditor die Miniaturansicht erstellt, werden hier angegeben. Abbildung 1.15: Standardeinstellungen für die Miniaturansicht
30
Dialoge
Das letzte Dialogfeld mit dem vielsagenden Titel ALLGEMEIN wirkt sich wieder indirekt auf eingegebene Daten aus. Sie können hier die folgenden Optionen verwenden: 왘 ZUM POSITIONIEREN DIV UND SPAN-TAGS VERWENDEN. Diese Option ist
nur zutreffend, wenn Sie mit CSS arbeiten. Die Style-Befehle werden dann in den neutralen HTML-Tags untergebracht. 왘 FORMULARFELDER AUTOMATISCH MIT EINEM FORMULAR EINSCHLIESSEN.
Wenn Sie Formularfelder erzeugen, werden diese automatisch mit umgebenden Listing 5.27: Ein Formular bildet den Rahmen für Eingabefelder
HTML selbst kann nur bei der Darstellung helfen, ohne eine serverseitige Unterstützung können Sie die Eingaben nicht nutzen. Der einzige sinnvolle Befehl ist eine in allen neueren Browsern verwendbare Funktion zum Absenden von E-Mails. Um mit dem Formular auch arbeiten zu können, muss eine Aktion ausgelöst werden. Dazu wird zusätzlich ein Schalter erzeugt, der dann das im Tag Listing 5.28: Ein einfaches Formular zum Versenden von E-Mail
Diese Anwendung ist einfach, aber nicht flexibel. Ein Formular können Sie verwenden, um Skripte auf dem Server zu starten: Listing 5.29: Mail-Formular mit verschiedenen Auswahloptionen
Geben Sie den Quellcode ein und testen Sie die Funktion. Abbildung 5.8: Ein einfaches Formular ist der erste Schritt zur Interaktion
Weitere Elemente: Datenlisten Neben den -Elementen gibt es weitere Formularelemente, die eigene Tags verwenden. Um aus vorgegebenen Daten auszuwählen, werden Listenfelder benutzt: <TITLE>Listen Listing 5.30: Eine einfache Auswahlliste
142
HTML-Grundlagen
Das Optionsfeld kennt noch das zusätzliche Attribut SELECTED. Damit kann eine Vorauswahl eingestellt werden. Die Optionsliste mit <SELECT> kann in eine Liste verwandelt werden, die mehrzeilig erscheint, indem der Parameter SIZE= eingefügt wird. Diese Form ist eine Alternative zu langen Serien von Kontrollkästchen. In diesem Zusammenhang bietet sich auch das Attribut MULTIPLE an. Somit ist eine Mehrfachauswahl möglich. Darstellung im Browser Alle Elemente werden in dem Format dargestellt, wie es das zugrunde liegende Betriebssystem, auf dem der Browser läuft, erfordert. Damit wird das Design der Seite stärker systemabhängig. Bei der Mehrfachauswahlliste kommt noch hinzu, dass die Handhabung der Auswahl mehrerer Einträge auch vom Betriebssystem abhängt. Unter Windows ist dazu die Taste (Strg) zu drücken, beim Macintosh die Command-Taste. <TITLE>Mehrfachlisten Listing 5.31: Umfangreiche Auswahlliste
Textfelder Bei vielen Formularen besteht die Möglichkeit, längere Texte einzugeben. Das einfache -Feld kennt keine Variante, die mehr als eine Zeile umfassen kann. Um trotzdem bequem lange Texte eingeben zu können, gibt es das Tag Listing 5.32: Textfeld, das an ein ASP-Skript gesendet wird
Dieses Tag ist wieder ein Container. Wenn der Inhalt des Containers leer ist, erscheint ein leeres Textfeld. Es kann auch ein beliebiger Text enthalten sein, der als Standardwert schon im Textfeld steht. Der Nutzer kann diesen Standardtext löschen oder verändern. Die Parameter COLS und ROWS geben die Größe des Feldes an. Die Werte sind, analog zu den Input-Feldern, in der Ausdehnung in Zeichen angegeben. Sie können hier keine Prozentwerte einsetzen. HTML-Tags können nicht interpretiert werden, das Feld kann nur reinen Text verarbeiten: Dieser Text erscheint fett und rot. Listing 5.54: Verstecken von Style-Definitionen vor älteren Browsern
Browser, die etwas mit CSS anfangen können, sind intelligent genug, um auch in die Kommentare „hineinzusehen“.
167
5 Basiswissen HTML
Die Deklaration kann gleichzeitig für mehrere Attribute und mehrere Tags vorgenommen werden: <TITLE>CSS richtig anwenden <STYLE> H1,H2 {font-style: italic; font-size: 20pt; font-family: Arial; background: yellow}
Dieser Text erscheint groß, kursiv und in Arial
Auch dieser Text erscheint so!
Listing 5.55: Weitere Formatierungen mit CSS
Der eigentliche Fortschritt liegt in den layouttypischen Angaben mit Schriftgrößen in Punkt oder Fontfamilien. Sie können solche Definitionen für alle Container-Tags definieren, auch
und
. In den meisten Fällen wird es aber nicht viel Sinn machen, das Verhalten eines bestimmten Tags im gesamten Dokument zu ändern. CSS bieten deshalb die Möglichkeit, Klassen zu definieren: <TITLE>CSS richtig anwenden <STYLE>
Dieser Text erscheint groß, fett und in Arial
Dieser Text erscheint kleiner, kursiv und in
168
Cascading Style Sheets
Times
Listing 5.56: Klassendefinitionen erleichtern die Organisation
Jetzt können Sie das eine oder andere
immer wieder verwenden und auch auf die ursprüngliche, nicht umdeklarierte Variante zurückgreifen. Obwohl das alles schon recht fortschrittlich ist, stört die enge Kopplung an HTML manchmal. Klassen können deshalb auch frei, das heißt, ohne Bindung an ein bestimmtes Tag deklariert werden:
<TITLE>CSS richtig anwenden <STYLE>
Dieser Text erscheint groß, fett und in Arial
Eintrag eins
Eintrag zwei
Listing 5.57: Anwendungsbeispiel mit Listen
Achten Sie auf den Punkt vor dem Klassennamen in der Deklaration. Die Verwendung bietet zwar gewisse Freiheiten, erleichtert aber kaum die Programmierung der Seite. Dafür gibt es kontextsensitive Deklarationen.
5.3.2
CSS im Detail
Sie können Style Sheets auf vier verschiedenen Wegen benutzen: 왘 Innerhalb der HTML-Tags 왘 Als Definitionsdatei innerhalb der HTML-Datei 왘 Als verbundene externe Style-Datei 왘 Als importierte (eingefügte) Style-Datei
169
5 Basiswissen HTML
Style-Attribute in HTML-Tags Diese Syntax erweitert jedes HTML-Tag um entsprechende Style-Informationen. Der Parameter STYLE wird eingefügt:
Ein Beispiel zeigt, wie dies praktisch aussieht: In the navy.
Beachten Sie, dass dabei nur dieses eine Element geändert wird, die anderen Vorkommen von verhalten sich unverändert. Der Vorteil ist eine größere Präzision der Seiten, der Nachteil ein schwerer lesbarer und komplizierter Code. Eingebettete Style Sheets Für eingebettete Style Sheets wird ein Block mit den Tags <STYLE> und gebildet. Normalerweise steht diese Anweisung im Teil . In diesem Block werden die Regeln definiert, die auf mehrere Elemente angewendet werden. Die Regeln bestehen aus zwei Teilen: 왘 Einem Selektor, der ein HTML-Tag oder eine Gruppe repräsentiert 왘 Einer Deklaration, die den Selektor bedient
Für die entsprechende Syntax spielen Groß- und Kleinschreibung keine Rolle: selector { attribute:value ; attribute:value; …. }
HTML-Tags als Selektoren werden ohne die umgebenden spitzen Klammern geschrieben. Achten Sie aber auf die geschweiften Klammern und die richtige Setzung der Semikola. Ein Beispiel mit zwei Regeln, für das Abbildung 5.20 das Ergebnis zeigt: <STYLE>
Nicht jeder Absatz hat eine silberne Linie, die fett aussieht.
170
Cascading Style Sheets Abbildung 5.20: CSS in Aktion
Verbundene Style Sheets Sie können umfangreiche Deklarationen auch in eine Extradatei schreiben und dann mit dem Dokument verbinden. Dazu wird das Tag verwendet:
Sie schreiben in die Datei MYSTYLES.CSS Ihre Definitionen, aber ohne die Tags <STYLE> und die Kommentare zu verwenden. Der Vorteil dabei ist die mehrfache Verwendung einer aufwändigen Deklaration. Importierte Style Sheets Sie können Style Sheets auch von anderen Stellen im Internet beziehen. Die Anwendung dürfte eher ein Intranet sein, in dem viele Stellen Dokumente produzieren, die ein einheitliches Aussehen haben sollen, und wo die Gestaltung an zentraler Stelle in Form von Style-Dateien verwaltet wird. Eine importierte Style-Datei sieht folgendermaßen aus: @import: url(mystyles.css) ;
Interne Definitionen überschreiben aber die in Dateien importierten StyleDefinitionen.
5.3.3
Selektoren
Übersicht CSS kennt drei Arten von Selektoren: 왘 HTML-Tags 왘 CLASS 왘 ID
171
5 Basiswissen HTML
CSS im Kontext von HTML-Tags Hierbei wird die Position eines Tags in Abhängigkeit von anderen umgebenden Tags definiert. Das folgende Beispiel zeigt eine solche kontextabhängige Definition. <TITLE>CSS richtig anwenden <STYLE> Text ist fett und Times
Text ist nur Times
Text ist fett und Courier
Listing 5.58: Definitionen mit Abhängigkeiten
Der Kontext, der definiert wird, heißt: Wenn innerhalb des Container-Tags auch noch das Tag auftaucht, findet die Deklaration ihre Anwendung. ID eines Elements Wenn Sie eine Deklaration nur für ein einziges Element benötigen, kann auch das ID-Attribut benutzt werden: <TITLE>CSS richtig anwenden <STYLE> Fett und großFett und normal Listing 5.59: Definition von IDs
172
Cascading Style Sheets
CSS-Klassen Bislang wurden immer HTML-Tags benutzt, die selbst schon eine Bedeutung haben. Sie können alternativ immer die Tags
und <SPAN> benutzen, die in HTML keine eigene Formatierung auslösen. <TITLE>CSS richtig anwenden <STYLE> <SPAN CLASS="SchriftCourier">Text in Courier <SPAN CLASS="SchriftArial">Text in Arial Listing 5.60: Nutzung des Tags <SPAN>
arbeitet genauso wie das im Beispiel benutzte Tag <SPAN>, bezieht sich aber immer auf einen Absatz und fügt vor und nach dem eingeschlossenen HTML-Text automatisch einen Zeilenumbruch ein (analog dem Tag ).
Die Anwendungsmöglichkeiten sind ausgesprochen vielfältig und reichhaltig. Sie sollten sich die Referenz ansehen und vor der ersten „echten“ Seite viel experimentieren und Ihre kreativen Ideen mit CSS ausprobieren. Versuchen Sie immer, das Ergebnis in allen wichtigen Browsern zu testen, um nicht zerstörte Seiten zu erhalten.
5.3.4
Vererbung, Verschachtelung und Abhängigkeit
Abhängige Selektoren Sie können auch Selektoren definieren, die nur unter bestimmten Umständen angesprochen werden. So werden mit dem folgenden Beispiel nur die Tags verändert, die innerhalb von stehen. <STYLE> Listing 5.61: Veränderung des Verhaltens von Standard-HTML-Anweisungen
173
5 Basiswissen HTML
Wahlweise Selektoren Alle Modelle können zusammen definiert und angewendet werden: <STYLE> So wird das angewendet:
Rechts ausgerichteter Text.
Links ausgerichteter Text in anderer Formatierung.
Listing 5.62: Kombination von verschiedenen Definitionen
Kaskadierung und Vererbung Warum die Styles „Cascading Style Sheets“ genannt werden, ging bislang nicht klar hervor. Die bisher vorgestellten Anwendungsmöglichkeiten können kombiniert werden. Ein generell vorhandener Style bleibt bis zur letzten Ebene wirksam, kann aber (wahlweise) überschrieben werden. <STYLE> ...
Mehrere Styles ohne Konflikte.
Listing 5.63: Kombination mehrerer Styles ohne Konflikte
174
Cascading Style Sheets
Die zwei Definitionen clsCode und #idP1 in Listing 5.63 bauen aufeinander auf (Kaskadierung) und geraten nicht in Konflikt. Bei Konflikten gewinnt einfach die letzte Deklaration, hier also die Farbe Weiß: <STYLE> ...
Definition mit Konflikt.
Listing 5.64: Diese Definition enthält Konflikte: Der letzte Befehl gewinnt
5.3.5
Browserprobleme
Leider unterstützen auch die modernen Browser CSS nur unvollkommen und oft widersprüchlich. Das folgende Skript zeigt, wie die Browsertypen abgefragt werden. Für gutes Design ist es sinnvoll, für jeden Browser ein eigenes Style Sheet zu entwerfen und ausgiebig zu testen. Das folgende Beispiel stammt aus der Microsoft Online-Hilfe und zeigt, wie ein Browsertyp erkannt wird. <SCRIPT LANGUAGE="Javascript"> -1 if (bIsIE4) { sCSS = '' } else { if (bIsIE) { sCSS = '' } } document.write(sCSS) //--> Listing 5.65: Browserabhängige Style-Definitionen
175
5 Basiswissen HTML
5.3.6
CSS-Praxistipp
- und <SPAN>-Elemente Oft erscheinen Style Sheets in den Elementen
oder <SPAN>. Beide bezeichnen einen Bereich und bilden einen Container für CSS. Diese beiden Elemente haben keine eigene Abbildung oder Darstellung. Sie können also benutzt werden, um Styles direkt anzuwenden.
bildet einen Block (aber keinen Blocksatz!), der von einem einfachen Zeilenumbruch umschlossen wird (absatzorientiert). <SPAN> steht mitten im
laufenden Text (zeichenorientiert). <STYLE>
Hier steht normaler Text, der einen
DIV Tag umfasst
und dann weitergeht.
Ein weiterer Text, der mittendrin mit einem <SPAN>SPAN Tag formatiert wird und dann weitergeht.
Listing 5.66: Arbeit mit
und <SPAN>
Alte Browser unterstützen
und <SPAN> nicht immer. Browser ignorieren unbekannte HTML-Tags, sodass unter Umständen die gesamte Formatierung verloren geht. Wollen Sie alte Browser nicht unterstützen, spielt das keine Rolle. Wenn Sie auch ein akzeptables Layout auf alten Browsern wünschen, bietet sich für
die Verwendung von
an und für <SPAN> ist <STRONG> mit ausgeschalteter Fettfunktion zu empfehlen.
5.4
JavaScript
In der clientseitigen Programmierung spielt JavaScript eine starke Rolle – nicht nur im Zusammenhang mit DHTML – sondern auch für Formulare, grafische Effekte und mehr Interaktivität. Dieser Abschnitt soll nur einen Überblick geben, was JavaScript ist und wo es zum Einsatz kommt. Es soll nicht JavaScript lehren – dafür gibt es viele spezielle Bücher und Informationen im Internet.
176
JavaScript
5.4.1
Was ist JavaScript?
JavaScript ist eine relativ einfache Skriptsprache, die im Browser verarbeitet wird und die speziell für den Einsatz in HTML-Seiten konzipiert wurde. Trotz des ähnlichen Namens hat JavaScript nichts mit der Programmiersprache Java zu tun. JavaScript erlaubt es, kleine Programme in eine HTML-Seite einzubetten. Die Ausführung erfolgt dann, wenn die Seite im Browser dargestellt wird, je nach Programmierung automatisch oder gesteuert durch Ereignisse, die der Benutzer ausgelöst hat. Derartige Ereignisse sind meist Bedienungen der Maus oder der Tastatur. JavaScript kann also auf Klicks reagieren. Außerdem ist aber auch die Steuerung nach zeitlichen Ereignissen oder Bedingungen der Seite möglich, beispielsweise das Laden oder Verlassen einer Seite. JavaScript erlaubt den Zugriff auf die HTML-Elemente der Seite. Über das vom Browser bereitgestellte Objektmodell (Document Object Model, DOM), können vom Skript aus Formularelemente, Tags und Texte angesprochen und dynamisch verändert werden. Diese Prinzipien werden jedoch unter dem Stichwort DHTML zusammengefasst. Dies wird im nächsten Abschnitt kurz vorgestellt.
5.4.2
JavaScript verwenden
Skripte in HTML-Seiten werden dort ausgeführt, wo sie stehen. Wenn die Skriptinformationen für die gesamte Seite gelten, werden diese am besten im Kopf platziert:
Die Skriptabschnitt <script> können mehrfach auf einer Seite auftreten. Code in einem Abschnitt, beispielsweise Funktionsdefinitionen, können von anderen Abschnitten erreicht werden. Wenn Sie JavaScript in einem Frameset einsetzen, kann der Code auf andere Frames zugreifen, da diese Teile über das DOM ansprechbar sind. Ereignisse Interessant im Zusammenhang mit JavaScript sind Ereignisse. Diese sind in der Regel an HTML-Tags gebunden. Dazu wird das Tag um ein entsprechen-
177
5 Basiswissen HTML
des Attribut erweitert. So können Sie das in reinem HTML funktionslose Element einer Schaltfläche mit JavaScript verbinden:
Hier wird als Parameter des Attributs gleich JavaScript-Code geschrieben. Eleganter sind natürlich Funktionsaufrufe, wobei die Funktionsdefinitionen im Kopf der Seite erfolgen. Externe Programme Wenn Sie viel mit JavaScript machen oder sich fertige Skripte beschaffen, kann die Einbettung in jeder Seite lästig sein – zumal bei Änderungen schnell die Übersicht verloren geht. Dazu kann das <script>-Tag so erweitert werden, dass die Daten aus einer Datei hinzu geladen werden. Dies erledigt der Browser, der damit auch erkennt, dass es sich um eine allein stehende Datei handelt. Er wird also auch versuchen, diese im eigenen Cache zwischenzuspeichern und verringert damit die Ladezeit bei künftigen Aufrufen der Seite. Verwenden Sie für die Einbindung externer Skripte folgende Syntax: JavaScript <script language="JavaScript" src="/jspfad/externskript.js"> // JavaScript-Programme
Hier steht die Seite
Die Dateierweiterung JS ist nicht zwingend, aber üblich und sie folgt der W3C-Empfehlung.
5.5
Dynamisches HTML
Alle bisherigen Erweiterungen von HTML bezogen sich auf das Layout und erweiterte Darstellungsfunktionen. Für ansprechende Seiten ist das nicht ausreichend, denn das Medium Computer kann weitaus mehr bieten als statische Seiten. Auch die Möglichkeit der dynamischen Erstellung von Seiten mit ASP berücksichtigt nur sehr unvollkommen die Belange einer verbesserten Nutzeroberfläche.
178
Dynamisches HTML
5.5.1
Übersicht
DHTML steht für Dynamisches HTML. Statt statischer Anzeigen sind nun auch Reaktionen auf Ereignisse möglich, die direkt auf Anzeigeelemente Einfluss nehmen. Die Skriptsprache, mit der die Programmierung erfolgt, ist JavaScript. Leider gibt es gravierende Unterschiede zwischen Netscape- und Microsoft-Browsern. Ein praktischer Weg sind die DHTML-Funktionen in FrontPage, die so geschrieben wurden, dass beide Browser unterstützt werden. Sie können anhand der erzeugten Codes auch viel von den Möglichkeiten lernen, die DHTML bietet.
5.5.2
Was kann DHTML?
Prinzip
Das Prinzip des dynamischen HTML greift die Idee der Objekte auf. Erstmalig wird im Umfeld HTML der Begriff „Objekt“ für Designer relevant. So definiert der Browser ein Document Object Model (DOM), in dem jedes Element als Teil eines Objekts betrachtet wird. Das oberste Objekt der Hierarchie ist das Browserfenster. Der Unterschied zur normalen Programmierung mit HTML ist die Verfügbarkeit von Befehlen, die auf diese Objekte im Browser zugreifen. Das geschieht nicht auf der Serverseite, sondern im Browser. Der Browser muss also die nötige Funktionalität bieten. Zusätzlich gibt es ein Event-Modell, das jedem Objekt die Möglichkeit gibt, auf Ereignisse wie Mausklicks zu reagieren.
Das zu Grunde liegende Prinzip ist objektorientiert.
Gegenüber CSS können Sie die Zuweisung der Farben oder Textformen jederzeit ändern. Dabei kommt es zu keinen Zugriffen auf den Server, die Seite hat ein „Eigenleben“. Dahinter verbergen sich fantastische Möglichkeiten, denn mit DHTML wird das multimediale Medium Computer erst richtig ausgenutzt.
5.5.3
Beispiele
Überlagernde Objekte Das Beispiel wurde der Webseite „Milch&Zucker“ von Christoph Bergmann und J. Gamperl entnommen. Alle Rechte liegen bei den Autoren. Sie finden diese außerordentlich gute Website (reichlich dynamisch animiert) unter http://dhtml.seite.net. Das erste Beispiel zeigt zwei sich überlagernde Objekte, die mit verschiedenen Wischeffekten das unten liegende Objekt freigeben. Beide Objekte sind nur Textelemente, keine Grafiken. Ein wichtiges Element in DHTML sind die Ebenen. Sie können damit ungeahnte Effekte erzielen, denn die kleine Browserfläche gewinnt plötzlich eine neue Dimension – die Tiefe. Diese Anwendung zeigt Ihnen, wie Sie sich bequem durch verschiedene Ebenen bewegen können, wenn Sie beispielsweise zehn unterschiedliche Ebenen haben, in denen jeweils eigene Inhalte stehen. Diese Ebenen soll der
179
5 Basiswissen HTML
Anwender nur dann sehen, wenn er die entsprechende Schaltfläche bzw. einen Verweis anklickt. Für diese Aufgabe benötigen Sie eine Funktion, die durch eine Schleife die unterschiedlichen Ebenen erzeugt. Damit diese Anwendung auch ohne Problem abläuft, ist es notwendig, die Ebenen zu nummerieren (Ebene1, Ebene2 usw.). Binden Sie zunächst die Ebenen nach folgendem Muster in Ihr Dokument ein:
... Inhalt Ebene 1 ...
... Inhalt Ebene 2 ...
...
Im Head-Bereich des HTML-Dokuments werden nun die Style-Sheet-Angaben zu diesen Ebenen definiert: #demo1 { position: absolute; visibility: visible; left: 150px; top: 80px; }
Der Parameter position kann entweder absolute oder relative sein. Im ersten Fall wird der Style wie ein normales, eingebundenes Bild an einer genauen absoluten Position im Fenster ausgegeben, im zweiten an der Stelle im Text, an der er steht. Mit der Eigenschaft visibility kann man diesen Stil unsichtbar, hidden, oder wieder sichtbar, visible, machen. Erlaubt ist noch der Wert inherit, der bedeutet, dass der Stil die Eigenschaft des Stils übernehmen soll, von dem er abgeleitet wurde. top gibt die Y-Position des Stils in Pixeln an, left die X-Position. Die Inhalte der verschiedenen Ebenen können also entweder sichtbar oder unsichtbar sein. Auf diese Eigenschaften haben Sie selbst nach dem Laden der Seite noch Einfluss. Um eine Ebene auf diese Weise zu manipulieren, benötigen Sie die Eigenschaft visibility. Netscape verwendet hierbei die folgende Syntax: document.Ebene.visibility = "show"; // Ebene zeigen document.Ebene.visibility = "hide"; // Ebene verstecken
Mit dem Internet Explorer müssen Sie diese Syntax verwenden: Ebene.style.visibility = "visible"; // Ebene zeigen Ebene.style.visibility = "hidden"; // Ebene verstecken
Damit Ihre Anwendungen auf beiden Browsern funktionieren, müssen Sie diese unterschiedlichen Eigenschaften berücksichtigen. Um eine Ebene anzuzeigen, verwenden Sie folgende Funktion, wobei zuvor der verwendete Browser abgefragt werden muss: function zeigen(name) { if (ns) { document.layers[''+name].visibility = "show"; }
Diese Anweisung erwartet als Parameter den Namen der entsprechenden Ebene und deckt beim Ausführen des Programms die jeweilige Ebene auf. Analog hierzu erzeugen Sie eine Funktion, um eine Ebene zu verbergen: function verbergen(name) { if (ns){ document.layers[''+name].visibility = "hide" } else { document.all[''+name].style.visibility = "hidden" } }
Dank dieser allgemein gehaltenen Anweisungen sind Sie nun in der Lage, jede beliebige Ebene mit dem entsprechenden Parameter aufzurufen. Als Nächstes benötigen Sie eine Funktion, welche die Schleife zwischen den jeweiligen Ebenen realisiert: var i = 1; var test = "demo";
In der Variablen i wird die Nummer der jeweils angezeigten Ebene gespeichert. Sobald ein Anwender eine neue Ebene aufdeckt, wird die entsprechende Nummer in dieser Variablen abgespeichert. Da die Ebene Nummer 1 als Erstes angezeigt wird, müssen Sie diese zu Beginn auch initialisieren. Die Variable test beinhaltet den Namen der Ebenen ohne Nummern. function zeigeEbeneNr(ebene_nr){ verbergen(eval('"' + test + i +'"')); zeigen(eval('"' + test + ebene_nr +'"')); i = ebene_nr; }
Der Funktion zeigeEbeneNr wird als Parameter die Nummer der Ebene ebene_nr übergeben, welche aufgedeckt werden soll. In dieser Anweisung werden die zuvor erzeugten Funktionen zum Zeigen und Verbergen einer Ebene aufgerufen. Übergeben Sie der Funktion beispielsweise die Nummer 2, wird die aktuell angezeigte erste Ebene versteckt, die zweite Ebene aufgedeckt und die Variable i auf 2 gesetzt. Beim nächsten Aufruf der Anweisung wird die zweite Ebene verdeckt und so weiter. Um das Skript auszuführen, benötigen Sie einen Event-Handler:
href="javascript:zeigeEbeneNr(1)">Zeige Ebene 1 href="javascript:zeigeEbeneNr(2)"> Zeige Ebene 2 href="javascript:zeigeEbeneNr(3)"> Zeige Ebene 3 href="javascript:zeigeEbeneNr(...)"> Zeige Ebene ...
181
5 Basiswissen HTML
Diese Befehle können an einer beliebigen Stelle im Dokument angebracht werden. An Stelle von Verweisen können Sie auch Formularschaltflächen oder Grafiken verwenden. Ihr neues interaktives Webangebot kann nun eröffnet werden. Navigation mit DHTML Oft werden Navigationsinstrumente benötigt. Warum sollte man nicht einmal sich überlappende Menüs verwenden? Das ist eine typische Anwendung, denn überlappende Objekte kennt HTML alleine noch nicht. Die Tatsache, dass Stile andere Seiteninhalte überdecken können, ist für Menüs von großem Vorteil: So lassen sich aufklappbare Menüleisten programmieren, deren Unterpunkte nur dann zu sehen sind und damit Platz auf der Seite beanspruchen, wenn der Benutzer auf die Menüpunkte klickt. Im Folgenden finden Sie eine Beispielanwendung für ein solches Menü. Als zusätzlichen Effekt „klappen“ die Menüs nicht einfach auf, sondern „rollen“ weich von oben herein. Rollmenue <style> #essenmenu { position: absolute; top: 0; left: 0; z-index: 1; } #essen { position: absolute; top: -120; left: 0; z-index: 0; } #trinkenmenu { position: absolute; top: 0; left: 60; z-index: 1; } #trinken { position: absolute; top: -92; left: 60; z-index: 0; }
182
Dynamisches HTML
Vier Stile wurden definiert: Einer für jedes Hauptmenü und einer für jedes Untermenü. Die Hauptmenüs liegen dabei eine Ebene über den Untermenüs, sodass die Untermenüs von den Hauptmenüs überdeckt werden. Diese Überlagerung wird auch als z-Index bezeichnet. Daran schließen sich die JavaScript-Funktionen zur Steuerung an: <script language="JavaScript"> var eypos=-124, ejump=-4; var typos=-92, tjump=-4; var delay=2; function do_essen() { if(typos>-92) { tjump=-4; if(typos>=30) trinken_fahren(); } ejump=-ejump; if(eypos<=-122 || eypos>=30) essen_fahren(); } function essen_fahren() { if(document.layers) document.essen.top=eypos; else document.all.essen.style.top=eypos; eypos+=ejump; if(eypos>-122 && eypos<30) setTimeout("essen_fahren()", delay); } function do_trinken() { if(eypos>-122) { ejump=-4; if(eypos>=30) essen_fahren(); } tjump=-tjump; if(typos<=-92 || typos>=30) trinken_fahren(); } function trinken_fahren() { if(document.layers) document.trinken.top=typos; else document.all.trinken.style.top=typos; typos+=tjump; if(typos>-92 && typos<30)
183
5 Basiswissen HTML
setTimeout("trinken_fahren()", delay); }
Die Hauptfunktionen do_essen() und do_trinken() aktivieren erst die Funktionen, welche die Bewegung ausführen, essen_fahren() und trinken_fahren(). Die erste if-Abfrage testet, ob vielleicht das andere Untermenü ausgefahren ist – da immer nur eines auf einmal sichtbar sein soll, aktiviert die entsprechende Routine das Zurückfahren des anderen Menüs. Dann wird die Fahrtrichtung des Untermenüs umgedreht: Wenn es nicht sichtbar ist, soll es ausfahren, und wenn es ausgefahren ist, soll es zurückfahren. Da JavaScript in der Lage ist, mehrere Funktionen gleichzeitig laufen zu lassen, müssen wir sichergehen, dass die Fahrroutine nicht schon läuft, sonst würde, wenn ein Benutzer mehrmals schnell hintereinander klickt, die Funktion mehrmals starten. Beim Zuweisen der Position muss hinsichtlich beider Browsertypen getestet und entsprechende Befehle müssen verwendet werden. Anschließend folgt der Rest der HTML-Seite:
Jetzt werden der Reihe nach die beiden Hauptmenüs und anschließend die beiden Untermenüs definiert. Da die Untermenüs zu Beginn eine negative Position (-92 beziehungsweise -122) haben, sind sie erst einmal nicht zu sehen. Die Tabellen dienen nur zur Verschönerung, damit alle Einträge dieselbe Größe haben. Jetzt folgt der Inhalt der Seite:
Willkommen im Wirtshaus zum Eber.
Bitte wählen Sie aus unserem reichhaltigen Menü die Speisen und Getränke, mit denen wir Ihren Gaumen verwöhnen dürfen. Unser freundliches Personal wird Ihnen sogleich jeden Ihrer Wünsche erfüllen.
Zuerst werden zwei Zeilen für das Menü freigelassen. Der nun folgende Text ist ganz normaler HTML-Text. Er wird zwar, wenn ein Menü ausgefahren ist, überlappt, aber ist danach wieder ganz normal sichtbar.
185
II Webseiten-Gestaltung mit FrontPage In diesem Teil erfahen Sie, in welcher Form FrontPage Internetseiten strukturiert und in Webs zusammenfasst. Mit einfachen Mitteln werden Sie erste Seiten erstellen und auf einem Webserver veröffentlichen. Dabei erlernen Sie schrittweise, wie HTML-Seiten aufgebaut sind, wie Text und Grafik eingebunden werden und wie die generierten Seiten zur Betrachtung in einem InternetBrowser bereitgestellt werden können.
6
Arbeiten mit FrontPage-Webs
Der Begriff „Web“ steht im allgemeinen Sprachgebrauch für das World Wide Web, das hypertextbasierte Informationssystem im Internet. FrontPage verwendet den Begriff „Web“ in einer eigenen Form: Ein FrontPage-Web ist eine Sammlung von einzelnen Internetseiten und FrontPage-Komponenten, die serverseitig miteinander verbunden und katalogisiert sind. Was das Internet im Großen, ist ein FrontPage-Web im Kleinen. Die Stärke von HTML liegt darin, dass beliebige Dateien über Hyperlinks miteinander verknüpft werden können. Das Netz, das daraus entsteht, kann riesige Dimensionen annehmen. Gerade Unternehmens-Websites, die oftmals Hunderte von Seiten umfassen, werden schnell unübersichtlich, eine einheitliche Navigation ist schwierig. Fehler durch gelöschte Seiten oder neue Inhalte sind kaum zu vermeiden, und wenn mehrere Autoren Seiten erstellen, ist nicht mehr nachzuvollziehen, wer was an welchen Inhalten verändert hat. Die FrontPage-Webs sind einzigartige Hilfsmittel, die diesen Schwierigkeiten vorbeugen und vielseitige Hilfestellungen geben.
Webs als Administrationswerkzeuge
FrontPage-Webs ermöglichen es, die Verknüpfungen zwischen den einzelnen Seiten eines FrontPage-Webs darzustellen und zu administrieren. FrontPage-Webs enthalten darüber hinaus seitenübergreifende Informationen zum Seitenlayout und für interaktive Komponenten, wie beispielsweise Diskussionsforen und Formulare, deren Inhalte im Web selbst gespeichert werden. Für jedes FrontPage-Web können Sie Zugriffsberechtigungen festlegen, um einzelne Ordner oder Dateien nur bestimmten Nutzern zugänglich zu machen. Schließlich können innerhalb eines Webs Aufgaben auf mehrere Bearbeiter verteilt und Änderungen zurückverfolgt werden. Ändert sich der Name einer Datei oder verschieben Sie eine Datei innerhalb des Webs in einen anderen Ordner, benennt FrontPage alle Verweise auf diese Datei innerhalb des gesamten Webs um. Damit müssen Sie sich nicht mehr um die korrekte „Verlinkung“, das heißt die durchgehend fehlerlose Verknüpfung aller Seiten, kümmern. Dies ist wohl eines der überzeugendsten Merkmale von FrontPage, denn nichts ist ärgerlicher als ein Verweis, der ins Nichts führt, oder eine Seite, deren Navigationsgrafiken fehlen. All diese Funktionen stellt FrontPage auf einfache Weise zur Verfügung, setzt dazu aber ein Web und gleichzeitig die Installation der Servererweiterungen voraus. Die Funktionsweise und Einrichtung der Servererweiterung wird in Kapitel 3 umfassend erläutert.
Servererweiterungen
189
6 Arbeiten mit FrontPage-Webs
Zwar kann FrontPage auch einzelne HTML-Seiten außerhalb und unabhängig von einem FrontPage-Web erstellen und speichern; jedoch ist es für die Arbeit mit FrontPage am sinnvollsten, bereits zu Beginn mit einem Web zu arbeiten, um die Verwaltungs- und Publikationsfunktionen von FrontPage vollständig nutzen zu können. Diese Arbeitsweise erleichtert die Ergänzung und Pflege zu einem späteren Zeitpunkt. Daher sei Ihnen dringend ans Herz gelegt, sich vor der Erstellung separater Seiten auch bei einem kleinen Homepage-Projekt mit den Möglichkeiten eines FrontPage-Webs zu beschäftigen und möglichst von Anfang an damit zu arbeiten. So ersparen Sie sich viel Mühe und Ihre Besucher werden es Ihnen danken. Welche konzeptionellen Überlegungen und Vorarbeiten dazu notwendig sind, wird in Kapitel 12 beleuchtet. Es mag zunächst sinnvoll erscheinen, nur einzelne Seiten zu erstellen, nicht gleich ein ganzes Web, wenn Sie zum Beispiel Urlaubsfotos in Form eines Fotoalbums im Internet veröffentlichen möchten. Wenn Sie zusätzlich noch eine Begrüßungsseite vorschalten oder ein zweites Fotoalbum, das mit dem ersten verknüpft werden soll, empfiehlt es sich bereits, ein FrontPage-Web zu erstellen.
6.1
Ein neues Web erstellen
FrontPage unterstützt Sie bei der Erstellung neuer Internetseiten zum einen mit Hilfe von Vorlagen, die bereits alle notwendigen Strukturen bereitstellen. Zum anderen stehen Ihnen verschiedene Assistenten beim Generieren besonderer Funktionen zur Seite. Sie müssen sich nur vorab entscheiden, welche Vorlage die passende ist. Beim ersten Start von FrontPage können Sie HTML-Seiten standardmäßig mit FrontPage verknüpfen: Jedes Mal, wenn Sie eine Webseite nicht öffnen, sondern editieren, geschieht das auf Wunsch mit FrontPage. Abbildung 6.1: FrontPage als Standard-Editor?
Wählen Sie im Menü DATEI die Option NEU | SEITE ODER WEB , um das Fenster NEUE SEITE ODER NEUES WEB aufzurufen.
190
Ein neues Web erstellen Abbildung 6.2: Fenster „Neue Seite oder neues Web“
Klicken Sie unter der Überschrift „Mit Vorlage beginnen“ auf den Menüpunkt WEBVORLAGEN. Abbildung 6.3: Dialogbox „Webvorlagen“ zum Erstellen eines neuen FrontPage-Webs
Die Dialogbox enthält die Vorlagen und Assistenten für neue Webs. Neben der Vorlage können Sie dort die Adresse des neu zu erstellenden Webs mit einer Reihe von Optionen angeben. Als Voreinstellung ist die Vorlage „Standardweb“ und eine neue Adresse in Ihrem Ordner für eigene Webs ausgewählt.
Vorlagen zum Erstellen neuer Webs nutzen
191
6 Arbeiten mit FrontPage-Webs
Das Web anlegen Für den ersten Test wählen Sie die Vorlage „Standardweb“. Um für die Projekte dieses Buches einen einheitlichen und leicht wieder zu findenden Ordner zu erstellen, geben Sie im Feld ADRESSE DES NEUEN WEBS C:\FrontPage Webs\ ein. Neue Webs auf dem lokalen Server erstellen
Haben Sie einen lokalen Webserver, können Sie statt C:\FrontPage Webs\ auch den Namen Ihres Servers einsetzen, beispielsweise http://localhost/, gefolgt vom Namen des neu zu erstellenden Webs, hier also http://localhost/ Projekt00/. Für die weiteren Schritte ist es zunächst unerheblich, ob Sie die Seiten auf dem Server oder in einem Verzeichnis auf der Festplatte erstellen. Benennen Sie das erste lokale Verzeichnis C:\FrontPage Webs\Projekt00, indem Sie den Namen eingeben und auf OK klicken.
Abbildung 6.4: Ein neues Web wird erstellt
FrontPage erstellt nun im angegebenen Ordner das neue Web mit einer leeren HTML-Seite. Sie können jederzeit über das Menü ANSICHT | ORDNER eine Übersicht über die Ordnerstrukur ein- und ausblenden. Schneller geht es per Mausklick auf die Schaltfläche ORDNERLISTE unten in der zweiten Spalte. Abbildung 6.5: Ein leeres Standardweb
192
Ein neues Web erstellen
6.1.1
Die Webstruktur
Die Ordnerliste zeigt die Ordner- und Dateistruktur des Webs in der Art des Windows-Explorers an. Anders als im Windows-Explorer wird aber in der Ordnerleiste der Inhalt von Ordnern im FrontPage-Web in einer Baumstruktur angezeigt. Der Inhalt der gelben Ordner kann über die links davon stehenden Plus- und Minus-Zeichen ein- und ausgeblendet werden. Es fällt zunächst auf, dass FrontPage neben der leeren Seite index.htm automatisch weitere Ordner erzeugt hat. Klicken Sie jetzt auf die Pluszeichen vor den Ordnern _private und images. Die Zeichen verschwinden, und es werden keine neuen Dateien angezeigt. Es handelt sich also um leere Ordner. Die Funktionen dieser beiden Ordner werden in Tabelle 6.1 erläutert. Eine Übersicht der weiteren FrontPage-eigenen Ordner finden Sie in Kapitel 6.8.3. Ordner
Funktion
_private
Dieser Ordner ist für Dateien bestimmt, die für Besucher Ihrer Website unsichtbar bleiben sollen. Standardmäßig ist der Zugriff auf diesen Ordner gesperrt. Im Menü EXTRAS | WEBEINSTELLUNGEN, Registerkarte ERWEITERT, können Sie die Option VERSTECKTE DATEIEN UND ORDNER ANZEIGEN aktivieren, um den Zugriff auf die Dateien dieses Ordners zu ermöglichen.
images
Dieses ist der von FrontPage gewählte Standardname für Ordner, in denen Bilddateien abgelegt werden. Zwar können Sie diese Dateien auch in beliebigen anderen Ordnern ablegen, eine klare und vor allem durchgängige Strukturierung erleichtert aber das Wiederfinden von Grafiken. Zudem ist es sinnvoll, Grafiken, die wiederholt eingesetzt werden sollen (beispielsweise Buttons für die Navigation auf mehreren Seiten), stets nur in einem Ordner abzulegen, um Speicherplatz zu sparen und die Anzeige der Seiten zu beschleunigen. Benennen Sie Ordner mit ähnlichem Inhalt immer gleich, und geben Sie ihnen präzise Namen, um unnötigen Mehraufwand zu vermeiden.
Tabelle 6.1: Ordner, die FrontPage beim Erzeugen eines neuen Webs automatisch erstellt
Sobald viele Dateien in einem Ordner liegen, empfiehlt es sich, in den Ansichtsmodus ORDNER zu wechseln. Der Inhalt der Ordner wird dann in einem separaten Fenster angezeigt. Klicken Sie dazu in der Ansichtenliste auf das ORDNER-Symbol oder wählen Sie das Menü ANSICHT | ORDNER.. Das in Abbildung 6.6 gezeigte Web enthält insgesamt über 300 HTML-Seiten, 700 Grafiken und weitere Dateien. In einer solch umfangreichen Website den Überblick zu behalten wäre schwierig, würden Seiten und verbundene Dateien, wie beispielsweise Grafiken, nicht immer nach den gleichen Namenskonventionen abgelegt. Zweckmäßig ist daher die bereits erwähnte Konsistenz der Ordnerbenennung.
193
6 Arbeiten mit FrontPage-Webs Abbildung 6.6: Ein umfangreiches Web in der Ordneransicht
Ordner und Dateien vereinheitlichen Ordner, die Grafiken enthalten, heißen in diesem Beispiel immer gr. Grafiken, die im gesamten Web eingesetzt werden, so beispielsweise Navigationsknöpfe oder Logos, sind im Ordner gr auf der ersten Ebene abgelegt. Dahingegen sind Grafiken, die nur einmal in einer bestimmten Seite angezeigt werden, wie Überschriften oder Fotos, jeweils in einem Unterordner der HTML-Seite, in der die Grafik eingebunden ist, zu finden. Diese Vorgehensweise erleichtert das Finden und Referenzieren von Dateien, bedarf aber gründlicher Vorplanung. Nach welchen Kriterien Sie am erfolgreichsten die Website strukturieren, lernen Sie in Kapitel 12. Ein negativer Nebeneffekt stark verschachtelter Strukturen soll nicht verschwiegen werden. Die Website, deren Struktur Abbildung 6.6 darstellt, enthält 300 HTML-Seiten, die jeweils auf mindestens zwei weitere HTML-Seiten verweisen und drei Grafiken enthalten. Im HTML-Code wird auf jede dieser Dateien mit dem relativen Pfad verwiesen, das heißt mit einer Angabe der Position der jeweiligen Datei in Bezug auf die Datei, die den Verweis enthält. Haben nun die einzelnen Ordner längere Namen (wie beispielsweise Grafiken), ist der Verweis auf eine Datei in diesem Ordner auch um einige Zeichen und damit Bytes länger. Diese Bytes summieren sich über die gesamte Seite, was bei einer stark verschachtelten Struktur noch dramatischer ist. Jeder Verweis muss hier nicht nur den Dateinamen, sondern auch noch die Namen mehrerer Verzeichnisse enthalten. Jede Seite wird damit größer, und es dauert länger, sie herunterzuladen.
194
Die erste Seite
Bei umfangreichen Websites kann es daher sinnvoll sein, die Namen von Ordnern zu kürzen, um Bandbreite zu sparen. Heißen beispielsweise alle Grafikordner immer gr, ist dies ebenso klar wie ein längerer Name. Dank der Indizierung von Seiten und Hyperlinks in FrontPage-Webs ist es jedoch auch im Nachhinein noch jederzeit möglich, die Struktur zu ändern und „aufzuräumen“. Dies ist wiederum ein Grund mehr, FrontPage-Webs von Anfang an zu nutzen.
6.2
Die erste Seite
Haben Sie die Vorlage STANDARDWEB ausgewählt, wird auch nur eine einzige Seite generiert. Die Datei index.htm ist die erste und bislang einzige Seite in Ihrem neuen Web. Diese Datei ist noch leer. Wie die erste Seite Ihres neuen Webs heißt, ist davon abhängig, ob Sie das Web auf Ihrer Festplatte oder auf einem lokalen Server erstellt haben. Ist Ihr Server nämlich so konfiguriert, dass die Startseite beispielsweise default.htm heißt, wird FrontPage im neuen Web auch die erste Seite so nennen. Die Startseite stellt sicher, dass auch dann eine tatsächliche Seite angezeigt wird, wenn nur die Adresse des Verzeichnisses eingegeben wird, so beispielsweise http://localhost. Die Seite, die in diesem Fall automatisch angezeigt wird, ist aber die Standardstartseite http://localhost/default.htm. Wie Sie Internetseiten gestalten, wird in Kapitel 7 umfassend erläutert. Damit Ihr erstes FrontPage-Web aber an dieser Stelle nicht ganz leer bleibt, soll zumindest ein kurzer Text auf der Seite erscheinen. Stellen Sie dazu sicher, dass Sie sich in der Seitenansicht befinden. Klicken Sie nun in der Ordnerliste doppelt auf die Datei index.htm. Die Datei wird in FrontPage geöffnet und im rechten Fenster erscheint die leere Seite. Die Texteinfügemarke blinkt in der linken oberen Ecke. Tun Sie es mir nach, geben Sie „Hallo Tobias!“ ein. Sie haben soeben die erste Internetseite Ihres Webs mit Inhalt gefüllt und meinen Bruder begrüßt. Wie die Seite in einem Internetbrowser aussieht, können Sie prüfen, indem Sie im Seitenfenster unten auf die Registerkarte VORSCHAU klicken. Der über diese Funktion eingebundene Internetbrowser Internet Explorer zeigt nun die Seite an. Zwischen der Normalansicht von FrontPage und der Vorschau im Browser ist kein Unterschied festzustellen. Dies liegt vor allem daran, dass die Seite lediglich einfachen Text enthält. Es gibt aber durchaus Seiten, deren Normal- und Vorschauansicht sich stark im Erscheinungsbild unterscheiden. Für unsere Zwecke soll dies aber im Moment keine Rolle spielen.
Darstellung der Seite im integrierten Browser überprüfen
195
6 Arbeiten mit FrontPage-Webs Abbildung 6.7: Ihre erste HTMLSeite
6.3
Änderungen am Web vornehmen
FrontPage 2002 verbindet die Werkzeuge zum Verwalten von Webs und zum Editieren von HTML-Seiten unter einer Oberfläche. Schließen Sie eine gerade bearbeitete Seite, bleibt das FrontPage-Web weiterhin im selben Fenster geöffnet. Alle Änderungen, die nicht die einzelnen Seiten selbst betreffen, werden durchgeführt, ohne sie zusätzlich speichern zu müssen. Ändern Sie eine Seite im Web, speichern Sie diese – wie unter Windows üblich – über das Menü DATEI | SPEICHERN, per Klick auf das Diskettensymbol oder über das Tastenkürzel (Strg)+(S).
6.3.1
Erstellen neuer Seiten
Um eine neue Seite in einem Web zu erstellen, wählen Sie in der Ordnerliste zunächst den Ordner aus, in dem die neue Seite erstellt werden soll. Klicken Sie dazu auf den gewünschten Ordner. Eine neue Seite erzeugen Sie, indem Sie im Menü DATEI | SEITE ODER WEB, die Dialogbox NEUE SEITE ODER NEUES WEB öffnen oder mit dem Tastenkürzel (Strg)+(N). Alternativ können Sie auch mit der rechten Maustaste auf den Ordner klicken und aus dem Kontextmenü die Funktion NEUE SEITE wählen.
196
Änderungen am Web vornehmen
6.3.2
Erstellen neuer Ordner
Einen neuen Ordner im Stammverzeichnis oder in einem bereits vorhandenen Ordner erstellen Sie, indem Sie den gewünschten Ordner in der Ordnerliste und im Menü DATEI | NEU den Punkt ORDNER auswählen. Einfacher geht es wiederum über das Kontextmenü jedes Ordners: Klicken Sie mit der rechten Maustaste auf den gewünschten Ordner und wählen Sie NEU | ORDNER.
6.3.3
Umbenennen von Ordnern und Dateien
Für das Umbenennen von Dateien und Ordnern gibt es keinen Menübefehl. Wählen Sie daher das umzubenennende Objekt mit der Maus und drücken Sie (F2), oder wählen Sie UMBENENNEN aus dem Kontextmenü, das Sie über die rechte Maustaste erreichen. Sie können aber auch in der Ordnerliste die umzubenennende Datei markieren und auf den Namen klicken. Beachten Sie jedoch, dass Sie den Dateityp der Datei beibehalten. Schließlich wird aus einer Textdatei keine Grafik, indem man ihr eine neue Endung verleiht. HTM oder HTML? Windows warnt Sie, wenn Sie den Dateityp einer Datei verändern wollen. Diese Warnung erscheint auch dann, wenn Sie den Dateityp HTM in HTML umwandeln wollen. Ausnahmsweise besteht zwischen diesen beiden Dateitypen kein Unterschied. Die Endung „.htm“ ist lediglich ein Zugeständnis an die früheren 16-Bit-Windows-Versionen (Windows 3.11 und früher), die mit langen Dateinamen nicht umgehen können und an die DOS-Namenskonvention gebunden sind. Die erlaubten Namen für Dateien unter MS-DOS bestehen aus acht Zeichen für den Namen und drei Zeichen für den Dateityp. Die Endung HTML aber besteht aus vier Zeichen und wird in dieser Form unter MS Windows 3.11 nicht verstanden. Es empfiehlt sich daher, den Dateityp HTM beizubehalten, um Probleme zu vermeiden. Weitere Informationen zu plattformspezifischen Namenskonventionen entnehmen Sie bitte Kapitel 7.
6.3.4
Verschieben und Löschen von Dateien und Ordnern
Dateien und Ordner können innerhalb des Webs zu jeder Zeit verschoben werden. FrontPage übernimmt automatisch die Umbenennung von Verknüpfungen in anderen Seiten, wenn sich die Position einer verknüpften Datei ändert. Dies betrifft gleichermaßen interne Hyperlinks, also Verknüpfungen mit anderen HTML-Seiten, wie auch Grafiken und andere in eine Seite eingebundene Dateien und Komponenten. Am übersichtlichsten gestaltet sich das Verschieben von Dateien und Ordnern, wenn Sie in die Ordneransicht wechseln. Klicken Sie dazu in der An-
Mit der Ordnerübersicht arbeiten
197
6 Arbeiten mit FrontPage-Webs
sichtenliste auf das Ordnersymbol oder wählen Sie das Menü ANSICHT | ORDNER. Klicken Sie nun im rechten Fenster auf die Datei, die Sie verschieben wollen (in unserem Beispiel die Datei index.htm). Ziehen Sie die Datei auf das Symbol des Zielordners in der Ordnerliste und lassen Sie die Maustaste los. Die Datei wird nun in den Zielordner verschoben. Ebenso können Sie mit Ordnern verfahren. Sie werden feststellen, dass sich FrontPage hier genauso verhält wie der Windows-Explorer. Abbildung 6.8: Verschieben von Dateien in der Ordneransicht
Möchten Sie die Datei im ursprünglichen Ordner belassen und in einen anderen Ordner kopieren, klicken Sie mit der rechten Maustaste auf die zu kopierende Datei und verschieben die Maus zum gewünschten Zielordner. Erst dort lassen Sie die Maustaste los und wählen aus dem erscheinenden Kontextmenü HIERHIN KOPIEREN. Weitere Optionen dieses Kontextmenüs erlauben Ihnen, die Datei zu verschieben oder, falls Sie die falsche Datei zum Kopieren ausgewählt haben, den Vorgang abzubrechen. Tastenkürzel zum Kopieren und Ausschneiden
Alternativ zu den beschriebenen Methoden können Sie auch die in Windows üblichen Verschiebe- und Kopiervorgänge nutzen. Wählen Sie die zu kopierende Datei und drücken Sie auf der Tastatur gleichzeitig (Strg)+(C). Zum Verschieben drücken Sie stattdessen (Strg)+(X). Wählen Sie nun den Ordner, in den Sie die Datei verschieben oder kopieren wollen, indem Sie mit der linken Maustaste darauf klicken, und drücken Sie nun (Strg)+(V). Reicht Ihnen das noch immer nicht? Natürlich können Sie auch die Funktionen AUSSCHNEIDEN oder KOPIEREN und EINFÜGEN aus dem Kontextmenü oder dem Menü BEARBEITEN auswählen.
198
Verwendung von Unterwebs
6.4
Verwendung von Unterwebs
Seit FrontPage 2000 gibt es die Möglichkeit, Unterwebs anzulegen. Ein Unterweb ist ein normales FrontPage-Web, das sich in einem übergeordneten Web befindet. Webübergreifende Einstellungen wie Designs können so für einen Teil des Webs, das so genannte Unterweb, angepasst werden. Am wichtigsten ist jedoch die Möglichkeit, den Zugriff auf einzelne Bereiche aus Sicherheitsgründen einzuschränken. Verändern Sie die Zugriffsberechtigungen für ein Unterweb, um verschiedenen Nutzergruppen zu erlauben oder zu untersagen, die Inhalte des Webs zu betrachten, zu bearbeiten oder zu verwalten. Auf diese Weise lassen sich geschützte Bereiche innerhalb eines Webs erstellen, ohne die Benutzerrechte des Servers selbst verändern zu müssen. Eine große Zahl von FrontPage-Benutzern wird sicher ihre Webs auf so genannten virtuellen Servern, das heißt gemieteten Teilen des Webservers eines kommerziellen Internetproviders publizieren. Eine individuelle Administration dieser Server ist dabei zumeist für den Kunden nicht möglich. FrontPage erlaubt es, trotz dieser Einschränkung mit Hilfe von Unterwebs die Zugriffsberechtigungen auf einzelne Ordner festzulegen. Die Verwendung von Sicherheitseinstellungen erläutern wir in Abschnitt 6.9.3 Zugriffsberechtigung.
Teile eines Webs schützen
Da Unterwebs reguläre Webs sind, weicht die Erstellung eines Unterwebs nicht von der Verfahrensweise der Erzeugung eines neuen Webs ab. Am einfachsten erstellen Sie ein neues Unterweb, indem Sie zunächst das übergeordnete Web in FrontPage öffnen. Ordner konvertieren Erstellen Sie einen neuen Ordner, benennen Sie ihn nach Wunsch und klicken Sie mit der rechten Maustaste auf den Ordner. Es erscheint ein Kontextmenü, aus dem Sie die Option IN WEB KONVERTIEREN wählen. FrontPage warnt Sie daraufhin, dass die Umwandlung eines Ordners in ein Web folgenschwere Konsequenzen haben kann. Bei der Umwandlung eines Ordners in ein Unterweb wird der Inhalt des Ordners zu einem selbstständigen Web. Da FrontPage die einzelnen Seiten und Hyperlinks darauf für das gesamte Web verwaltet und kontrolliert, können bei der Umwandlung die internen Verknüpfungen aufgehoben werden. Die Folge wäre, dass verschiedene Hyperlinks nicht mehr funktionieren oder Seiten, die andere Dateien enthalten, nicht aktualisiert würden, wenn die eingeschlossenen Dateien sich ändern. Informationen zu eingeschlossenen Seiten erhalten Sie in Kapitel 12. Erstellen Sie aber ein neues Unterweb aus einem leeren Ordner, besteht keine Gefahr. Bestätigen Sie also den Hinweis mit JA. Der Ordner wird umgewandelt, und in der Ordnerliste erscheint das Unterweb mit einem eigenen Ordnersymbol.
199
6 Arbeiten mit FrontPage-Webs Abbildung 6.9: Ein neues Unterweb in der Ordnerliste
Klicken Sie doppelt auf das Unterweb, um es zu öffnen. Daraufhin wird ein neues Fenster in FrontPage geöffnet, das die Struktur des Unterwebs anzeigt. Wie Sie sehen, unterscheidet sich das Web auch äußerlich nicht von dem vorhergehenden. Eine weitere Möglichkeit, ein Unterweb zu generieren, besteht darin, ein Web in einem bereits bestehenden Web als Unterweb zu veröffentlichen. Dieser Vorgang wird in Abschnitt 6.8 erläutert. Sie haben sich nun mit den Grundprinzipien der Webs vertraut gemacht. Bevor wir uns nun den weiteren Webvorlagen, die FrontPage bietet, widmen, schließen Sie das Web über das Menü DATEI | WEB SCHLIESSEN.
6.5
Die Webvorlagen
Sie haben bereits mit Hilfe der Vorlage STANDARDWEB das erste Web erstellt. Gerade wenn Sie sich aber erst in die Materie der Entwicklung von Websites vorarbeiten, ist ein gänzlich leeres Web nicht gerade ein Ansporn, um die ersten Seiten zu entwerfen. Glücklicherweise liefert FrontPage eine Anzahl von Vorlagen mit, die es erleichtern, eine Reihe von Seiten zu erstellen. Die Webvorlagen und Assistenten bieten Grundstrukturen, die schon für verschiedene Einsatzmöglichkeiten vorbereitet sind. So wird Ihnen der Aufbau einer ersten Struktur erleichtert. Die Webvorlagen eignen sich auch sehr gut, um die verschiedenen Ansichtsfunktionen von FrontPage kennen zu lernen.
200
Die Webvorlagen
6.5.1
Die Vorlage Leeres Web
Wie der Name schon sagt, wird mit dieser Vorlage ein neues Web ohne Inhalt erstellt. FrontPage legt lediglich ein Web mit den Standardordnern und Konfigurationsdateien an. Viel mehr passiert hier nicht. Da Sie aber immer zumindest eine Seite in Ihrem Web benötigen, um überhaupt etwas veröffentlichen zu können, ist die Verwendung der Vorlage STANDARDWEB wohl in den meisten Fällen sinnvoller. Existieren bereits Seiten oder Webs, die Sie in eine leere Struktur importieren möchten, eignet sich diese Vorlage gut. Sollten Sie beispielsweise Ihre Homepage bisher mit einer anderen Software als FrontPage bearbeitet haben und möchten nun umsteigen, ist ein leeres Web die beste „Hülle“ für Ihre bestehenden Seiten.
Import vorhandener Seiten vorbereiten
Dazu ist die Importfunktion von FrontPage noch besser geeignet. Wie Sie Seiten und Webs importieren können, entnehmen Sie Abschnitt 6.7.
6.5.2
Die Vorlage Persönliches Web
Zur Erstellung einer privaten Homepage eignet sich diese Vorlage. Das daraus generierte Web enthält fünf einfache Seiten, die Anweisungen für die Anpassung umfassen und Anregungen geben, womit das persönliche Web gefüllt werden kann. Abbildung 6.10: Die Startseite des persönlichen Webs
201
6 Arbeiten mit FrontPage-Webs
Klicken Sie in der Ordnerliste doppelt auf die einzelnen HTML-Seiten, um deren Inhalt zu betrachten. Unter den Titeln „Interessen“, „Fotoalbum“ und „Favoriten“ sind typische Teile einer privaten Homepage angelegt. Um die Struktur des Webs und die Beziehungen der einzelnen Seiten untereinander genauer betrachten zu können, wechseln Sie in die NAVIGATIONSANSICHT. Klicken Sie dazu in der Ansichtenliste auf NAVIGATION, oder wählen Sie das Menü ANSICHT | NAVIGATION. Abbildung 6.11: Das persönliche Web in der Navigationsansicht
Strukturierung des Webs
Die Navigationsansicht verdeutlicht die Struktur des Webs. Die Homepage – also die Startseite des Webs – steht in der Hierarchie der Seiten ganz oben, auf Ebene 1. Die weiteren Seiten befinden sich in der zweiten Ebene unterhalb der Startseite. Wenn Sie auf eins der gelben Seitensymbole klicken, wird in der Statuszeile von FrontPage, das heißt am linken unteren Rand des FrontPage-Fensters, der Name der jeweiligen Datei angezeigt. Erstellen Sie eine Kopie der Seite photo.htm, indem Sie in der Ordneransicht die Datei kopieren und in denselben Ordner wieder einfügen. Es wird eine Datei namens photo_kopie(1).htm erzeugt. Nun fällt auf, dass diese neue Seite nicht in der Navigationsansicht gezeigt wird. Die Navigationsansicht dient also nicht der Darstellung aller Seiten im Web oder der Verknüpfungen unter ihnen. Vielmehr wird hier festgelegt, wie die Seiten hierarchisch gegliedert sind. Wichtig ist dies vor allem für Hauptseiten eines Webs. Untergeordnete Seiten müssen in dieser Ansicht nicht auftauchen, sofern Sie nicht die Navigationsleistenfunktion von FrontPage nutzen wollen.
202
Die Webvorlagen
Navigationsleisten Um die Eigenschaften der Navigationsleisten kennen zu lernen, wechseln Sie noch einmal zurück in die Seitenansicht. Sofern sie nicht mehr geöffnet ist, klicken Sie in der Ordnerliste doppelt auf die Datei index.htm, um sie im Bearbeitungsfenster anzuzeigen. Bewegen Sie nun die Maus über die Liste der Hyperlinks („Über mich“, „Interessen“, „Fotoalbum“, ...) auf der linke Seite. Der Mauszeiger ändert seine Form und zeigt eine Hand, die auf eine Karteikarte weist, wie in Abbildung 6.12. Dieser Mauszeiger taucht in FrontPage immer dann auf, wenn Sie die Maus über eine sogenannte aktive Komponente bewegen. Diese aktiven Komponenten sind Teile einer Seite, die mit Hilfe von FrontPage-Funktionen angepasst werden können und erst, wenn sie im Browser angezeigt werden, in „echtes“ HTML umgewandelt werden. Abbildung 6.12: Der Komponentenmauszeiger
Klicken Sie doppelt auf die Hyperlinks, erscheint ein neues Fenster, das die Eigenschaften der Navigationsleiste anzeigt. Abbildung 6.13 zeigt dieses Fenster. Abbildung 6.13: Das Fenster „Eigenschaften der Hyperlinkleiste“
Links in diesem Fenster ist eine grafische Darstellung zu sehen, die an die Navigationsansicht erinnert. Und richtig, hier findet sich die Navigationsstruktur wieder, denn die Navigationsleiste wird von FrontPage anhand der Einstellungen in der Navigationsansicht generiert. Verändern Sie also in der Navigationsstruktur die Zugehörigkeit einer Seite zu einer Ebene, ändern sich auch die Navigationsleisten im gesamten Web. Die hier verwendete Navigationsleiste stellt die Seiten der zweiten Ebene als vertikal angeordnete Texthyperlinks dar.
Grafische Navigationsstruktur
203
6 Arbeiten mit FrontPage-Webs
Design und Grafik Dem persönlichen Web ist bereits eines der FrontPage-Designs zugewiesen, das für eine im gesamten Web einheitliche Optik sorgt. Ein FrontPage-Design ist eine Sammlung von Vorgaben für Farben und Schriften, die für ein gesamtes Web gelten. Darin enthalten sind neben diesen Regeln auch Navigationselemente und Grafiken für die Überschrift. Setzen Sie in Ihrem Web ein Design ein, müssen Sie sich nicht immer wieder neu auf jeder Seite mit den Navigationselementen beschäftigen, sondern können sie immer wieder verwenden. Grafische Elemente fast automatisch
Ein besonderes Merkmal von FrontPage ist dabei, dass es Grafiken mit Text versehen kann, ohne dass Sie ein Grafikprogramm benötigen. In diesem Fall besteht die Überschrift der Startseite in Abbildung 6.14 aus einer vom Design vorgegebenen Grafik, in die FrontPage die Wörter „Meine Website“ eingefügt hat. Auch das Erscheinungsbild der Navigationsleiste wird vom Design gesteuert. Dort werden die Namen der Seiten, auf die verwiesen wird, automatisch nach den Designvorgaben eingefügt. Um die Überschrift anzupassen, klicken Sie mit der linken Maustaste doppelt auf die Überschrift. Das Fenster SEITENBANNEREIGENSCHAFTEN erscheint. Seitenbanner ist in FrontPage die Bezeichnung für die Hauptüberschrift einer Seite, die in Form eines vertikalen Banners als Grafik oder Text erscheint.
Abbildung 6.14: Das Fenster zum Anpassen des Seitenbanners
Das Aussehen und der Inhalt aller sonstigen Elemente der Seite werden ebenfalls durch das Design gesteuert. Wie Sie FrontPage-Designs zuweisen, anpassen und ändern können, wird in Kapitel 8 erläutert. Haben Sie schon Lust bekommen, die Seiten nach Ihrem Geschmack zu gestalten und anzupassen? Kapitel 7 zeigt Ihnen genau, wie Sie einzelne Seiten erstellen und bearbeiten.
6.5.3
Die Vorlage Projekt-Web
Nachdem Sie ein neues Web mit der Vorlage PROJEKT-WEB erstellt haben, ist der Bildschirm schon recht voll. Sie sollten sich daher erst einmal einen Überblick über das Web verschaffen. Wechseln Sie dazu in die Navigationsansicht.
204
Die Webvorlagen
Falls Ihr Bildschirm jetzt überquillt, können Sie die Navigationsansicht nach Ihren Wünschen anpassen. Sofern die Symbolleiste NAVIGATION noch nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf die Symbolleisten am oberen Bildschirmrand. Es erscheint ein Kontextmenü, das Ihnen weitere Symbolleisten zur Verfügung stellt. Klicken Sie auf NAVIGATION, um die Symbolleiste einzublenden. Neben der Zoomeinstellung haben Sie hier auch die Möglichkeit, den Strukturbaum horizontal oder vertikal anzuzeigen. Bei längeren Seitennamen oder vielen Seiten auf einer Ebene ist es oft sinnvoll, die Navigationsstruktur im Hoch- statt im Querformat anzuzeigen. Dies ist jedoch eine reine Ansichtssache und hat natürlich keinen Einfluss auf die Verknüpfung der Seiten. Abbildung 6.15: Das Projekt-Web mit Navigationsansicht im Hochformat
Mit der Vorlage PROJEKT-WEB bietet FrontPage ein Web, das sich für die Verwendung in einer Arbeitsgruppe oder einem Verein eignet. Fast scheint es, als wolle Microsoft einen Einblick in die eigenen Arbeitsabläufe geben, denn das Projekt, das in dieser Vorlage exemplarisch vorgestellt wird, beschäftigt sich mit der Entwicklung einer Softwareanwendung. Bereiche des Projekt-Webs 왘 Mitglieder
Dieser Bereich ist darauf ausgerichtet, den Mitgliedern der Projektgruppe eine Übersicht aller Mitarbeiter mit Adressinformationen und Funktionen zu geben. Die Namen sind alphabetisch geordnet und mit
205
6 Arbeiten mit FrontPage-Webs
einem Index verbunden, der schnellen Zugriff auf Namen erlaubt, die weiter unten auf der Seite zu finden sind. Eine solche Liste ist auch dann sinnvoll, wenn die Mitarbeiter Ihres Unternehmens verschiedene Funktionen innehaben. Die Besucher finden so leichter den gewünschten Ansprechpartner. 왘 Zeitplan
Ob Sie sich selbst einen Zeitplan stellen, mehrere Mitarbeiter in die Planung einbeziehen oder die Aufgaben in der Projektarbeit nach Phasen strukturieren wollen: Diese Vorlage für einen Zeitplan ist nicht nur für das Internet nützlich. 왘 Archiv
Im Beispielarchiv sind Dokumente und Werkzeuge abgelegt, nach Kategorien sortiert und mit Autoreninformationen und Daten versehen. 왘 Suchen
Die Suchfunktion ist eine der besonders nützlichen Funktionen von FrontPage. Es ist nicht ohne weiteres möglich, alle Seiten einer Website nach bestimmten Kriterien zu durchsuchen und sich die Ergebnisse anzeigen zu lassen. FrontPage erlaubt mit den Servererweiterungen eine solche Suche. Schon bei kleineren Seiten mit etwa zehn Seiten lohnt sich die Suchfunktion. 왘 Diskussionen
Die beiden Diskussionsforen, die hier schon eingerichtet sind, bieten den Besuchern die Möglichkeit, Fragen zu stellen und sich miteinander auszutauschen. Mit einem Formular können neue Artikel erstellt und vorhergehende Nachrichten beantwortet werden. Eine öffentliche Diskussion bietet auch die Möglichkeit, telefonische Beratung zu verringern und häufig gestellte Fragen zu beantworten. Wenn Sie Ihre Diskussionsforen gut nach Kategorien aufteilen, erleichtern Sie den Besuchern das Finden von Antworten und die Platzierung der Frage am richtigen Ort. 왘 Kontakt
Hier finden sich auf einen Blick E-Mail-Adressen, oder auch die Postadresse und Telefon- und Faxnummern. Damit enthält dieses Web schon einen Großteil der wichtigsten Funktionen von FrontPage. Mit den FrontPage-Komponenten beschäftigt sich Kapitel 12. Auch wenn wir im Moment nicht alle Funktionen der im Projekt-Web verwendeten Komponenten erläutern, sollten Sie noch einen Blick auf die verschiedenen Seiten werfen. Wechseln Sie dazu in die Seitenansicht oder klicken Sie einfach doppelt auf die Seite index.htm in der Ordnerliste. Die Seitenansicht wird dann automatisch aufgerufen.
206
Die Webvorlagen
Hyperlinks in Webs Sie sind es von Ihrem Internetbrowser gewohnt, mit einem einfachen Klick auf einen Hyperlink die damit verknüpfte Seite anzuzeigen. Da Sie in FrontPage ja aber Hyperlinks auch verändern wollen, bleibt hier ein Klick ohne Wirkung. Das ist auch sinnvoll, denn schließlich ist ein Hyperlink nichts anderes als Text, dem eine bestimmte Funktion zugeordnet ist. Um dem Hyperlink zu folgen, das heißt die Seite, auf die er verweist, in der Seitenansicht zu öffnen, halten Sie die Taste (Strg) gedrückt und klicken dann mit der Maus darauf. Die Navigationsleisten, deren Funktionen wir bereits besprochen haben, sind automatisch generierte Zusammenfassungen der Hyperlinks auf die Seiten, die in einer Ebenenstruktur angelegt sind. Darüber hinaus enthält jede Seite des Web aber auch andere Hyperlinks. Eine Übersicht dieser Hyperlinks wird in der Hyperlinkansicht dargestellt. Um diese aufzurufen, klicken Sie auf das Symbol HYPERLINK in der Ansichtenleiste oder wählen das Menü ANSICHT | HYPERLINKS.
Hyperlinkansicht nutzen
Abbildung 6.16: Die Startseite des Projekt-Webs in der Ansicht Hyperlinks
Wie die Titelzeile der Navigationsansicht in Abbildung 6.16 zeigt, werden Hyperlinks in dieser Ansicht immer nur für eine Seite – hier die Seite index.htm – dargestellt. Dabei ist zu beachten, dass nicht nur Hyperlinks, die von dieser Seite aus auf andere Seiten verweisen, sondern auch solche, die von anderen Seiten auf diese Seite zeigen, angezeigt werden. Jeweils links von einer Seite stehen die Hyperlinks zu dieser Seite, rechts davon die Hyperlinks, die in dieser Seite enthalten sind. Lesen Sie also die Hyperlinkansicht immer von links nach rechts.
207
6 Arbeiten mit FrontPage-Webs
Möchten Sie zusätzlich Verknüpfungen anderer Seiten einbeziehen, klicken Sie auf das Pluszeichen in der linken oberen Ecke einer Seite. Abbildung 6.17 zeigt das für die Seite discuss.htm. Hat eine Seite kein solches Zeichen, existiert kein weiterer Hyperlink für diese Seite. Hier ist Obacht geboten, denn zirkuläre Verlinkungen werden der Übersichtlichkeit halber nicht mit Pfeilen in beide Richtungen angezeigt. Pfeile zeigen immer von links nach rechts. In unserem Beispiel taucht neben anderen die Datei members.htm bereits viermal auf, obwohl es sie im Web nur einmal gibt. Abbildung 6.17: Dateien erscheinen durchaus mehrfach in der Ansicht Hyperlinks
Weil die Übersichtlichkeit bei einem umfangreichen Web leicht schwindet, können Sie aber auch nur die Hyperlinks für eine einzelne Seite anzeigen. Klicken Sie dazu mit der rechten Maustaste auf die entsprechende Seite und wählen Sie aus dem Kontextmenü die Funktion IN DIE MITTE VERSCHIEBEN. Optionen der Hyperlinkansicht Andere Optionen für die Darstellung können Sie über das Kontextmenü eines Verknüpfungspfeils auswählen. 왘 Seitentitel anzeigen 왘 Statt der Namen der HTML-Dateien werden in der Hyperlinkansicht die
Titel der Seiten angezeigt. Diese Darstellungsweise kennen Sie aus der Navigationsansicht, und gerade bei vielen Seiten mit kurzen Dateinamen wird diese Ansichtsoption hilfreich sein. 왘 Hyperlinks zu Bildern
Sind in eine Seite Grafiken eingebunden, verweisen Hyperlinks auch auf diese Dateien. Standardmäßig werden sie nicht mit angezeigt.
208
Die Webvorlagen 왘 Wiederholte Hyperlinks
Enthält eine Seite mehrere Hyperlinks auf dasselbe Objekt, wird die Verknüpfung nicht nur einmal angezeigt. Wundern Sie sich also nicht, wenn in einer Seite, die von mehreren Punkten aus auf eine Datei verweist, in der Hyperlinkansicht dieses Zielobjekt mehrfach auftaucht. Sollte es Sie irritieren, schalten Sie diese Option ab. Broken Links Am Beispiel der Seite index.htm möchte ich eine wichtige Funktion der Hyperlinkansicht zeigen. Erstellen Sie bitte zur Anschauung einen Hyperlink auf eine nicht vorhandene Datei. Hierzu markieren Sie das Wort „Baumhaus“ in der Beschreibung des Projektes und klicken es rechts an, um im Kontextmenü den Punkt HYPERLINKS zu wählen. In der folgenden Dialogbox geben Sie in das Feld „Adresse“ bitte baumhaus.htm ein, bestätigen und speichern die Seite index.htm ab. Dann wechseln Sie wieder in die Hyperlink-Ansicht.
Unterbrochene Hyperlinks aufspüren
Die falsche Verbindung nach baumhaus.htm wird angezeigt, fehlt das Zielobjekt jedoch, wird die Verknüpfungslinie unterbrochen dargestellt. Diesen Fehler bezeichnet man als unterbrochenen Hyperlink oder auf Neudeutsch als Broken Link. Was passiert, wenn Sie auf einen Hyperlink klicken, dessen Zielobjekt fehlt, kennen Sie sicher zur Genüge. Meist erscheint in solchen Fällen im Browser eine Seite mit der Fehlermeldung 404 - Not Found – Objekt nicht gefunden. Solche Fehler können Sie vermeiden, wenn Sie vor der Veröffentlichung die Seite prüfen. Die Hyperlinkansicht hilft Ihnen, schon zeitig unterbrochene Hyperlinks aufzuspüren und zu reparieren. Mit dem Qualitätsmanagement beschäftigt sich das Kapitel 13. Abbildung 6.18: Unterbrochene Hyperlinks in der Seite index.htm
209
6 Arbeiten mit FrontPage-Webs
6.5.4
Die Vorlage Kundenunterstützungs-Web
FrontPage ist Teil der Microsoft Office-Suite. Damit ist schon einer der wichtigsten Einsatzorte der Office-Anwendungen vorgegeben: Unternehmen erhalten integrierte Werkzeuge für ihre Arbeit. Insofern zielen auch die meisten der Webvorlagen auf die Verwendung im Unternehmen ab. Abbildung 6.19: Das Kundenunterstützungs-Web in der Vorschau
Das Kundenunterstützungs-Web ist eine gut strukturierte Vorlage für die Website eines Unternehmens, das Software entwickelt und vertreibt. Wie der Name schon sagt, liegt der Fokus auf der Kommunikation mit den Kunden. Exemplarisch wird ein Web einer fiktiven Softwarefirma vorgestellt. Es wird Sie aber sicher nicht viel Fantasie kosten, diese Vorlage auf Ihre Bedürfnisse hin anzupassen. Bereiche des Kundenunterstützungs-Webs 왘 Neuigkeiten
In Kalenderform werden hier Informationen zu Änderungen und Ergänzungen auf der Website aufgelistet. Eine solche Funktion ist besonders nützlich, wenn Sie regelmäßig Änderungen vornehmen und Ihren Besuchern ersparen wollen, jedes Mal die verschiedenen Bereiche auf neue Informationen zu untersuchen. Legen Sie eine solche Seite an, heißt das aber auch, sie tatsächlich gewissenhaft zu führen. Wenn der letzte Eintrag ein halbes Jahr zurückliegt, wird das Interesse an Ihren Seiten schnell verfliegen. Außerdem werden die Besucher Ihrer Website den Angaben in Ihrer Neuigkeiten-Seite Vertrauen schenken. Wenn Sie also beispielsweise eine neue Softwareversion zum Download bereitstellen,
210
Die Webvorlagen
aber vergessen, dies auf der Neuigkeiten-Seite zu vermerken, wird wohl kaum jemand in den Download-Bereich wechseln. 왘 Produkte
Was produziert Ihr Unternehmen? Präsentieren Sie so ausführlich wie möglich Ihre Produkte, am besten gleich mit einem Bild. Verteilen Sie die Informtationen auf mehrere Seiten oder verlinken sie zum Beispiel auf die Download-Seite für nähere Informationen. 왘 Fragen & Antworten
Eher aus der Not entstanden ist dieser typische Bereich einer Unternehmens-Website. Erfahrungsgemäß zielen die meisten der Kundenanfragen auf immer die gleichen Themen ab. Support ist teuer und wird oftmals von potenziellen Kunden gar nicht in Anspruch genommen. Dem vorzubeugen dient ein „Fragen & Antworten“-Bereich. Im Englischen wird eine Liste der häufig gestellten Fragen auch mit FAQ (von „frequently asked questions“) abgekürzt. Sie ersparen sich Kosten und Mühe, wenn Sie einen solchen Bereich einrichten. Fragen Sie sich auch selbst, was Ihre Kunden interessieren könnte und schreiben Sie zu diesen wichtigen Fragen eine leicht verständliche, präzise Antwort. Ihre Kunden werden es Ihnen danken. 왘 Fehler
Die Entwicklung eines neuen Produktes birgt eine Reihe von Fehlerquellen, die oftmals erst dann entdeckt werden, wenn sich die tatsächlichen Benutzer damit beschäftigen. Fehlt etwas, funktioniert etwas überhaupt nicht oder nicht so, wie die Benutzer es erwarten? Geben Sie den Benutzern die Möglichkeit, Ihnen dies auf einfache Art und Weise mitzuteilen. Damit Sie nicht mit einer Gegenfrage antworten müssen, was denn genau unter welchen Umständen nicht funktioniert, ist ein Formular die beste Variante, die von Ihnen benötigten Informationen zu erhalten. Wie Formulare funktionieren und wie sie ausgewertet werden können, erfahren Sie in Kapitel 10. 왘 Vorschläge
Sie haben sich viele Gedanken gemacht, wie Ihr Produkt oder Ihre Website beschaffen sein soll, damit sie ihren Zweck erfüllen. Es ist aber fast unmöglich, alle Wünsche der Benutzer zu erahnen. Geben Sie Ihren Besuchern die Möglichkeit, Verbesserungsvorschläge zu machen. Ein solches Feedback bringt kostenlose Ideen, und die Besucher haben das gute Gefühl, dass Sie daran interessiert sind, was die Besucher denken und wünschen. Auch hier kommt wieder ein Formular zum Einsatz, das es den Besuchern erleichtert, alle notwendigen Informationen anzugeben. Übrigens: Vergessen Sie nicht, sich bei den Absendern zu bedanken. Sie wollen ja schließlich nicht das Gefühl hinterlassen, die Nachricht sei in den Weiten des Netzes in einem schwarzen Loch gelandet.
211
6 Arbeiten mit FrontPage-Webs 왘 Download
Sie kennen es sicher selbst: Ein Download-Bereich hat magische Anziehungskraft. Auch wenn es sich nur um eingeschränkte Testversionen handelt, kommt es uns doch so vor, als bekäme man etwas geschenkt. Haben Sie eine Website, stellen aber keine Software her, stellen Sie doch Ihren Produktkatalog oder Ihre Imagebroschüre zum Download bereit! Warum nicht ein paar Bilder vom Unternehmen oder eine hübsche Postkartenvorlage (mit dezent platziertem Firmenlogo), die sich Ihre Besucher ausdrucken können? Was erst einmal auf der Festplatte gelandet ist, wird sicher noch einmal in Ruhe angeschaut, nachdem die Verbindungsuhr nicht mehr tickt. 왘 Unterstützungsforum
Dieses Diskussionsforum ist schon im Projekt-Web enthalten. Kapitel 6 führt Sie in die Verwendung des Diskussions-Webassistenten ein, mit dem Sie ein individuelles Diskussionforum erstellen können. 왘 Suchen
Erwarten Sie nicht, dass Ihre Besucher mit Ihrer Navigation hundertprozentig klarkommen. Eine Suchfunktion ist mit FrontPage einfach zu realisieren und hilft Ihren Besuchern, schnell das zu finden, was sie wissen wollen, ohne sich durch mehrere Navigationsebenen zu hangeln. Vorschaumodus Da das Kundenunterstützungs-Web recht umfangreich ist, lohnt es sich, in den Vorschaumodus von FrontPage zu wechseln. Der Vorschaumodus stellt die Seiten des Webs im Internet Explorer dar. Internet Explorer als Vorschaufenster
Dazu wird der Browser in die FrontPage-Oberfläche eingebunden, funktioniert aber genau so, wie Sie es gewohnt sind. Leider ist es nicht möglich, andere Browser zur internen Vorschau zu benutzen. Freunde von Netscape Navigator oder Opera müssen also damit Vorlieb nehmen. Zu Ihrer Beruhigung sollte angemerkt werden, dass der mit FrontPage ausgelieferte Internet Explorer 5.5 Internetseiten größtenteils korrekt nach den Maßgaben des W3C (WWW Consortium), also des Konsortiums, das die Festlegungen der Seitenbeschreibungssprache HTML herausgibt, darstellt. Darüber hinaus bietet der Internet Explorer eine Vielzahl von interessanten Merkmalen. Kapitel 4 geht näher darauf ein. Den Vorschaumodus aktivieren Sie über die Registerkarte Vorschau, die sie in der linken unteren Ecke des Seitenansichts-Fensters finden. Abbildung 6.19 zeigt das Kundenunterstützungs-Web in der Vorschau. Sie können nun wie gewohnt im Web navigieren und die verschiedenen Funktionen ausprobieren.
212
Die Web-Assistenten
6.6
Die Web-Assistenten
Die Web-Assistenten sind de facto nichts anderes als Vorlagen mit der zusätzlichen Möglichkeit, die Vorlage im Entstehungsprozess den eigenen Anforderungen anzupassen. Wie Sie in den Vorlagen gemerkt haben, fehlen dort individuelle Namen, sind Komponenten enthalten, die Sie eventuell gar nicht benötigen, oder es fehlen Seiten, die Sie ergänzen möchten. Die Assistenten nehmen Ihnen Anpassungsarbeit ab, indem Sie schon vor der Erstellung des Webs persönliche Angaben machen können, die dann für das gesamte Web übernommen werden. Mit Hilfe des ersten Assistenten soll ein Projekt erstellt werden, das Sie im Verlauf der nächsten Kapitel stetig erweitern und verbessern können. Wählen Sie den Firmenpräsenzweb-Assistenten, der die flexibelste Vorlage für ein Web darstellt und leicht an die eigenen Bedürfnisse anzupassen ist. Wenn Sie Lust haben, schon von Anfang an Ihre eigenen Daten einzugeben, können Sie dies tun.
6.6.1
Der Web-Assistent für Firmenpräsenz im Internet
Wählen Sie das Menü DATEI | NEU | SEITE ODER WEB und öffnen Sie das Fenster WEBVORLAGEN. Dort erstellen Sie ein neues Web mit dem Firmenpräsenzweb-Assistenten, indem Sie mit der Maus auf das Symbol dieses Assistenten klicken und im Feld „Adresse des neuen Webs angeben“ einen neuen Ordner für das zu erstellende Web eintragen. Nachdem Sie auf OK geklickt haben, wird in dem von Ihnen angegebenen Ordner ein neues Web erstellt und das erste Assistentenfenster (Abbildung 6.20) angezeigt. Dort bleibt Ihnen nicht viel mehr zu tun, als die wunderbare Metaphorik des Startbildes zu bewundern. Klicken Sie auf WEITER. Abbildung 6.20: Der Firmenpräsenzweb-Assistent wird gestartet
213
6 Arbeiten mit FrontPage-Webs
Im zweiten Fenster (Abbildung 6.21) können Sie auswählen, welche Seiten und Funktionen vom Assistenten generiert werden sollen. Die Funktionen einiger dieser Bereiche haben Sie schon kennen gelernt. Für das Beispiel sollen alle angebotenen Optionen verwendet werden. Abbildung 6.21: Auswahl der Hauptbereiche des neuen Webs
Abbildung 6.22 zeigt das dritte Fenster, das Kategorien, die auf der Startseite erscheinen sollen, erfasst. Generell sollte Ihre Homepage die Besucher nicht mit Informationen überhäufen, im Internetjargon „zumüllen“ genannt. Ein fröhliches „Herzlich Willkommen“ ist dort meist zweckmäßiger als der Versuch, alles über den Inhalt der Website sagen zu wollen. Außerdem ist es am besten, die verschiedenen Themen wie Firmenprofil und Kontaktinformationen auf mehrere Seiten zu verteilen, da oft nicht bis zum unteren Rand einer Seite gescrollt wird, um nachzuschauen, ob dort nicht vielleicht die Information versteckt ist, die man sucht. Wie der Text in diesem Fenster nahe legt, sollte also lediglich kurz und knapp erzählt werden, wer diese Website mit welchem Ziel führt. Eine Einführung und eine Erklärung zum Unternehmensziel sollen daher auf der ersten Seite reichen. Wie bereits erläutert, bietet eine Neuigkeiten-Seite den Besuchern aktuelle Informationen und weist auf Änderungen hin. Obwohl Pressemitteilungen auch separat aufgeführt werden sollten, können Sie gerade in der Startphase solche Mitteilungen auch auf der Neuigkeiten-Seite einblenden.
214
Die Web-Assistenten Abbildung 6.22: Informationen, die auf Ihrer Homepage erscheinen sollen
Abbildung 6.23: Die Kategorien der Seite „Neuigkeiten“
Nun fragt Sie der Assistent, wie viele Produkte und Service-Angebote Sie präsentieren wollen. Für das Beispielprojekt sollen zwei Produkte und zwei Service-Angebote ausreichen. Abbildung 6.24: Anzahl der Produkte und Service-Angebote
215
6 Arbeiten mit FrontPage-Webs Stellen Sie sich ausführlich vor
Nun können Sie auswählen, welche Informationen Sie zu Ihren Produkten und Service-Angeboten bereitstellen wollen. Was Informationen betrifft, gilt die Regel „Weniger ist mehr“ ausnahmsweise nicht. Je ausführlicher Sie Ihre potenziellen Kunden mit Ihren Angeboten vertraut machen, umso besser kann der Kunde vergleichen und desto leichter wird eine Entscheidung zum Kauf fallen – natürlich vorausgesetzt, Leistungsmerkmale und Preis Ihres Produktes sind besser als bei der Konkurrenz. Aber selbst wenn dies nicht der Fall sein sollte, kann ein gutes Produktfoto oder eine eindrucksvolle Referenzliste einiges bewirken. Sparen Sie hier also nicht an Material. Auch die Möglichkeit zum Anfordern weiterer Informationen sollten Sie immer einräumen.
Abbildung 6.25: Inhalte für die Produkte und ServiceAngebote
Nutzen Sie Formulare für die Kontaktaufnahme der Besucher mit Ihnen, müssen Sie im nächsten Fenster (Abbildung 6.26) festlegen, welche Daten übermittelt werden sollen. Hier ist Ihnen überlassen, welche Informationen Sie erhalten möchten. Wenn Sie einen Produktkatalog per Post versenden wollen, könnte die E-Mail-Adresse überflüssig sein; bei einem Angebot, das sich an Privatleute richtet, könnten Sie auf Position und Organisation verzichten. Bedenken Sie immer, dass Sie nur die Informationen abfragen, die Sie auch wirklich benötigen und auswerten wollen. Die Besucher sollen sich schließlich nicht ausspioniert vorkommen. Denken Sie auch daran, darauf hinzuweisen, dass Sie die eingesandten Informationen vertraulich behandeln, nicht weitergeben und nur für den vom Besucher beabsichtigten Zweck einsetzen.
216
Die Web-Assistenten Abbildung 6.26: Anfrage für die Datenfelder in Feedback-Formularen
Sobald ein Besucher ein Formular absendet, werden die Inhalte des Formulars als ein Datensatz gespeichert. In dem in Abbildung 6.27 gezeigten Fenster können Sie angeben, in welchem Format die Angaben gespeichert werden sollen. Setzen Sie eine Datenbank oder eine Adressbuchanwendung ein, etwa Access, Excel, orgAnice oder das Windows-Adressbuch für Outlook Express, sollten Sie auf jeden Fall das Format TEXT MIT TAB-TRENNZEICHEN auswählen. Die einzelnen Formularfelder werden dann hintereinander in einer Textdatei gespeichert. Diese Textdatei können Sie aber auch mit einem beliebigen Texteditor, Excel oder sogar mit FrontPage selbst öffnen, formatieren und bei Bedarf in eine Webseite umwandeln. Auf die zweite angebotene Variante, die Feedback-Datei als HTML-Seite zu speichern, sollten Sie daher möglichst nicht zurückgreifen, auch wenn Sie derzeit noch keine Datenbank nutzen. Es gibt keinen guten Grund, diese Variante zu wählen. Abbildung 6.27: Anfrage für das Dateiformat der Feedback-Datei
Im nächsten Schritt können Sie das Format des Inhaltsverzeichnisses wählen. Ein anderes Wort für Inhaltsverzeichnis, über das Sie sicher schon einmal gestolpert sind, ist Site Map, also eine grafische Darstellung (Karte) der
Inhaltsverzeichnisse anlegen
217
6 Arbeiten mit FrontPage-Webs
Struktur Ihrer Website. Das Inhaltsverzeichnis ähnelt der Hyperlinkansicht, die Sie in FrontPage schon kennen gelernt haben. Damit Sie sich nicht bei jeder Änderung einer Seite mit der Aktualisierung des Inhaltsverzeichnisses abgeben müssen, aktivieren Sie die Funktion SEITE AUTOMATISCH AKTUALISIEREN. Eine erstklassige Hilfe! Abbildung 6.28: Anfrage für die Darstellung des Inhaltsverzeichnisses
Damit Sie ein einheitliches Aussehen Ihres Webs erhalten, können Sie nun angeben, welche wichtigen Elemente auf allen Seiten erscheinen sollen. Dazu gehören das Logo Ihrer Firma oder Website, Titel der Seite, Navigationsleisten für die Hauptbereiche Ihres Webs und detaillierte Informationen zu den einzelnen Seiten. Falls Sie bereits ein Logo als Grafikdatei haben, können Sie das Feld FIRMENLOGO angekreuzt lassen. Für unsere Zwecke soll zunächst kein Logo eingebunden werden, dies kann auch später noch geschehen. Sie können nun wählen, ob Sie am oberen oder unteren Seitenrand Hyperlinks zu den wichtigsten Seiten einfügen wollen. Wählen Sie den unteren Bildschirmrand, da unterhalb des Seitenbanners automatisch eine Navigationsleiste eingefügt wird. So können Ihre Besucher, auch wenn sie die Seite nach unten gescrollt haben, weiter navigieren, ohne wieder an den Anfang der Seite zurückkehren zu müssen. Es ist empfehlenswert, die E-Mail-Adresse des Webmasters anzugeben, damit Besucher Sie bei Fragen kontaktieren können, ohne erst nach der Adresse zu suchen. Einen Copyright-Vermerk sollten Sie ebenfalls anbringen, schließlich stecken Sie viel Arbeit und Ideen in Ihre Website, die Sie zumindest formell schützen sollten. Rechtlich ist es nicht von Belang, ob auf jeder Seite ein entsprechender Vermerk steht. Aktivieren Sie auch das Feld DATUM DER LETZTEN BEARBEITUNG, erscheint auf jeder Seite eine Notiz, die immer dann aktualisiert wird, wenn die Seite verändert wurde.
218
Die Web-Assistenten Abbildung 6.29: Anfrage für die Grobstruktur Ihrer Seiten
Es folgt eine Anfrage, die Sie mit einem entschiedenen Mausklick verneinen können. Zwar sind tatsächlich recht häufig Hinweise darauf zu finden, dass sich eine Seite im Aufbau befindet; aber da das Internet ein schnelles Medium ist, das ständiger Veränderung unterworfen ist, und da Webseiten von ihrer Aktualität leben, ist ein solches Zeichen, wie es Ihnen FrontPage vorschlägt, eher ein Hinweis darauf, dass Sie nicht ganz fertig geworden sind. Diese Tatsache macht Ihre Besucher aber nicht gerade neugieriger auf das kommende Angebot.
Websites sind immer "Under Construction"
Ist eine Seite noch im Aufbau, binden Sie diese stattdessen noch nicht in die Navigation ein. Abbildung 6.30: Das berüchtigte „Under Construction“-Symbol
Im nächsten Schritt geben Sie Namen und Adresse Ihres Unternehmens an, die an entsprechenden Stellen von FrontPage in die erstellten Seiten eingefügt werden. Achten Sie darauf, dass sich hier keine Tippfehler einschleichen, die Sie dann manuell auf jeder Seite korrigieren müssten.
219
6 Arbeiten mit FrontPage-Webs Abbildung 6.31: Die Angaben zu Ihrer Firma
Tragen Sie im nächsten Fenster Telefon- und Faxnummern sowie Ihre EMail-Adressen ein. Die Adresse des Webmasters ist die Adresse, die auf jeder Seite erscheinen wird und für Fragen und Hinweise zur Website selbst dient. Dort sollte also die E-Mail-Adresse eingetragen werden, die diejenige Person erreicht, die für die Administration Ihrer Website verantwortlich ist – eben der Webmaster. Eine E-Mail-Adresse für allgemeine Informationen sollte Ihr Unternehmen grundsätzlich haben. Als Standard hat sich hier der Benutzername info etabliert. Sie haben nun fast alle Informationen eingegeben, die der Assistent benötigt, um das Firmenpräsenzweb zu erstellen. Abbildung 6.32: Die weiteren Adressinformationen
FrontPage fragt Sie nun, ob Sie ein FrontPage-Design zuweisen wollen. Die FrontPage-Designs sind Stilvorlagen, die webübergreifende Vorgaben für Farben, Schriften und Navigationselemente festlegen. In Kapitel 8 erfahren Sie mehr über Designs. Damit Ihr Web schon ein erstes Gesicht bekommt, klicken Sie auf den Knopf WÄHLEN SIE EIN WEBDESIGN.
220
Die Web-Assistenten Abbildung 6.33: Anfrage für die Auswahl eines FrontPage-Designs
Daraufhin öffnet sich das Auswahlfenster für Designs. Sie können hier aus einer Reihe vorgefertigter Designvorlagen auswählen. Viele der Designs sind für einen herzhaften Lacher gut, aber Sie werden sicher das eine oder andere finden, das Ihnen zusagt. Im rechten Fenster erhalten Sie eine Vorschau. Spielen Sie auch mit den verschiedenen Einstellungen, bis Sie eine Variante gefunden haben, die Ihnen gefällt. Klicken Sie dann auf OK. Abbildung 6.34: Das Auswahlfenster für Designs
Sie kehren daraufhin in das vorherige Fenster (Abbildung 6.33) zurück. Klicken Sie auf WEITER. Schließlich sind Sie am Ende des Assistenten angelangt. Sie haben nun noch die Möglichkeit, sich nach Fertigstellung des Webs eine Aufgabenliste für die nächsten Schritte anzeigen zu lassen. Mehr zu Aufgaben erfahren Sie in Kapitel 13.
221
6 Arbeiten mit FrontPage-Webs
Um Ihr Web zu erstellen und den Assistenten zu beenden, klicken Sie auf FERTIG STELLEN. Abbildung 6.35: Endlich geschafft: Das Abschlussfenster des Assistenten
Sofern Sie im letzten Fenster die Option NACH ÜBERTRAGEN AUFGABENANSICHT ANZEIGEN ausgewählt haben, wird die Aufgabenansicht aufgerufen, die Ihnen die wichtigsten Schritte zeigt, die als nächste ausgeführt werden müssen, um das Web mit Inhalt zu füllen. Wie Sie Aufgaben verwalten, zeigt Kapitel 13. „Missbrauchen“ Sie daher diese Liste tatsächlich zunächst nur als Gedächtnishilfe, die Sie immer über das Menü ANSICHT | AUFGABEN oder indem Sie in der Ansichtenliste auf AUFGABEN klicken, aufrufen können. Das Web den eigenen Bedürfnissen anpassen Es müssen nun noch einige Anpassungen vorgenommen werden, die der Assistent nicht berücksichtigt hat. Wechseln Sie dazu in die Navigationsansicht, um die Struktur des neu angelegten Webs zu betrachten. Seiten auf der obersten Navigationsebene
Neben der Startseite „Home“ befinden sich weitere Seiten auf der obersten Ebene. Dies ist sinnvoll, denn diese drei Seiten gehören durch ihre Funktionen nicht zum Inhalt der Website, sondern sie stellen Zusatzfunktionen zur Verfügung. Außerdem sollen die Besucher, um das Inhaltsverzeichnis anzuschauen oder die Suchfunktion benutzen zu können, ja nicht erst danach suchen. Sie haben dem Assistenten die Anweisung gegeben, auf jeder Seite am unteren Rand Hyperlinks auf die wichtigsten Seiten des Webs einzubinden (siehe Abbildung 6.29). Die wichtigsten Seiten sind die vier Hauptseiten, die in der Navigationsansicht auf oberster Ebene stehen. Die Startseite soll nicht mehr Home heißen, denn bislang existiert noch kein Logo für die Musicommunity, und der Name und die Adresse sollen ja möglichst schnell bekannt gemacht werden. FrontPage setzt die Titel der Seiten automatisch in den Seitenbanner im Kopf einer Seite ein, so wird also der Name der Community im ersten Seitenbanner erscheinen.
222
Die Web-Assistenten
Um den Titel einer Seite zu ändern, markieren Sie in der Navigationsansicht den zu ändernden Namen und klicken Sie noch einmal darauf. Der Titel wird editierbar, und Sie können nun den alten Titel gegen musicommunity.de austauschen. Alternativ können Sie auch aus dem Kontextmenü den Punkt UMBENENNEN auswählen. Sind Sie fertig, bestätigen Sie mit der ReturnTaste.
Seitentitel ändern
Unterbereiche Schauen Sie sich nun die zweite Ebene an. Die Community wird keine Produkte im eigentlichen Sinne anbieten, sondern Foren, die sich mit Musikern, Gruppen, Komponisten oder Musikgattungen beschäftigen. Also muss auch der Bereich „Produkte“ in „Foren“ umbenannt werden. Verfahren Sie hier wie eben beschrieben. Die Service-Angebote der Community sollen zunächst dazu dienen, die Besucher zu motivieren, sich an der Community zu beteiligen. Daher ist der Titel „Aktion“ für diesen Bereich angemessen. Wie Sie die untergeordneten Bereiche umbenennen, entnehmen Sie bitte Abbildung 6.36. (Falls Sie Pink Floyd oder Frank Zappa nicht ausstehen können, sind wir Ihnen nicht böse. Die Community bietet auch für Maria Callas, die „Wildecker Herzbuben“, „Saba Child“ oder die „U-Bahn-Kontrolleure in tiefgefrorenen Frauenkleidern“ Platz). Schließlich sollten Sie sich noch dem Bereich Neu widmen. Da es sich bei der Website um ein neues Angebot handelt, wird es sicher nur eine Pressemitteilung geben, die veröffentlicht werden kann. Da FrontPage aber drei Pressemitteilungen angelegt hat, müssen die zweite und dritte gelöscht werden. Markieren Sie also die „Pressemitteilung 2“, und drücken Sie (Entf), oder wählen Sie aus dem Kontextmenü der Seite den Punkt LÖSCHEN. FrontPage fragt Sie nun, wie mit der zu löschenden Datei verfahren werden soll. Da Sie die Seite komplett aus dem Web entfernen wollen, wählen Sie die Option DIESE SEITE AUS DEM WEB LÖSCHEN, und bestätigen Sie mit OK. Löschen Sie nun auch noch die „Pressemitteilung 3“. Die Navigationsstruktur der Community ist damit fertig gestellt und sollte wie in Abbildung 6.36 aussehen. Abbildung 6.36: Die Musicommunity in der Navigationsansicht
223
6 Arbeiten mit FrontPage-Webs
Startseite gestalten Um die Startseite anzupassen, wechseln Sie in die Seitenansicht der Startseite, indem Sie doppelt darauf klicken. FrontPage hat die neuen Titel der Seiten und Unterbereiche schon in die Navigationsleisten und den Seitenbanner übernommen. Bleibt also, den Inhalt der Startseite anzupassen. Kommentare helfen bei der Seitenentwicklung
Unterhalb des Seitenbanners finden Sie einen „Kommentar“, der in violetter Schrift dargestellt ist. Diesen Text können Sie per Doppelklick editieren, er wird aber im Browser nicht zu sehen sein. Ein Kommentar ist eine FrontPage-Komponente, die spezielle Funktionen zur Verfügung stellt. Weiteres über FrontPage-Komponenten erfahren Sie in Kapitel 12. Um hier den Text der Seite zu schreiben, den später die Besucher der Seite sehen sollen, klicken sie auf die freie Stelle unter dem violetten KommentarText und geben Sie etwas ein. Verfahren Sie genauso mit den Bereichen „Unser Unternehmensziel“ und „Kontaktinformationen“. Nun ist Ihre erste Seite fertig.
Abbildung 6.37: Ihre erste Seite
Schließen Sie das Web über das Menü DATEI | WEB SCHLIESSEN. Gegebenenfalls fragt FrontPage nach, ob geänderte Seiten gespeichert werden sollen. Bestätigen Sie mit OK.
224
Die Web-Assistenten
Falls Sie anhand dieses Buches das Projekt mitgebaut haben, merken Sie sich, wo Sie es auf der Festplatte gespeichert haben, damit Sie später daran weiter arbeiten können. Ist es nicht toll, wie Sie mit Hilfe von FrontPage Ihre erste Website erstellt und Seiten gestaltet haben, ohne eine einzige Zeile HTML-Code geschrieben zu haben? Nun, größere Herausforderungen warten auf Sie!
6.6.2
Der Diskussionsweb-Assistent
Mit dem Diskussionsweb-Assistenten erstellen Sie ein Web, das eine Kommunikationsplattform bereitstellt, in der Besucher Ihrer Website in Form von Beiträgen miteinander verschiedene Themen diskutieren können. Die Art und Weise, in der dies geschieht, kennen Sie vielleicht aus Newsgroups. Auf einem Server mit den FrontPage-Servererweiterungen können Sie ohne großen Aufwand ein ähnliches Diskussionsforum erstellen. Der Assistent hilft Ihnen dabei. Los geht’s wieder über das Menü DATEI | NEU | SEITE ODER WEB und das Fenster WEBVORLAGEN. Wählen Sie den Diskussionsweb-Assistenten aus, und geben Sie einen Speicherort auf Ihrer Festplatte an. Klicken Sie auf OK und warten Sie, bis der Assistent initialisiert wurde. Klicken Sie im ersten Fenster auf WEITER. Abbildung 6.38: Das Startfenster des DiskussionswebAssistenten
Nun müssen Sie die wichtigsten Bestandteile des Diskussionsforums auswählen. Im Regelfall ist es sinnvoll, alle angebotenen Bestandteile einzubeziehen. Bereiche des Diskussionswebs 왘 Einsendeformular
Diese erforderliche Komponente ist ein herkömmliches Formular, das Namen des Absenders, den Titel und den Inhalt eines Beitrages erfasst und an das Diskussionsforum versendet.
225
6 Arbeiten mit FrontPage-Webs 왘 Inhaltsverzeichnis
Im Inhaltsverzeichnis werden alle Beiträge chronologisch geordnet angezeigt. Ohne ein solches Inhaltsverzeichnis können keine Beiträge aufgerufen werden. Insofern ist die Verwendung eines Inhaltsverzeichnisses nicht nur empfohlen, sondern tatsächlich unverzichtbar. 왘 Suchformular
Um es den Besuchern des Diskussionsforums zu erleichtern, Beiträge zu finden, die sie interessieren, sollten Sie eine Suchfunktion einbauen. Beachten Sie, dass die Suchfunktion von „normalen“ Webs die Diskussionsbeiträge nicht durchsuchen kann. Also auch wenn ein anderes Web ein Diskussionsforum enthält, benötigen Sie ein separates Suchformular, das die Beiträge dieses Forums durchsucht. 왘 Diskussionsfaden
Diese Funktion erlaubt es, nicht nur Beiträge, sondern auch Antworten auf vorherige Beiträge zu veröffentlichen. Dies trägt zur Übersichtlichkeit im Diskussionsforum bei und gestaltet die Diskussionen lebhafter. 왘 Bestätigungsseite
Um zu verhindern, dass Benutzer einen Beitrag mehrfach absenden, weil sie glauben, er wäre noch nicht veröffentlicht worden, fügen Sie die Bestätigungsseite ein. Diese Seite wird nach dem Absenden eines Beitrages angezeigt und bestätigt dessen Eingang. Außerdem weist die Seite darauf hin, dass der Beitrag eventuell erst im Diskussionsweb erscheint, wenn das Inhaltsverzeichnis vom Benutzer aktualisiert wurde. Abbildung 6.39: Anfrage für die wichtigsten Bestandteile des Diskussionsforums
Nun müssen Sie dem Diskussionsforum einen Titel zuweisen. Wenn es sich bei dem geplanten Diskussionsforum um eine themenspezifische Diskussion handelt, benennen Sie das Forum auch so, damit bei einer größeren Anzahl von Foren auf den ersten Blick klar wird, worum es hier geht.
226
Die Web-Assistenten
Die einzelnen Beiträge, die in diesem Forum veröffentlicht werden, speichert FrontPage in einem designierten Ordner. Geben Sie dafür einen Namen ein, der Ihnen das Auffinden des Ordners erleichtert. Geben Sie vor dem Namen einen Unterstrich „_“ ein, um den Ordner zu verstecken. Die Beiträge werden dann weiterhin korrekt angezeigt, aber niemand außer dem Webadministrator hat Zugriff auf den Ordner selbst. Abbildung 6.40: Anfrage für Namen und Speicherort des Forums
Die Eingabefelder, die im Einsendeformular angezeigt werden, können Sie im nächsten Fenster festlegen. Um den Beitragsautoren neben dem Betreff und dem Beitragstext auch ein Feld zur Verfügung zu stellen, das die Eingrenzung des Themas dieses Beitrages ermöglicht, wählen Sie die passende Option. Abbildung 6.41: Anfrage für Eingabefelder im Einsendeformular
Nun können Sie festlegen, ob das Diskussionsforum nur einem bestimmten Kreis von Benutzern zugänglich sein soll. Diese Einstellungen sind abhängig von den Webeinstellungen.
227
6 Arbeiten mit FrontPage-Webs Abbildung 6.42: Anfrage für Sicherheitseinstellungen
Legen Sie jetzt fest, wie die Beiträge im Inhaltsverzeichnis sortiert werden sollen. Obwohl die Standardeinstellung „Älteste zuerst“ heißt, ist dies nicht die sinnvollste Variante. Erfahrungsgemäß wird ein Diskussionsweb von immer den gleichen Besuchern genutzt. Diese sind daran interessiert, schnell zu sehen, welche Beiträge neu hinzugekommen sind. Werden nun die ältesten Beiträge zuerst angezeigt, heißt das für die Besucher, jedes Mal erst bis ans Ende der Seite zu scrollen. Sortieren Sie daher besser absteigend, das heißt mit den neuesten Nachrichten zuerst. Abbildung 6.43: Anfrage für Sortieroptionen
Sofern Sie das Diskussionsforum als neues Web erstellen, sollten Sie im nächsten Fenster festlegen, dass das Inhaltsverzeichnis der Diskussion als Startseite festgelegt wird. Erstellen Sie das Web in einem anderen Web oder Ordner, wird die bestehende Startseite (beispielsweise index.htm) ersetzt.
228
Die Web-Assistenten Abbildung 6.44: Anfrage für die Startseite der Diskussion
Um die Optionen der Suchfunktion einzustellen, wählen Sie eines der Angebote im nächsten Fenster. Kriterien der Beiträge, die gefunden werden, können dabei Betreff (Titelangabe eines Beitrages), Größe des Beitrags, Datum der Veröffentlichung und Übereinstimmung in Prozent sein. Enthält ein Beitrag mehrere übereinstimmende Suchbegriffe, so ist dessen Grad der Übereinstimmung höher. Abbildung 6.45: Anfrage für die Anzeige der Suchergebnisse
Auch für das Diskussionsweb können Sie ein Design festlegen. Wählen Sie für das Beispiel das Design Sonnenblumen aus, und aktivieren Sie die Schaltflächen LEBENDIGE FARBEN, AKTIVE GRAFIKEN und CSS VERWENDEN.
229
6 Arbeiten mit FrontPage-Webs Abbildung 6.46: Auswahlfenster für FrontPage-Designs
Im nächsten Schritt können Sie das Seitenlayout der Diskussion festlegen. Dabei können Sie entscheiden, ob Sie Frames einsetzen wollen. Die Darstellung von Frames ist eine Technologie, die schon frühzeitig in die meisten Internetbrowser implementiert wurde. Sie erlaubt, mehrere HTML-Seiten in einem Browserfenster anzuzeigen. Obwohl FrontPage Sie darauf hinweist, dass nicht alle Browser Frames unterstützen, sind heute so gut wie alle Browser dazu fähig, Frames darzustellen. Die noch gelegentlich verwendeten Ausnahmen bilden Lynx, ein textbasierter Browser, der gern von sehbehinderten Internetnutzern verwendet wird, und der Microsoft Internet Explorer 2, der mit der ersten Version des Windows 95-Pluspacks ausgeliefert wurde. Kapitel 10 erläutert, wie Sie Frameseiten plattform- und browserübergreifend gestalten können. An dieser Stelle sei Ihnen die duale Benutzerschnittstelle empfohlen. Sofern der Browser des Besuchers Frames unterstützt, werden sie eingesetzt, anderenfalls wird eine Version ohne Frames verwendet, wodurch Sie allen Besuchern ermöglichen, auf die Diskussion zuzugreifen. Programmierten Sie selbst, müssten Sie zwei unterschiedliche Versionen schreiben – diese mühselige Arbeit nimmt Ihnen FrontPage ab. Nachdem Sie nun noch einmal auf WEITER geklickt haben, sind Sie am Ende des Assistenten angelangt. Klicken Sie also auf FERTIG STELLEN, um das Diskussionsweb zu generieren. Wenn Sie nun im Vorschaumodus die Funktionen des Diskussionswebs testen wollen, werden Sie feststellen, dass die Funktionen zum Bereitstellen und Anzeigen von Beiträgen noch nicht funktionieren. Dies ist nur dann möglich, wenn Sie das Web auf einem Server mit installierten Servererweiterungen veröffentlichen. Kapitel 9 zeigt Ihnen, wie Sie dies bewerkstelligen.
230
Webs importieren und ergänzen Abbildung 6.47: Auswahl des Seitenlayouts
6.7
Webs importieren und ergänzen
Sie haben bereits eine Website, die Sie endlich auf FrontPage umstellen wollen, um die umfangreichen Administrationsfunktionen zu nutzen? Vielleicht aber gibt es auch verschiedene, noch nicht verbundene HTML-Seiten, die zu einem Web zusammengefügt werden sollen? Oder sind Sie einfach neugierig, wie es die anderen machen, und wollen nicht jede einzelne Seite manuell herunterladen? Warum auch immer Sie bereits bestehende Seiten in ein FrontPage-Web umwandeln wollen – Sie benötigen die Funktionen, die FrontPage zum Import einzelner Seiten, ganzer Webs und Website und zum Ergänzen von Webs bietet.
6.7.1
Der Webimport-Assistent
Nachdem Sie schon so gute Erfahrungen mit den FrontPage-Assistenten gemacht haben, können Sie auch beim Import den bequemsten Weg gehen. Der Webimport-Assistent erstellt ein neues Web und fügt dann weitere Seiten hinzu. Wählen Sie das Menü DATEI | NEU | SEITE ODER WEB, und öffnen Sie das Fenster WEBVORLAGEN Markieren Sie den Webimport-Assistenten, und geben Sie die neue Adresse auf Ihrer Festplatte an. Das Web wird erstellt, und das erste Fenster des Assistenten erscheint (siehe Abbildung 6.48). Dort müssen Sie entscheiden, ob die zu importierenden Daten lokal oder im Internet vorliegen. Ein bestehendes Web importieren Zunächst zeigen wir den Weg des Imports aus dem Internet. Dabei spielt es noch nicht einmal eine Rolle, ob die zu importierende Website mit FrontPage erstellt wurde! FrontPage untersucht die erste Seite und folgt dann Ihren Angaben gemäß den Hyperlinks in den Seiten.
231
6 Arbeiten mit FrontPage-Webs
Diese Option ermöglicht es, FrontPage-Webs direkt aus dem Internet zu importieren. Vorstellbar wäre der Einsatz dieser Funktion in Situationen, wenn ein FrontPage-Web nicht lokal bereitsteht. Umfangreiche Websites aus dem Internet zu übertragen sollte aber reiflich überlegt werden. Schließlich kopiert FrontPage nicht nur die Datenstruktur und Dateien, sondern kontrolliert und korrigiert fehlerhafte Verknüpfungen und erstellt neue Indizes. Alles in allem ein langwieriger Vorgang, der vor allem bei der Verwendung eines Modems leicht einige Stunden in Anspruch nehmen kann. Webs offline bearbeiten
Möchten Sie ein Web im Internet bearbeiten, das aber nicht auf ihrem Rechner zur Verfügung steht und gleichzeitig auch von anderen Personen gepflegt wird, sollten Sie nicht das Web importieren, lokal bearbeiten und wieder mit dem Web auf dem Server abgleichen. Stattdessen empfiehlt sich – sofern vorhanden – eine ältere lokale Kopie des Webs zu verwenden und vor der Bearbeitung mit dem Web auf dem Server abzugleichen. Der Unterschied besteht darin, dass bei dieser Arbeitsweise ältere Versionen auf Ihrem lokalen Rechner durch neuere ersetzt werden, ohne die aktuelle Version auf dem Server anzutasten. Nur auf diese Art und Weise können Sie das Web auch offline bearbeiten, ohne das gesamte Web auf dem Server zu verändern. Seitenklau leicht gemacht Die bereits voreingetragene Adresse, von der aus Seiten mit dem Webimport-Assistenten importiert werden könnten, lautet example.microsoft.com (Abbildung 6.48). Was will uns Microsoft damit sagen? Sollen wir einfach die Microsoft-Website kopieren und als unser Werk ausgeben? Nun, sicher ist das mit der Webimportfunktion von FrontPage möglich. Bevor Sie dies aber versuchen: Die angegebene Website ist tatsächlich nur ein Beispiel und existiert nicht wirklich. Microsoft wäre sicher auch nicht erbaut darüber, wenn Sie die Seiten schon fertig auf Ihren Rechner ziehen würden, Ihren Namen und Ihre Daten eingäben und das Ganze dann als Ihr Werk ins Netz stellten. Auch wenn Sie mit dem Importieren der Seiten allein nichts Illegales tun – schließlich passiert hier nichts anderes als beim Surfen im Internet, es werden Seiten zur Betrachtung auf Ihren Rechner übertragen –, denken Sie immer daran, dass jede Seite einen Urheber hat, der allein dadurch, dass er diese Seite erstellt hat, die Rechte daran besitzt, auch wenn kein expliziter Urheberrechtsverweis wie ein Copyright-Vermerk oder -Zeichen auf der Seite angebracht ist. Microsoft hat sogar Nutzerbestimmungen für die Website microsoft.com entwickelt und verweist von jeder Seite aus darauf. Also – und dies soll keine verbindliche Rechtsbelehrung, sondern ein Rat eines professionellen Webdesigners sein, der viel Arbeit, Mühe und Kreativität in seine Produkte steckt – schauen Sie sich im Netz ruhig um und lassen Sie sich von Anderen inspirieren, studieren Sie den Aufbau fremder Seiten und den HTML-Code.
232
Webs importieren und ergänzen
Aber vergessen Sie nicht, dass auch eine teilweise Kopie einer Website nichts anderes ist als ein Zitat, das zumindest als solches gekennzeichnet werden sollte. Bevor Sie also ein fremdes Web kopieren und für sich bearbeiten, erkundigen Sie sich, wie der Urheber dazu steht. Am allerbesten natürlich, Sie studieren dieses Buch gründlich, sodass Sie auf weitere fremde Ideen gar nicht angewiesen sind. Aus dem Internet importieren Liegen die zu importierenden Seiten auf einer Website vor, wählen Sie den unteren Punkt VON EINER SITE IM WORLD WIDE WEB und geben die Adresse der Startseite ein, die Sie importieren wollen. Wissen Sie eine genaue Seite, geben Sie diese hier an. Tragen Sie – wie im Beispiel gezeigt – nur den Namen eines Servers oder eines Verzeichnisses ein, sucht FrontPage nach der Startseite, sofern diese nicht vom Server vorgegeben wurde. Typische Startseiten heißen index.html oder default.htm. Abbildung 6.48: Der WebimportAssistent
Nun heißt es auszuwählen, wie tief der Assistent in die Website vordringen soll. Der Assistent gibt dazu drei Optionen frei. 왘 Begrenzen auf diese Seite und X untergeordnete Ebenen
Im Klartext gesprochen: Lassen Sie die Schaltfläche unangekreuzt, lädt FrontPage nur die angegebene Seite herunter. Ist das Feld angekreuzt, verfolgt FrontPage die Hyperlinks der Ausgangsseite bis zu der Seite, die über die von Ihnen angegebene Zahl von Hyperlinks verbunden ist. 왘 Begrenzen auf X KB
Eine umfangreiche Website kann leicht mehrere Megabyte groß sein. Besonders wenn Anwendungen oder Archive zum Download angeboten werden, kann sich der Import einer Website über Stunden hinziehen und Ihre Speicherreserven allzu sehr belasten. Wählen Sie diese Option, um die übertragene Datenmenge zu reduzieren.
233
6 Arbeiten mit FrontPage-Webs 왘 Begrenzen auf Text- und Bilddateien
Mit dieser Option werden nur HTML-Seiten und eingebundene Grafiken heruntergeladen. Andere Dateiformate wie Anwendungen, PDF-Dateien, aber auch Java-Applets etc. werden nicht mit importiert. Abbildung 6.49: Anfrage für Importeinschränkungen
Haben Sie bereits eine eigene Website, probieren Sie es einmal damit aus! Mit Hilfe der Importfunktion können aber auch Daten, die auf Ihrer Festplatte oder in Ihrem Netzwerk liegen, importiert werden. Nach dem Start des Webimport-Assistenten wählen Sie für diesen Fall die erste Option VON EINEM QUELLORDNER MIT DATEIEN AUF EINEM LOKALEN COMPUTER ODER EINEM NETZWERK. Im Feld ADRESSE wählen Sie den Ordner, in dem sich die zu importierenden Daten befinden. Enthält der Ordner weitere Unterverzeichnisse mit Dateien, die Sie auch importieren wollen, aktivieren Sie die Schaltfläche UNTERORDNER EINSCHLIEßEN. Klicken Sie auf WEITER. Abbildung 6.50: Import von lokalen Daten
234
Webs importieren und ergänzen
Nun erstellt der Webimport-Assistent einen Überblick über die zu importierenden Dateien. Gerade bei umfangreicheren Ordnern, die nicht nur Webseiten enthalten, könnten Sie daran interessiert sein, nur einen Teil der zur Verfügung stehenden Dateien zu importieren. In diesem Fall klicken Sie auf die Dateien, die Sie nicht importieren möchten, und klicken dann auf die Schaltfläche AUSSCHLIESSEN, die daraufhin aktiviert wird. Sind Sie zufrieden, wählen Sie WEITER. Der Assistent ist nun fertig; wählen Sie also im nächsten Fenster FERTIG STELLEN, um die gewählten Dateien und Ordner zu importieren. Nun sind Sie bereit, in FrontPage mit allen Funktionen an den Seiten zu arbeiten. Abbildung 6.51: Die vom Webimport-Assistenten erstellte Dateiliste
6.7.2
Dateien, Ordner und Webs importieren
Natürlich lassen sich Webs auch ergänzen. Lassen Sie daher das vorherige Web ruhig geöffnet, um diese Funktionen daran auszuprobieren. Um einzelne Dateien zu Ihrem Web hinzuzufügen, wählen Sie den Ordner Ihres Webs aus, in den die Dateien importiert werden sollen. Markieren Sie dazu den entsprechenden Ordner in der Ordnerliste und wählen den Menüpunkt DATEI | IMPORTIEREN Es erscheint daraufhin das IMPORTIEREN-Fenster. Klicken Sie auf DATEI HINZUFÜGEN, woraufhin sich ein Dateifenster öffnet, in dem Sie die zu importierenden Dateien auswählen können. Damit Sie nicht jede Datei einzeln importieren müssen, können Sie auch mehrere Dateien gleichzeitig auswählen. Um mehrere Dateien zu markieren, halten Sie einfach die (Strg)-Taste gedrückt, oder, um einen ganzen Bereich hintereinander geordneter Dateien zu wählen, markieren Sie die erste Datei, halten dann die Umschalttaste und klicken auf die letzte der auszuwählenden Dateien. Alle Dateien, die dazwischen liegen, werden nun markiert. Über das Feld ÖFFNEN fügen Sie die Dateien der Importliste hinzu.
235
6 Arbeiten mit FrontPage-Webs Abbildung 6.52: Importieren einzelner Dateien
Ebenso verfahren Sie beim Import eines Ordners. Klicken Sie im Fenster IMPORTIEREN auf ORDNER HINZUFÜGEN und wählen Sie im darauf folgenden Menü den gewünschten Ordner aus. Hier können Sie nur einen Ordner auswählen. Gegebenenfalls darin verschachtelte Unterordner mit Ausnahme der FrontPage-eigenen Funktionsverzeichnisse werden auch importiert. Die Spezialordner werden beim Import in das Web neu generiert. Nun können Sie noch einmal prüfen, ob alle notwendigen Dateien in der Importliste aufgeführt werden. Sind Dateien dabei, die Sie doch nicht importieren wollen, markieren Sie diese und wählen Sie die Option ENTFERNEN. Interessant ist auch die Möglichkeit, die neue Verzeichnisstruktur nach dem Import festzulegen. Markieren Sie eine Datei und klicken Sie auf ÄNDERN. Im neuen Fenster können Sie nicht nur einen neuen Speicherpfad, sondern sogar einen neuen Dateinamen für die Datei angeben. Wollen Sie ein ganzes Web neu importieren, klicken Sie stattdessen auf AUS EINEM WEB Der Webimport-Assistent öffnet sich, den Sie ja bereits kennen gelernt haben.
236
Import eines Webs als ein Unterweb
6.8
Import eines Webs als ein Unterweb
Was aber, wenn Sie nun ein vollständiges Web haben, das Sie in ein anderes Web integrieren wollen? Nutzen Sie dazu Unterwebs, die Sie bereits aus Kapitel 6 kennen. Um diese Funktion zu testen und gleichzeitig am dem Beispielprojekt weiter zu arbeiten, importieren Sie das Diskussions-Web in das MusicommunityWeb.
6.8.1
Vorbereitung
In jedem Musikforum des Beispielprojektes sollen sich die Mitglieder über ihre persönlichen Favoriten aus der Welt der Musik austauschen. Dazu muss in die beiden schon angelegten Foren je ein Diskussionsweb eingefügt werden. So sparen Sie Arbeit, und das Web erhält ein einheitlicheres Gesicht. Aus diesem Grunde haben wir auch dasselbe Design für die Musicommunity und das Diskussionsweb ausgewählt. Sie sollten bei Ihren Projekten ebenso vorgehen, denn bunte und vielseitige Seiten erhalten Sie über entsprechende Inhalte, nicht durch den Einsatz einer maximalen Anzahl von Farben und Schriftarten. Zunächst sollten Sie etwas Ordnung schaffen, um das Web übersichtlich zu halten. Dazu sollten Sie die alten Dateinamen, die vom Assistenten erstellt wurden, ändern. Den Bereich „Produkte“ hatten Sie in „Foren“ umbenannt, den Bereich „Service-Angebote“ in „Aktion“. Außerdem tragen einige Seiten noch englische Namen. Damit Sie es sich leichter machen, sollten die Dateinamen dem angepasst werden. Gewöhnen Sie sich am besten an, alle Ordner- und Dateinamen grundsätzlich durchweg klein zu schreiben. Server, die mit dem Betriebssystem Unix oder einem seiner Derivate (beispielsweise Linux oder FreeBSD) laufen, aber auch die Skriptsprache JavaScript unterscheiden zwischen Groß- und Kleinschreibung. Um also Problemen vorzubeugen, sind Sie mit durchgängiger Kleinschreibung auf der sicheren Seite. Benennen Sie die alten Dateien nach den Angaben in Tabelle 6.2 um.
237
6 Arbeiten mit FrontPage-Webs Tabelle 6.2: Neue Dateinamen für das Projektweb
Dateiname alt
Dateiname neu
products.htm
foren.htm
prod01.htm
forum01.htm
prod02.htm
forum02.htm
services.htm
aktion.htm
serv01.htm
anfang.htm
serv02.htm
mitmach.htm
news.htm
neu.htm
search.htm
suche.htm
toc.htm
inhalt.htm
Gegebenenfalls fragt FrontPage nach, ob Sie die Hyperlinks in anderen Seiten aktualisieren wollen, damit sie auch nach der Umbenennung weiterhin korrekt auf die Seite verweisen. Bestätigen Sie diese Anfrage immer mit JA. Ordner im Web verschieben Nun sollen die Forenseiten noch in eigene Ordner verschoben werden, denn sie werden bald ziemlich umfangreich sein. Erstellen Sie also einen neuen Ordner im Stammverzeichnis des Projektes, und nennen Sie diesen foren. In diesem Ordner wiederum erstellen Sie zwei weitere Ordner, für jedes der Foren einen eigenen, am besten forum01 und forum02. Verschieben Sie nun die Dateien foren.htm, forum01.htm und forum02.htm in den Ordner foren. Schließlich gehört die erste Pressemitteilung noch in einen neuen Ordner, den sie pr nennen. In der Navigationsansicht können Sie herausfinden, wie der Dateiname der ersten Pressemitteilung lautet. Jetzt sind die Vorbereitungen abgeschlossen. Endlich können Sie mit der Integration des Diskussionswebs beginnen. Schließen Sie das Web.
6.8.2
Ein Unterweb veröffentlichen
Öffnen Sie das Diskussionsweb, das Sie integrieren wollen. Vielleicht irritiert Sie der Begriff veröffentlichen, denn Sie arbeiten hier auf der Festplatte und nicht in der Öffentlichkeit. FrontPage verwendet den Ausdruck veröffentlichen, weil der Vorgang zur Übertragung eines Webs an einen anderen Ort der gleiche ist, egal ob Sie das Web auf einen Webserver oder in einen anderen Ordner auf der Festplatte oder im Netzwerk überspielen. Wählen Sie das Menü DATEI | WEB VERÖFFENTLICHEN. Geben Sie als Adresse für die Veröffentlichung den Ordner an, in das Sie das Projektweb gespeichert hatten. Wählen Sie den Unterordner FORUM01 als Zielordner. Klicken Sie auf VERÖFFENTLICHEN.
238
Import eines Webs als ein Unterweb
Die folgende Frage bestätigen sie mit OK. Sie können sich nun entweder ein Protokoll der Veröffentlichung ansehen – es wird in guter FrontPage-Manier eine übersichtliche HTML-Seite erstellt. Oder Sie sehen sich die frisch veröffentlichte Seite gleich im Browser an. Mit einem Klick auf FERTIG verzichten Sie auf beides. Abbildung 6.53: Website wurde erfolgreich veröffentlicht
FrontPage-Komponenten ohne Server Da Sie das Diskussionsweb auf einen lokalen Pfad veröffentlichen, werden die FrontPage-Komponenten noch nicht funktionieren. Das nächste Fenster (siehe Abbildung 6.54) weist Sie darauf hin. Da Sie aber noch bei der Einrichtung des Webs sind, ist dies fürs Erste kein Problem. Sie können zwar noch nicht alle Funktionen ausprobieren, aber die Veröffentlichung verläuft trotzdem korrekt. Wie das gesamte Web auf einen Webserver veröffentlicht wird und Sie die FrontPage-Komponenten mit den Servererweiterungen aktivieren, zeigt Kapitel 9. Abbildung 6.54: FrontPage-Komponenten benötigen die Servererweiterungen
FrontPage veröffentlicht nun das Web als Unterweb. Da die FrontPage-Komponenten lokal noch nicht funktionieren, erübrigt sich ein Test der veröffentlichten Website. Klicken Sie im nächsten Fenster auf FERTIG.
239
6 Arbeiten mit FrontPage-Webs Abbildung 6.55: Das Web wird übertragen
Verfahren Sie nun noch einmal wie beschrieben, um das Web auch als Unterweb forum02 zu veröffentlichen. Abbildung 6.56 zeigt die Ordnerstruktur des fertigen Webs mit den zwei Diskussionsforen als Unterwebs. Abbildung 6.56: Zwei Unterwebs im MusicommunityWeb
Wenn Sie fertig sind, schließen Sie das Web und öffnen das Web, in das Sie die beiden Foren veröffentlicht haben. Wie Sie das Web anpassen, werden Sie im weiteren Verlauf des Musicommunity-Workshops lernen.
6.9
Konfiguration von Webs
Nachdem wir alle Vorlagen und Möglichkeiten der FrontPage-Webs vorgestellt haben, lohnt es sich, die Konfigurationsmöglichkeiten, die FrontPage bietet, ebenso eingehend zu betrachten.
240
Konfiguration von Webs
Webs zu konfigurieren heißt Einstellungen vorzunehmen, die für alle Seiten im Web gleichermaßen gelten und nur einmal global festzulegen sind. Die FrontPage-Webeinstellungen finden Sie im Menü EXTRAS | WEBEINSTELLUNGEN. Ist kein Web geöffnet, bleibt diese Option inaktiv, das heißt, Sie können keine Einstellungen vornehmen.
6.9.1
Allgemeine Optionen
Rufen Sie die Webeinstellungen auf. Auf der Registerkarte ALLGEMEIN sind grundlegende Informationen zu Ihrem Web enthalten, die Sie teilweise nicht verändern können. Dennoch sind es Optionen, die Einfluss auf das Funktionieren beispielsweise der Servererweiterungen haben. Die Eingabe des Webnamens wird über die Pfadangabe geregelt. Sie kann lokal nicht aus FrontPage heraus verändert werden, da das Web sich ja zum Zeitpunkt der Bearbeitung auf diesem Pfad befindet. Wenn Sie den Pfad ändern wollen, schließen Sie das Web und kopieren Sie den gesamten Ordner an den neuen Ort oder benennen Sie den derzeitigen Ordner je nach Wunsch um.
Server als Plattform
Die Eingabe eines neuen Webnamens ist nur dann möglich, wenn sich Ihr Web auf einem Server befindet. Dort ist nämlich der Ordner des Servers, in dem das Web abgelegt ist, entscheidend für den Namen, unter dem das Web gefunden werden kann. Die meisten Server können auch so genannte virtuelle Verzeichnisse verwalten, sodass ein Ordner A auch gleichzeitig unter den Namen B und C gefunden werden könnte. Wie Sie Ihren Server konfigurieren, entnehmen Sie Kapitel 2. Informationen zum Server Läuft auf Ihrem System ein Server, so werden dessen Daten im Dialogfenster SERVERVERSION angezeigt. Abbildung 6.57: Webeinstellungen – Registerkarte „Allgemein“
241
6 Arbeiten mit FrontPage-Webs
Informationen zur aktuellen Version der installierten Server-Erweiterungen, die für die Administration und die Webkomponenten von FrontPage verantwortlich sind, zeigt das Dialogfenster FRONTPAGE-SERVERERWEITERUNGEN, VERSION an. Weiter führende Lektüre zum Thema Servererweiterungen bietet Kapitel 2. Das Optionsfeld EINCHECKEN UND AUSCHECKEN VON DOKUMENTEN VERWENDEN wird in Kapitel 6 behandelt.
Skriptsprachen auswählen Wechseln Sie nun zur Registerkarte ERWEITERT. Im Bereich STANDARDSKRIPTSPRACHE finden Sie das Feld CLIENT. Ein Client ist eine Anwendung, die Inhalte darstellt, die von einem Server bereit gestellt werden. In diesem Fall ist damit der Internetbrowser gemeint, der die Inhalte (also Webseiten) anzeigt. Neben der Seitenbeschreibungssprache HTML wird häufig auch eine Skriptsprache eingesetzt, die dynamische Veränderungen und Berechnungen im Client erlaubt. Ein typisches Beispiel ist die Anzeige des aktuellen Datums, das mittels Scripting (das heißt Einsatz eines Skriptes) vom Rechner ausgelesen und dann in die Seite eingeblendet wird. JavaScript vs. VBScript
Zwei verschiedene Skriptsprachen konkurrieren miteinander: JavaScript, eine stark vereinfachte und für Skripte optimierte Version der Programmiersprache Java (die vom amerikanischen Unternehmen Sun entwickelt wurde), und VBScript (kurz für Visual Basic Scripting Edition), die ein Derivat der Programmiersprache BASIC darstellt und in dieser Form von Microsoft entwickelt und in deren Browser Internet Explorer implementiert wurde. Andere Browser, etwa der Netscape Navigator, beherrschen diese Sprache nicht, wohingegen fast alle Browser mit JavaScript umgehen können. Daher sollten Sie in diesem Feld nur dann VBScript auswählen, wenn Sie für eine klar abgegrenzte Gruppe von Nutzern entwickeln, die durchweg mit Internet Explorer arbeiten. Ein solches Szenario wäre eine Intranet-Umgebung eines Unternehmens, das auf allen Arbeitsplätzen den Browser von Microsoft installiert hat. Selbst dann aber ist ein Einsatz von JavaScript möglich. Verborgene Dokumente Im Bereich OPTIONEN erlaubt es die Schaltfläche DOKUMENTE IN VERBORGENEN ORDNERN ANZEIGEN, auch in FrontPage-Ansichten (beispielsweise der Ordnerleiste) die Ordner anzuzeigen, die mit einem Unterstrich (_Beispiel) beginnen. Welche Funktion diese Ordner haben, erläutert Abschnitt 6.9.5. Möchten Sie auf Ihrem Rechner mehr Speicherplatz gewinnen, klicken Sie auf DATEIEN LÖSCHEN im Bereich TEMPORÄRDATEIEN. Das Löschen von temporären Daten hat keinen Einfluss auf von Ihnen erzeugte Seiten etc., sondern löscht die Dateien, die FrontPage zur Bearbeitung des Webs anlegt. Der Aufruf eines Webs dauert länger, wenn die temporären Dateien fehlen.
242
Konfiguration von Webs Abbildung 6.58: Webeinstellungen – Registerkarte „Erweitert“
Sprache und Codierung Die Registerkarte SPRACHE legt fest, in welcher Sprache Meldungen von den Servererweiterungen an den Browser gesandt werden. Fehlt ein Objekt, wird stattdessen eine Fehlermeldung eingeblendet. Diese Fehlermeldungen können je nach Einsatzzweck in verschiedenen Sprachen angezeigt werden. Soll die Website einem eher internationalen Publikum zugänglich gemacht werden, ist es sicher angebracht, die Meldungssprache auf „Englisch“ umzustellen. Die Seitencodierung ist ein Zugeständnis an die verschiedenen Sprachen und Plattformen, die auf der Welt existieren. Die Unterschiede zwischen dem lateinischen und dem kyrillischen, hebräischen oder arabischen Alphabet, geschweige denn zwischen den chinesischen oder japanischen Schriftzeichen und vielen anderen Systemen, waren bislang zu massiv, um ein einheitliches System schaffen zu können. Das neue System Unicode, das in Microsoft Office 2000 erstmalig implementiert ist, umfasst mehr als 40.000 Zeichen, die in den meisten Sprachen der Welt vorkommen, beziehungsweise die zu Schriftzeichen zusammengesetzt werden können. Erstellen Sie Seiten in einer Sprache wie Deutsch, Englisch oder Französisch, wählen Sie in FrontPage die Codierung „US/Westeuropäisch“. Weitere Hinweise zur Seitencodierung und Verwendung von Sonderzeichen entnehmen Sie Kapitel 7.
Der Turmbau zu Babel
Mit der Schaltfläche BEIM FESTLEGEN DER CODIERUNG FÜR NEUE SEITEN TASTATUREINSTELLUNG IGNORIEREN können Sie FrontPage anweisen, bei der Erstellung einer neuen Seite die Codierung nicht anhand der Tastatureinstellungen (die Sie unter Windows in der Systemsteuerung festlegen können), sondern anhand der Computereinstellungen festzulegen. Möglicherweise arbeiten Sie mit einem englischen Betriebssystem, aber einer deutschen, schwedischen oder vietnamesischen Tastatur, sodass hier Probleme auftreten könnten, die Sie mit dieser Einstellung umgehen können.
243
6 Arbeiten mit FrontPage-Webs Abbildung 6.59: Webeinstellungen – Registerkarte „Sprache“
6.9.2
Webparameter
Über technische Einstellungen hinaus können Sie Ihr Web auch personalisieren. Die Registerkarte PARAMETER enthält webspezifische Einstellungen, die Sie über die FrontPage-Komponente ERSETZEN in jede Seite des Webs einfügen können. Kapitel 12 geht auf die FrontPage-Komponenten ein. Sinnvoll ist eine solche Funktion, wenn Sie auf jeder Seite beispielsweise einen Copyright-Vermerk oder die E-Mail-Adresse des Webmasters eingeben wollen. Die genauen Daten können Sie in der Registerkarte PARAMETER global festsetzen. Um einen neuen Parameter zu erstellen, klicken Sie auf HINZUFÜGEN und wählen dann einen Namen und einen Wert für den Parameter, beispielsweise Name: WebmasterEmail Wert: [email protected]
Die Schaltfläche ÄNDERN ermöglicht eine Anpassung, die sich auf das gesamte Web auswirkt. ENTFERNEN Sie einen Parameter, bleiben zwar die Komponenten und deren aktueller Wert in den Seiten enthalten, können aber nicht mehr seitenübergreifend geändert werden. Kapitel 6 hat Sie schon mit den Navigationsleisten vertraut gemacht. Diese grafischen oder Textelemente für die Navigation zwischen den einzelnen Seiten des Webs werden von FrontPage automatisch nach Ihren Vorgaben erstellt. Dazu kommen auch kurze Texte zur Anwendung, die Sie in der Registerkarte Navigation einstellen können.
244
Konfiguration von Webs Abbildung 6.60: Webeinstellungen – Registerkarte „Parameter“
Leider neigt die deutsche Sprache wesentlich stärker als das Englische zu langen Wörtern und Wortgruppen, was eine durchgängig deutsche Betitelung erschwert. „Nach oben“ ist sicher nicht der treffendste Ausdruck für „Übergeordnete Seite“. Es scheint, als führt der Link nur an den Anfang einer Seite und nicht, wie es tatsächlich der Fall ist, „Eine Hierarchieebene aufwärts“. Wer will das aber ernsthaft auf einen Navigationsknopf schreiben? Wichtiger ist wohl, dass die Besucher auf den ersten Blick verstehen, was bei einem Klick auf einen der Knöpfe passiert. Da sich die voreingestellten Werte (nicht zuletzt durch die weite Verbreitung von FrontPage) allgemein eingebürgert haben, sind diese Termini den Webbenutzern vertraut. Eine perfekte Lösung können auch wir leider nicht bieten! Abbildung 6.61: Webeinstellungen – Registerkarte „Navigation“
245
6 Arbeiten mit FrontPage-Webs
6.9.3
Zugriffsberechtigungen
Informationen sind ein wertvolles Gut. Ob private Homepage, Unternehmens-Website oder gar ein Intranet, über das firmeninterne Daten und Dokumente verteilt und bearbeitet werden, überall ist gleich wichtig, entscheiden zu können, wer auf Informationen zugreifen, sie lesen, verändern, neu erstellen und löschen kann. Sicherheitseinstellungen hängen vom Betriebssystem ab
Arbeiten Sie in einem Netzwerk oder auf Einzelrechnern in einem Windows Netzwerk, lassen sich auch lokale Ressourcen über die integrierten Sicherheits-Features über die Anmeldung am System steuern. Die meisten UnixWebserver führen Zugriffslisten für jede einzelne Ressource, die sich von den Listen unterscheidet, die für die Benutzer und Gruppen des Rechners selbst gelten. Versuchen Sie hingegen, die Sicherheitseinstellungen für ein lokales Web, das nicht über einen NT- oder Unix-Server oder auf einem Rechner mit Windows NT (2000) läuft, festzulegen, gibt es keinen Ort, an dem nicht mit eben dieser Sicherheit die Einstellungen gespeichert werden können. Die Lösung kann hier nur über den Server erreicht werden. Notwendig für die Sicherheitsmerkmale von FrontPage unter Windows 95 oder 98 ist daher ein Server mit installierten Servererweiterungen. In Kapitel 2 werden deren Funktionsweise, Installation und Konfiguration erklärt. Benutzergruppen Möglich wird eine Unterscheidung von verschiedenen Zugriffsberechtigungen nur über Benutzergruppen, die sich jeweils über spezifische Anmeldeoptionen authentifizieren. Die Zugriffsrechte sind dabei grundsätzlich dreistufig gestaffelt:
Tabelle 6.3: Benutzergruppen für FrontPage-Webs
Zugriffsrechte
Details
Verwalten
Sie haben uneingeschränkten Zugriff auf alle Ressourcen und Teile des Webs. Administratoren können FrontPageWebs betrachten, bearbeiten und verwalten.
Verfassen
Alle Änderungen an Dateien des Webs sind erlaubt. Es dürfen jedoch keine Veränderungen an Webstrukturen vorgenommen oder gar Zugriffsberechtigungen geändert werden.
Lesen
Man könnte diese Gruppe in Anlehnung an in diesem Bereich übliche Begriffe auch Gäste nennen. Sie können Seiten, die freigegeben wurden, betrachten und Hyperlinks folgen, allerdings keine Bearbeitungen jeglicher Art vornehmen.
Diese Berechtigungen werden für das Stammweb, das heißt die oberste Ebene der Webhierarchie – auch root (Wurzel) genannt –, festgelegt. Alle darunter liegenden Unterwebs erben diese Berechtigungen. Ändern Sie also
246
Konfiguration von Webs
auf der obersten Ebene die Zugriffsberechtigungen, ändern sich diese für alle darunter liegenden Ebenen. Es lassen sich aber für andere Ordner und Dateien jeweils auch separat Zugriffsrechte verwalten. Sinnvoll kann dies beispielsweise in einem Web sein, das einen allgemein zugänglichen Teil mit allgemeinen Informationen bietet, der von allen Benutzern betrachtet werden kann, und einen Teil, der von einer bestimmten Gruppe betrachtet werden kann (beispielsweise interne Daten, ein Diskussionsforum oder ein Downloadbereich für registrierte Kunden etc.). Sicherheit unter Windows NT Arbeiten Sie in Windows NT oder Windows 2000 mit dem Internet Information Server (IIS), ist eine Nutzung der Sicherheits-Features von FrontPage nicht sinnvoll und daher nicht möglich. Benutzer und Gruppen werden hier über die Windows NT-Konten geregelt. Führt ein Benutzer eine Aktion durch, die eine gesonderte Berechtigung verlangt, fordert der Server zur Eingabe der dafür notwendigen Anmeldedaten. Setzen Sie den Personal Web Server ein, haben Sie keine Möglichkeit, das auf dem Server publizierte Web zu bearbeiten, sofern Sie nicht an dem Rechner, auf dem der Server läuft, arbeiten. Schließlich ist der Personal Web Server auch eher für Testumgebungen und nicht zum tatsächlichen Betrieb im Internet konzipiert. Bedenken Sie auch, dass die Sicherheitsfähigkeiten von Unix oder Windows NT (2000) weit besser sind, sodass Sie vom Betrieb eines Servers unter Windows 95 oder 98 absehen sollten.
6.9.4
Personal Web Server (PWS)
Quellcodekontrolle
Wird ein Web von mehreren Personen gepflegt, sind Konflikte vorprogrammiert. Welche der beiden Versionen, die momentan von zwei Mitarbeiter geändert werden, soll nun gelten? Die Quellcodekontrolle erlaubt es, einzelne Dateien nur von einer einzigen Person zu einem Zeitpunkt bearbeiten zu lassen. Diese Technik ist von Datenbanken und Dokumentenverwaltungsprogrammen her bekannt, wurde aber bislang noch nicht in HTML-Editoren eingesetzt. FrontPage bietet eine integrierte Änderungsverwaltung, die es Autoren erlaubt, gesichert an Dateien eines Webs zu arbeiten. Die Quellcodekontrolle aktivieren Sie über das Optionsfeld EINCHECKEN UND AUSCHECKEN VON DOKUMENTEN VERWENDEN im Menü EXTRAS | WEBEINSTELLUNGEN auf der Registerkarte ALLGEMEIN. Die beiden Begriffe Einchecken und Auschecken werden Ihnen aus dem Hotelwesen bekannt sein. Stellen Sie sich die Quellcodekontrolle ähnlich wie im Hotel vor: Wenn in Zimmer 405 jemand eingecheckt hat, kann keine andere Person es noch einmal tun. Durch das Einchecken und Auschecken wird festgelegt, welche Datei bearbeitet wird und derzeit nicht zur Verfügung steht.
Mit mehreren Autoren arbeiten
247
6 Arbeiten mit FrontPage-Webs
Ein Autor kann eine Datei auschecken. Ist eine Datei ausgecheckt worden, kann sie zwar noch immer von anderen Mitarbeitern geöffnet und betrachtet, jedoch nicht bearbeitet werden. Eine Datei, die ausgecheckt wurde, wird mit „Die Datei wurde für Sie ausgecheckt“ oder „Die Datei wurde für einen anderen Autor ausgecheckt gekennzeichnet“. Daran erkennen Sie bereits, dass die Optionen für Zugriffsrechte, die wir in Kapitel 6 erörtert haben, auch bei der Quellcodekontrolle greifen. Hat der Autor, der die Datei ausgecheckt hatte, die Bearbeitung beendet und die Datei gespeichert, kann er sie wieder einchecken. Die Datei kann nun wieder von anderen Autoren bearbeitet werden. Ein grüner Punkt weist darauf hin, dass die Datei zur Verfügung steht. Ein Autor kann das Auschecken einer Datei rückgängig machen. Die Datei wird dann wieder eingecheckt, ohne dass irgendwelche Änderungen übernommen werden, die seit dem Auschecken der Datei vorgenommen wurden.
6.9.5
Erweiterte Verzeichnisstruktur von Webs
Jedes von Ihnen erstellte FrontPage-Web enthält neben den von Ihnen erzeugten oder eingebundenen Dateien weitere Dokumente und Dateien, die für die Ausführung der FrontPage-Komponenten, für die Indizierung und die Aufgabenverwaltung benötigt werden. Daher sollten Sie keinesfalls diese Ordner oder Dateien löschen, verschieben oder manuell bearbeiten, denn FrontPage speichert darin alle wichtigen Informationen. Die meisten dieser Servererweiterungen tragen das Attribut „versteckt“, sind also im Regelfall für den Betrachter und standardmäßig auch in FrontPage unsichtbar. Das ist gut so, denn ohne diese Erweiterungen ist die Ausführung vieler Funktionen von FrontPage nicht möglich. Prinzipiell sollten Sie von allen Ordner, die mit einem Unterstrich beginnen, die Finger lassen. Versteckte Ordner enthalten wichtige Daten
Tabelle 6.4: Die von FrontPage genutzten Ordner im FrontPage-Web und ihre Funktionen
248
Da versteckte und verbotene Dinge ja aber immer am spannendsten sind, sollen Sie darüber nicht im Unklaren gelassen werden. Folgende Funktionen haben die einzelnen Verzeichnisse und Dateien: Ordner
Funktion
_borders
Verwendet Ihr Web gemeinsame Ränder (engl.: borders), werden die Ränderdefinitionsdateien in diesem Verzeichnis abgelegt. Die Verwendung von gemeinsamen Randbereichen wird in Kapitel 8 erläutert.
_derived
Hier finden Sie Dateien, die FrontPage aus im Web abgelegten Dateien erstellt hat. Beispiele dafür sind Navigationsgrafiken, die zu einem FrontPage-Design gehören und mit benutzerdefinierten Texten versehen wurden.
Konfiguration von Webs
Ordner
Funktion
_themes
Die FrontPage-Designs (vgl. Kapitel 8) sind Vorlagen, die webübergreifende Stilvorlagen beinhalten. Im Ordner themes sind alle Vorlagen und wiederverwendbaren Grafiken abgespeichert.
_vti_bin
Wie der Name dieses Ordners nahe legt, sind hier Binärdateien, mit anderen Worten Programme abgelegt, die von bestimmten FrontPage-Komponenten ausgeführt werden.
_vti_cnf
Diese Ordner werden in jedem Verzeichnis des FrontPageWebs erzeugt und enthalten Konfigurationsdateien für den Server und Informationen zu jeder einzelnen Datei des Webs.
_vti_log
Die Logfiles, die hier abgespeichert werden, sind Protokolle über Aktivitäten im Web, beispielsweise Informationen über Änderungen, die verschiedene Autoren am Web vorgenommen haben.
_vti_pvt
Sofern das Web über Zugriffsbeschränkungen verfügt, werden hier die Passwörter und Sicherheitskonfigurationsdateien abgelegt.
_vti_script
Skripte, die für die Webkomponenten benötigt werden, sind hier zu finden.
_vti_txt
Dieser Ordner enthält u.a. Indexdateien für die Suchfunktion von FrontPage.
Sofern Sie sich gefragt haben, warum wir noch nicht ein einziges Mal darauf eingegangen sind, wie nun eigentlich Internetseiten programmiert werden, seien Sie beruhigt. Alle diese Informationen folgen in den kommenden Kapiteln. Die Arbeit mit FrontPage ist erst in dem Moment sinnvoll und effizient, wenn Webs eingesetzt werden, denn wie Sie in den vergangenen Kapiteln erfuhren, ist es durchaus möglich, auch Seiten ohne HTML-Kenntnisse in ansprechender Weise zu gestalten. Verschiedene, teilweise recht elementare Funktionen lassen sich ohne ein FrontPage-Web als „Gehäuse“ gar nicht nutzen. Um aber tatsächlich individuelle Seiten zu erstellen und – wie versprochen – professionelle Websites zu entwickeln, ist einiges mehr an Wissen und Gefühl für das Medium notwendig. Beides wollen wir Ihnen im weiteren Verlauf des Buches vermitteln.
249
7
Erstellen und Gestalten von Internetseiten
Im letzten Kapitel haben Sie ausführlich das Konzept der FrontPage-Webs kennen gelernt, und es sind fast wie nebenbei Internetseiten entstanden, welche die eigentlichen Elemente einer Website ausmachen. Dabei bildet das FrontPage-Web nur die Struktur und sammelt im Hintergrund Informationen, die von den einzelnen Seiten genutzt werden können. Sind Sie schon vertraut mit HTML und den Besonderheiten von Internetseiten, können Sie getrost ein paar Seiten weiterblättern. Allerdings soll im Folgenden auf elementare Eigenheiten des Mediums Internet, die entscheidend für die Gestaltung und Konzeption von Internetseiten sind, eingegangen werden. Die Erfahrung zeigt, dass es immer wieder Fallgruben gibt, in die man allzu leicht stolpert. Das Web ist voll davon. Die folgenden Ausführungen sollen helfen, die wichtigsten von ihnen zu umgehen.
7.1
Was sind Internetseiten?
Bei der Betrachtung einer Seite Papier wie der, die Sie gerade lesen, lassen sich schnell Eigenschaften ausmachen, die eine hinreichend genaue Definition des Begriffs „Seite“ liefern. Es gibt ein Material von einer bestimmten Beschaffenheit – herkömmliches weißes Papier –, auf das Text und Bilder mit einer oder mehreren Farben gedruckt wurden.
Das Web ist kein Buch
Die Leserichtung im Deutschen läuft stets von links nach rechts und oben nach unten, mehrere Zeilen stehen untereinander, wichtige Begriffe und Überschriften werden durch andersartige Textauszeichnungen hervorgehoben. Die Größe und Handhabbarkeit des Blattes bestimmt die Masse an Informationen, die auf einer Seite Platz finden. Auf welcher Seite man sich befindet, wird durch die Seitennummer angezeigt, die meist am Rand der Seite zu finden ist. Ist das Ende einer Seite erreicht, wird der Inhalt auf der nächsten Seite fortgesetzt, die man durch Umblättern erreicht. Diese Definition könnte noch erweitert werden. Das Besondere an Internetseiten Anders als bei einem Buch gibt es bei Internetseiten kein Material, sondern jede Seite erhält erst in dem Moment wieder eine Form, wenn sie im Internetbrowser angezeigt wird. Zuvor besteht eine Seite nur aus Informationen, die mit Anweisungen versehen sind, wie sie auf der Seite angeordnet und dargestellt werden sollen. Diese Anweisungen sind bestimmten Regeln unterworfen, die als Seitenbeschreibungssprache bezeichnet wird, die festlegt, was wie dargestellt werden soll. Diese Sprache heißt HyperText Markup Language, zu Deutsch Hypertext-Kennzeichnungssprache, kurz HTML.
251
7 Erstellen und Gestalten von Internetseiten
Ursprünglich wurde Hypertext für wissenschaftliche Zwecke entwickelt, und auch die Geschichte von HTML startete im Wissenschaftsbereich. Es wurde am Schweizer Kernforschungszentrum CERN von Tim Berners-Lee entwickelt.
7.1.1 HTML erlaubt Verknüpfungen
Was ist Hypertext?
Hypertext ist nichts anderes als normaler Text, der aber zusätzlich Befehle beinhaltet, die es ermöglichen, verwandte Informationen miteinander zu verknüpfen. In einem Buch steht aller Text hintereinander. Linearer Text ist gut lesbar, aber manchmal soll auf andere Abschnitte verwiesen werden, die ergänzende Informationen liefern. Wird, wie es in diesem Buch häufig vorkommt, auf ein anderes Kapitel hingewiesen, das sich mit dem Thema beschäftigt, das wir hier kurz anreißen, müssen wir einen Verweis auf das Kapitel einbinden. Die Leser sind dann gezwungen, den Daumen oder das Lesezeichen auf dieser Seite zu belassen, um zu diesem Kapitel zu blättern. Steht dort ein weiterer Verweis, ist das Chaos vorprogrammiert. Außerdem ist ein Buch, wenn es geschrieben ist, fertig und kann nur sehr aufwändig erweitert werden. Einen Text einzufügen ist überhaupt nicht möglich. Hypertext umgeht all diese Probleme, indem er in digitaler Form vorliegt, also im Computer bearbeitbar ist, und indem verschiedene Texte so miteinander verknüpft werden können, dass ihre Position und Lage zueinander unerheblich sind. Hyperlinks Die Verweise heißen hier Hyperlinks oder kurz Links. Klicken Sie auf einen Hyperlink (zu Deutsch: Verknüpfung), wird zu dem verknüpften Element gesprungen. Dabei ist es unerheblich, ob sich der Verknüpfungspunkt im selben Dokument, in einer anderen Datei oder gar auf einem anderen Rechner im Internet befindet. Der vereinheitlichte Befehlssatz für Hypertextdokumente ist die Seitenbeschreibungssprache HTML.
7.1.2
Die Struktur von HTML
HTML-Dateien sind einfache ASCII-Textdokumente, die von einem Internetbrowser interpretiert werden, das heißt, der Inhalt wird Zeile für Zeile vom Browser ausgewertet und gemäß den Anweisungen im HTML-Code angezeigt. Öffnen Sie ein HTML-Dokument in einem einfachen Texteditor, wie etwa Notepad, können Sie den Code betrachten und manuell bearbeiten.
252
Was sind Internetseiten?
HTML-Tags HTML hat eine einfache Struktur. Jedes Element, das mit HTML formatiert werden soll, wird von so genannten Tags (Marken, sprich „Tähgs“), umschlossen, die den Anfang und das Ende des Bereiches definieren, dem bestimmte Eigenschaften zugewiesen werden sollen. In der Textverarbeitung, z.B. im Programm Microsoft Word oder StarWriter, wird im Hintergrund genauso verfahren. Soll zum Beispiel ein Wort kursiv dargestellt werden, werden vor und nach dem Wort Steuerzeichen eingefügt, die besagen, dass das umschlossene Element – hier also die Buchstaben – kursiv gesetzt werden. Sie erkennen HTML-Tags an den Klammern (die Zeichen „kleiner als“ und „größer als“), die einen meist dem Englischen entlehnten Begriff oder ein Kürzel umschließen. Jede HTML-Seite wird mit den Tags und gekennzeichnet, die jeweils am Anfang und am Ende jeder Seite stehen. Das Schluss-Tag ist mit dem Anfangs-Tag identisch, enthält aber grundsätzlich zusätzlich einen Schrägstrich vor dem Tag-Namen. Da jeweils Anfang und Ende eines Bereiches gekennzeichnet werden, ist die HTML-Struktur meist symmetrisch: Element
Wird ein Anfangs-Tag gesetzt, bezeichnet man diesen Vorgang meist als Öffnen, das Setzen eines Schluss-Tags als Schließen. Als Element wird jede beliebige Information bezeichnet, ob nun Text, eine Grafik oder weiterer HTMLCode. Das umschließende Tag, das die Information enthält, heißt Container. Darüber hinaus können mehrere Tags ineinander verschachtelt werden. Wozu dies nötig ist, wissen Sie aus der Textverarbeitung. Texte sollen ja nicht immer nur entweder kursiv oder fett oder unterstrichen sein, sondern können diese Attribute gleichzeitig führen.
HTML-Tags verschachteln
In HTML sieht das dann so aus: kursiv, fett und unterstrichen steht für italic (kursiv), für bold (fett) und für underline (unterstrichen). Sie sehen, dass das zuerst geöffnete Tag als letztes wieder geschlossen wird. Damit wird verhindert, dass die Übersichtlichkeit des HTML-Codes verloren geht. Wollen Sie z.B. einen Textabsatz kursiv setzen und einen Teil fett, müssen Sie nicht jedes Mal, wenn sich die Formatierung ändert, jedes Tag neu setzen. Die Struktur wird dann wie folgt gestaltet: kursiv, kursiv und fett,kursiv und unterstrichen
HTML in der Version 3.2 stellt einen derzeitigen Mindeststandard dar, der von allen Browsern verstanden wird. HTML 3.2 umfasst etwa 80 verschiedene Tags, ist also durchaus überschaubar, wenn man bedenkt, wie unterschiedlich damit Seiten gestaltet werden können.
Versionen von HTML
253
7 Erstellen und Gestalten von Internetseiten
Die Bestandteile einer Internetseite Eine HTML-Seite besteht grundsätzlich aus zwei Teilen, dem Head oder Kopf einer Seite, der allgemeine Informationen zur Seite selbst enthält, und dem Body oder Körper der Seite, der den Inhalt der Seite enthält. Listing 7.1 zeigt die einfachste HTML-Seite, die möglich ist. Die HTML-Tags markieren den eingeschlossenen Text als HTML-Code, der Head-Bereich legt den Titel (englisch: Title) fest, und in der Body-Sektion ist der Inhalt der Seite beschrieben. Titel Inhalt Listing 7.1: Die Grundstruktur einer HTML-Seite
Fast alle Tags lassen sich zudem über Attribute anpassen. Diese Attribute sind ergänzende Anweisungen für ein Tag. Soll beispielsweise ein Tag die Schriftart für einen Text bestimmen, wäre das Attribut des Tags der Name der Schriftart. Attribute werden im Anfangs-Tag festgelegt. Element
Listing 7.2 zeigt ein Beispiel. In Zeile 5 finden Sie das Tag , das den Inhalt der Seite definiert. Anders als in Listing 7.1 enthält das Body-Tag hier weitere Attribute, die in diesem Beispiel die Hintergrundfarbe der Seite und die Farbe für Text festlegt. Beispielseite
Cogito, ergo sum (Ich denke, also bin ich.)
René Descartes, 1596-1650
254
Was sind Internetseiten?
Listing 7.2: Eine Beispielseite
Falls Sie das Beispiel-Listing 7.2 verwirrt – haben Sie keine Angst, das Zeichenwirrwarr wird sich bald lüften. Allerdings ist dieses Buch kein HTMLLehrbuch. Daher kann an dieser Stelle nicht ausführlich auf alle Elemente eingegangen werden. Ziel dieses Buches ist es vielmehr, Sie dort damit vertraut zu machen, wo es notwendig wird, denn FrontPage ist ein Programm, das es erlaubt, Seiten auch ohne die Kenntnis von HTML zu erstellen. Schließlich müssen Sie in Word auch nicht wissen, wie die interne Syntax lautet, mit der ein Textabschnitt kursiv gestellt wird. Es ist aber für die Gestaltung von Internetseiten wichtig und ratsam, zumindest ein Grundverständnis dessen zu haben, was hinter den Kulissen vorgeht. Nur so können Sie auch im Vorhinein wissen, was mit HTML möglich ist und was nicht. Wenn Sie Websites regelmäßig pflegen, wird es sicher auch ab und an vorkommen, dass Sie etwas ändern müssen, ohne auf FrontPage zurückgreifen zu können. Meist ist auch der Start eines Texteditors wie Notepad weniger aufwändig als das Öffnen eines Webs und der Seite. FrontPage ist ein rechter Bolide, was den Funktionsreichtum, aber auch was den Ressourcenbedarf betrifft, sodass es oftmals sinnvoller ist, kleinere Änderungen am Inhalt oder am HTML-Code mit einem einfachen Texteditor durchzuführen. Vorschläge, welche Programme sich dafür eignen, finden Sie in Kapitel 15.
7.1.3
HTML-Code im Texteditor bearbeiten
Adressierung von Seiten
Am Anfang dieses Kapitels wurde die Frage gestellt, wie sich Internetseiten von Buchseiten unterscheiden. Es zeigt sich, dass eine HTML-Seite neben Text auch Hypertext-Steuerbefehle enthält. Diese Steuerbefehle sind Anweisungen, wie die damit gekennzeichneten Elemente (zum Beispiel Text) im Internetbrowser dargestellt werden sollen. Im Gegensatz zu einem Buch sind aber andere Komponenten, z.B. Bilder, nicht mit in der Seite enthalten, sondern als separate Dateien vorhanden, die dann mit der Seite verknüpft werden. Erst wenn der Internetbrowser die Seite anzeigt, wird das Bild an dem Punkt eingeblendet, den der HTMLCode dafür vorsieht. Eine Internetseite kann also aus mehreren Dateien bestehen. Wo diese Dateien physikalisch liegen, das heißt, auf welchem Rech-
255
7 Erstellen und Gestalten von Internetseiten
ner sie abgespeichert sind, spielt dabei keine Rolle, solange die Adresse der Datei eindeutig und verfügbar ist. Adressierung im Internet wurde in Kapitel 3 vorgestellt. Wie Sie dort erfuhren, können Dateien, die auf verschiedenen Rechnern liegen, anhand ihrer IP-Adresse oder ihres Domainnamens angesprochen und adressiert werden. Jede Datei ist dabei durch ihren Unified Resource Locator, kurz URL, eindeutig bestimmt und abrufbar. Relative und absolute Links Befindet sich aber eine Datei auf demselben Rechner und im selben Verzeichnis, wäre es unnützer Aufwand, die komplette Adresse anzugeben, um die Datei zu bezeichnen. Einfacher und kürzer ist es, stattdessen Bezug auf den „Horst von nebenan“ zu nehmen. Solche relativen Verweise beziehen sich auf den eigenen Standort, sprich den Speicherort des Dokumentes. HTML-Dokumente sind, wie alle anderen Dateien auf einem Rechner auch, in Ordnern abgespeichert. Beziehungen von Verzeichnissen Befinden sich zwei Dateien im selben Ordner, reicht es, sie in HTML-Dateien mit dem Dateinamen anzusprechen. Statt über die absolute URL http:// www.musicommunity.de/dateien/beispiel/seite.htm kann eine Datei, die sich auch in diesem Ordner befindet, diese Seite auch mit seite.htm aufrufen. Was aber, wenn die Dateien zwar auf demselben Rechner, aber in anderen Verzeichnissen abgespeichert sind? Tabelle 7.1 zeigt die Adressierungsformen für relative Pfade. Die Datei, von der aus die anderen Dateien in diesem Beispiel aufgerufen werden sollen, sind dabei unter der Adresse http://www.musicommunity.de/dateien/beispiel/ seite.htm gespeichert. Tabelle 7.1: Relative Adressierung von Dateien
Wenn auch immer möglich, verwenden Sie in Ihren Webs relative Adressierung. Arbeiten Sie auf einem lokalen Rechner, bevor Sie das Web veröffentlichen, würden anderenfalls später alle Verweise auf dem Server nicht mehr funktionieren. Schließlich gibt es auf dem Server Ihre Festplatte nicht. Front-
256
Einstieg in die Seitengestaltung
Page legt Hyperlinks automatisch relativ an, und dies sollten Sie in Ihren Webs auch beibehalten.
7.2
Einstieg in die Seitengestaltung
Um die Grundprinzipien der Seitengestaltung zu erlernen, ist Ausprobieren der beste Weg. Da Sie sicher schon im Umgang mit Word vertraut sind, wird Ihnen der Einstieg in die Arbeit mit FrontPage leicht fallen, denn der FrontPage-Editor, also die Komponente von FrontPage, die für die Bearbeitung von Seiten verwendet wird, bedient sich ähnlicher Begriffe und Techniken wie ein Textverarbeitungsprogramm.
7.2.1
Eine neue Seite erstellen
Wählen Sie das Menü DATEI | NEU| SEITE ODER WEB, erscheint das bekannte Dialogfenster NEUE SEITE ODER NEUES WEB, mit dem Sie bereits Webs erstellt haben. Wählen Sie unter MIT VORLAGE BEGINNEN den Punkt SEITENVORLAGEN, um zur Auswahl der Dokumentvorlagen zu gelangen. Auf die Dokumentvorlagen gehen wir in Kapitel 7 ein. Lassen Sie daher zunächst die Vorlage Standardseite markiert und klicken Sie auf OK. Erstellen Sie stattdessen eine neue, leere Seite aus der gleichen Vorlage mit einem Klick auf das NEUE DATEI-Symbol in der Symbolleiste oder benutzen Sie das Tastenkürzel (Strg)+(N) Abbildung 7.1: Die Vorlagen für neue Seiten
257
7 Erstellen und Gestalten von Internetseiten
7.2.2
Speichern von Seiten
Die Seite, die eben erstellt wurde, ist noch nicht gespeichert. Bevor Sie anfangen, Änderungen an der Seite vorzunehmen, sollten Sie dies jedoch tun. Denn schon hier kommt zum Tragen, was im vorangegangenen Kapitel erläutert wurde: Relative Verknüpfungen können nur dann festgelegt werden, wenn die Position der Datei, von der aus verknüpft wird, bestimmt wurde. Anderenfalls erstellt FrontPage Hyperlinks, die den Pfad der Datei auf Ihrer Festplatte oder Ihrem Netzwerk beinhalten, sodass nach der Veröffentlichung des Webs die Seiten nicht mehr gefunden werden können. Legen Sie für jedes Projekt am besten einen neuen Ordner an, damit Sie den Überblick behalten. Auch eine Strukturierung des Webs durch Unterordner kann dann sinnvoll sein, wenn das Web viele Dateien enthält und Sie der Effizienz halber mit kurzen Dateinamen arbeiten. Eine neue Seite speichern Sie über das Menü DATEI | SPEICHERN, das SPEICHERN-Symbol in der Menüleiste oder das Tastenkürzel (Strg)+(S). Das Menü SPEICHERN UNTER erscheint, und Sie können den Ordner für die zu speichernde Datei angeben. Im Feld DATEINAME legen Sie den Namen der Datei fest. Beachten Sie dabei die Namenskonventionen. Generell sollten Sie keine Sonderzeichen, Leerzeichen oder Umlaute verwenden. Durchgängige Kleinschreibung des Dateinamens hilft Ihnen, Fehler zu vermeiden. Klicken Sie nun auf das Feld TITEL ÄNDERN, um den Seitentitel festzulegen. Der Titel ist eine reine Information, die nichts mit dem Namen der Datei zu tun hat. Er wird in der Titelleiste des Browsers angezeigt und stellt so etwas wie die Überschrift der Seite dar. Die Besucher können daraus entnehmen, was die Seite enthält, noch während sie geladen wird. Darüber hinaus ordnen Suchmaschinen die im Titel einer Seite enthaltenen Wörter dieser Seite als Suchbegriffe zu. Ein gut gewählter Titel hilft so Internetnutzern, die Seiten zu finden, welche die gesuchten Informationen enthalten. In Kapitel 9 erfahren Sie mehr über die Vorbereitung Ihrer Seiten für Suchmaschinen. In Listing 7.1 haben Sie gesehen, dass der Titel im Head-Bereich jeder Seite enthalten ist und so schon zu Beginn der Interpretation durch den Browser ausgewertet wird. Sie können den Titel jederzeit ändern, sollten aber schon zu Beginn einen Titel festlegen, damit Sie die gewünschte Datei schneller wiederfinden können, falls die Dateinamen kurz und wenig aussagekräftig sind, (was im Übrigen auch nicht notwendig ist). Im Feld DATEITYP fallen eine ganze Reihe von unterschiedlichen Dateitypen auf. Welcher Typ für Sie der richtige ist, entnehmen Sie Tabelle 7.2. Im Regelfall werden Sie HTML verwenden. Wählen Sie als Format daher „.htm“ oder „.html“. Klicken Sie nun auf SPEICHERN, um die Seite zu speichern.
258
Einstieg in die Seitengestaltung Abbildung 7.2: Das Menü zum Speichern einer Seite und Festlegen des Seitentitels
7.2.3
Dateitypen in FrontPage
FrontPage kann eine Reihe verschiedener Dateitypen bearbeiten und verwalten. Dateitypen erkennen Sie an den mindestens drei Zeichen langen Kürzeln, die als Suffixe an jede Datei mit einem Punkt angehängt sind. Während unter Betriebssystemen wie MacOS eine solche Kennzeichnung des Dateityps nicht zwingend notwendig ist, fordert Windows diese Endungen, um verschiedene Dokumentformate unterscheiden zu können. Beispiele dafür sind .exe für ausführbare Anwendungen, „.gif“ oder „.jpg“ für Grafikdateien oder „.htm“ und „.html“ für HTML-Dokumente. Letztere sind grundsätzlich reine ASCII-Textdokumente. Neben HTML-Dokumenten können mit FrontPage auch Cascading Style Sheets oder dynamische Serverdateien (ASP) erstellt werden. Tabelle 7.2 zeigt die verschiedenen Dokumentformate. Dateityp
Inhalt
htm, html
Hypertext Markup Language-Dokument Der Standardtyp für HTML-Dokumente. HTML und HTM sind identisch, die Kurzform HTM wurde von Microsoft festgelegt, um auch unter Windows 3.x und DOS mit HTML-Dokumenten arbeiten zu können, da diese Betriebssysteme nur Dateitypen mit einer Länge von drei Zeichen verarbeiten können.
Tabelle 7.2: Dateitypen, die FrontPage erstellen kann
259
7 Erstellen und Gestalten von Internetseiten
Dateityp
Inhalt
shtml, shtm, stm
Structured Hypertext Markup Language-Dokument HTML ist eine vereinfachte Form der Seitenbeschreibungssprache SGML (Standardized General Markup Language). SHTML-Dokumente enthalten über die HTML-Befehle hinaus weitere SGML-Informationen zum Inhalt und zur Darstellung des Dokumentes. Diese Informationen werden zumeist nicht von Internetbrowsern interpretiert, sondern können zum Beispiel von Content-Management-Systemen ausgewertet werden.
htt
Hypertext Template Seit der Einführung des Microsoft Internet Explorer 4.0 wird dieser Browser auch als Ergänzung des Standard-Dateimanagers von Windows, des Windows-Explorer genutzt. Die Dateistruktur der Festplatte, die Systemsteuerung und viele weitere Funktionen werden dabei auf der Basis von HTML angezeigt. Die Vorlagen, die dabei eingesetzt werden, um flexibel Inhalte darzustellen, sind im „htt“-Format gespeichert, das neben HTML-Tags auch Skripte und Windows-spezifische Befehle enthält.
asp
Active Server Pages Eine von Microsoft entwickelte Technologie zur Datenbankanbindung. Kapitel 14 erläutert ASP.
css
Cascading Style Sheet Diese globalen Designvorlagen legen fest, wie einzelne Tags im Browser dargestellt werden. In Kapitel 11 erfahren Sie mehr über CSS.
tem
FrontPage-Template Diese Dateivorlagen werden in FrontPage zur Erstellung von Seiten mit einer festgelegten Struktur verwendet. Dabei wird keine eigentliche Datei, sondern ein Ordner mit dem Namen und dem Suffix „.tem“ gespeichert, der die eigentlichen Seiten, Grafiken und sonstigen Vorlagen enthält. Speichern Sie eine HTML-Seite mit diesem Dateityp, um neue Seiten mit derselben Struktur erstellen zu können. Kapitel 7 geht näher auf FrontPage-Vorlagen ein.
7.3
Seiteneigenschaften
Jede HTML-Seite verfügt über Eigenschaften, die im Head der Seite festgelegt werden. Diese Eigenschaften beinhalten die Codierung und Sprache der Seite, verschiedene Variablen, die von Browsern und Archivierungsprogrammen wie Suchmaschinen ausgewertet werden können, und den Titel der Seite. Als Eigenschaften der Seite können aber auch Vorgaben für Farben, Hintergrundgrafiken und weitere globale Regeln bestimmt werden.
260
Seiteneigenschaften
Das Dialogfenster mit den Seiteneigenschaften finden Sie im Kontextmenü der Seite, wenn Sie also in der Seitenansicht nach einem Mausklick mit der rechten Taste den Punkt SEITENEIGENSCHAFTEN wählen.
Das Feld ADRESSE zeigt die URL der Seite an. Die Adresse können Sie nur dann verändern, wenn Sie die Seite an einen anderen Ort speichern oder das Web veröffentlichen. Der TITEL der Seite ist der Text, der in der Titelleiste des Browserfensters erscheint, wenn die Seite aufgerufen wird. Der Seitentitel wird auch in der Navigationsansicht von FrontPage angezeigt. Sie können den Titel auch dort ändern. Suchmaschinen beziehen aus dem Titel die Schlagwörter, mit denen die Seite gefunden werden kann. Verwenden Sie daher kurze und präzise Titel, die den Inhalt der Seite widerspiegeln. Das Feld STANDARDZIELFRAME ist nur dann aktiv, wenn Sie mit Frames arbeiten. Kapitel 10 zeigt Ihnen, wie Sie Frames einsetzen. Hintergrundsound Haben Sie in den Seitenoptionen der aktuellen Seite als Kompatibilitätseinstellung NUR INTERNET EXPLORER ausgewählt, können Sie einen HINTERGRUNDSOUND für die Seite auswählen. Nur der Internet Explorer unterstützt das HTML-Attribut bgsound. Haben Sie einen anderen Kompatibilitätsmodus ausgewählt, bleibt dieser Optionsbereich deaktiviert. Im Feld ADRESSE oder über die Schaltfläche DURCHSUCHEN können Sie die URL einer Sounddatei eingeben. Typische Dateiformate für eine Sounddatei sind wav, au oder mid. Legen Sie einen Hintergrundsound fest, startet der Internet Explorer die Wiedergabe, sobald die Datei geladen ist, was bei Sounddateien auf Grund
Nur für Internet Explorer geeignet
261
7 Erstellen und Gestalten von Internetseiten
ihrer Größe oftmals sehr lange dauern kann. Eine Ausnahme bildet das sehr kompakte MIDI-Format. Aktivieren Sie das Feld KONTINUIERLICH, um den Sound fortlaufend wiederholen zu lassen. Ist das Auswahlfeld deaktiviert, können Sie die Anzahl der DURCHLÄUFE bestimmen. Näheres zu Musik in Internetseiten beschreibt Kapitel 10. Entwurfszeit-Steuerelemente „Entwurfszeit-Steuerelemente“ sind Programm-Komponenten, die das Funktionsspektrum von Internetseiten stark erweitern. Im Bereich „Skripts für Entwurfszeit-Steuerelemente“ können Sie die Skriptsprachen für solche Steuerelemente festlegen, die Skripts schreiben. Die Möglichkeiten sind dabei nicht nur vom eingesetzten Internetbrowser, sondern auch vom Server abhängig, auf dem das Web läuft. Setzen Sie den Internet Information Server oder eine andere Plattform ein, die Active Server Pages unterstützt, wählen Sie im Feld PLATTFORM „ASP“ aus. Alternativ ist eine clientseitige Verarbeitung möglich, für die der Internet Explorer ab Version 4.0 benötigt wird. In den Feldern CLIENT und SERVER kann die Skriptsprache, die Sie verwenden wollen, eingestellt werden. Kapitel 12 erläutert die Entwurfszeit-Steuerelemente.
7.3.2
Hintergrund
Wählen Sie die Registerkarte HINTERGRUND aus, um ein Bild zur Anzeige im Seitenhintergrund zu bestimmen. Abbildung 7.4: Hintergrundeinstellungen der Seite
Im Bereich FORMATIERUNG können Sie ein Hintergrundbild für Ihre Seite auswählen, das statt einer einheitlichen Farbe im Internetbrowser angezeigt wird. Als Hintergrundbilder eignen sich alle Grafikdateien in den Formaten GIF und JPEG. Zwar erlaubt FrontPage auch die Auswahl anderer Dateiformate, diese werden aber, wenn überhaupt, dann nur von bestimmten Browsern unterstützt. Verwenden Sie daher nur diese beiden Formate.
262
Seiteneigenschaften
Ist ein Hintergrundbild kleiner als die gesamte Seite, was die Regel sein wird, „kachelt“ der Internetbrowser das Bild, das heißt, die Grafik wird über die gesamte Höhe und Breite der Seite mehrfach neben- und untereinander eingeblendet. Ist das Bild größer als das Browserfenster, werden die überstehenden Ränder abgeschnitten, ohne dass der Inhalt der Seite scrollbar wird. Klicken Sie auf DURCHSUCHEN , um eine Grafik auszuwählen. Haben Sie ein Web geöffnet, werden im Dialogfenster HINTERGRUNDBILD WÄHLEN die im Web vorhandenen Grafiken angezeigt. Die Vorschaufunktion bietet die Möglichkeit, vor dem Einfügen der Grafik das gewünschte Bild zu betrachten. Haben Sie bereits eine Grafik als Hintergrundgrafik ausgewählt und lassen Sie sich die Seiteneigenschaften erneut anzeigen, steht die Schaltfläche EIGENSCHAFTEN zur Verfügung, über die Sie die Bildeigenschaften der Hintergrundgrafik definieren können. Der Internet Explorer bietet eine Option an, die FrontPage WASSERZEICHEN nennt. Ist der Inhalt größer als das Browserfenster, kann ein Benutzer den Seiteninhalt scrollen. Ist das Auswahlfeld „Wasserzeichen“ aktiviert, wird nur der Vordergrund, nicht aber das Hintergrundbild bewegt. Andere Internetbrowser unterstützen diese Funktion nicht. Wie Sie Grafiken für Hintergrundbilder erstellen, bearbeiten und optimieren können, zeigt Kapitel 8. Abbildung 7.5: Eine Seite mit Hintergrundbild
Der Bereich FORMATIERUNG bietet auch die Option HYPERLINK-ROLLOVEREFFEKTE AKTIVIEREN.
263
7 Erstellen und Gestalten von Internetseiten
Benutzerdefiniert Die Registerkarte BENUTZERDEFINIERT stellt Eingabemasken für Variablen zur Verfügung, die Sie für jede Webseite festlegen können. Abbildung 7.6: Anpassung der System- und Benutzervariablen
FrontPage trägt über die System- und Benutzervariablen so genannte MetaInformationen in eine HTML-Seite ein. Abschnitt 7.3.3 erläutert die Bedeutung und Funktion von Meta-Informationen. Klicken Sie auf HINZUFÜGEN, um eine neue Variable anzulegen, und geben Sie im neuen Dialogfenster Namen und Wert der Variablen ein. Markieren Sie in der Liste der Variablen einen Wert, und klicken Sie auf ÄNDERN, um die Variable zu bearbeiten. Die Schaltfläche ENTFERNEN löscht die markierte Variable aus dem Dokument. FrontPage trägt recht selbstbewusst die Benutzervariablen „Generator“ und „ProgId“ ein. Die Funktion dieser Variablen besteht lediglich darin, darauf hinzuweisen, dass diese Seite mit FrontPage 2002 erstellt oder bearbeitet wurde. Neben dem rein informativen Gehalt gibt es keinen tatsächlichen Grund, diese beiden Tags in eine HTML-Seite einzubinden. Bemühen Sie sich aber nicht, diese beiden Variablen zu löschen. Spätestens nach dem nächsten Öffnen der Datei in FrontPage hinterlässt das Programm seine Signatur wieder im Dokument.
7.3.3
Meta-Tags
Meta-Informationen sind Variablen, die nicht im Inhalt der Seite erscheinen, aber von Internetbrowsern und Suchmaschinen ausgewertet werden. Über Meta-Tags können Autoren Copyright-Informationen und Kontaktadressen angeben, Suchbegriffe und Anweisungen für Suchmaschinen in die Seiten einbetten, aber auch Befehle an den Browser des Benutzers weiterleiten.
264
Seiteneigenschaften
FrontPage unterscheidet begrifflich zwischen System- und Benutzervariablen. Die Entsprechung für Systemvariablen in HTML ist das Meta-Attribut http-equiv. Diese Meta-Informationen dienen vor allem der Kommunikation zwischen Server und Browser. Benutzervariablen, die insbesondere von Suchmaschinen ausgewertet werden, sind mit dem Attribut name gekennzeichnet. Die Werte dieser Attribute markieren den Typ der Meta-Tags. Die tatsächlichen Informationen werden über das Attribut content übermittelt. Aus der Vielzahl der möglichen Meta-Informationen seien hier die wichtigsten genannt. http-equiv=“refresh“ Mit dieser Meta-Information wird der Browser angewiesen, nach einer bestimmten Zeit anstelle der derzeitigen Seite eine andere Seite zu laden. Der Zeitraum wird hierbei in Sekunden definiert, als Adresse der neuen Seite kann jede gültige URL verwendet werden. Einsatzmöglichkeiten bestehen darin, eine Startseite nur für eine kurze Zeit anzuzeigen, um danach den tatsächlichen Inhalt zu präsentieren. Auch Slideshows, also zeitgesteuerte Präsentationen verschiedener Seiten oder Bilder, lassen sich mit diesem Tag realisieren. Interessant ist dies auch für die Einblendung unterschiedlicher Werbebanner in Websites, die Frames benutzen.
Seiten automatisch aufrufen
Beispiel: <meta http-equiv=“refresh“ content=“30;url=beispiel.htm“> http-equiv=“pragma“ Um die Menge der herunterzuladenden Informationen zu begrenzen und damit Bandbreite zu sparen, verwenden viele Browser einen Cache genannten Zwischenspeicher, in dem Dateien abgelegt werden, die bereits einmal heruntergeladen wurden. Ist der Browser so eingestellt, dass das Originaldokument nicht mit dem Dokument im Cache verglichen wird, kann es passieren, dass der Browser eine veraltete Seite anzeigt, nachdem Sie das Dokument auf dem Server aktualisiert haben. Bei Seiten, deren Inhalt sich oft ändert, oder datenbankgenerierten Dokumenten ist dies unerwünscht. Möchten Sie sicherstellen, dass Ihre Besucher den jeweils aktuellsten Stand Ihrer Seiten sehen, verwenden Sie dieses Tag.
Browser-Cache löschen
Verwendung: <meta http-equiv=“pragma“ content=“no-cache“> http-equiv=“robots“ Suchmaschinen verwenden so genannte Robots (Roboter) oder Spider (Spinnen); das sind automatisierte Internetbrowser, die das World Wide Web durchsuchen und die gefundenen Seiten auf ihre Inhalte überprüfen und nach Schlagwörtern indizieren. Während es bei den meisten Seiten erwünscht ist, dass sie in Suchmaschinen gefunden werden, gibt es auch Dokumente, die nicht in Suchmaschinen auftauchen sollen, weil ihr Inhalt vertraulich ist oder so oft aktualisiert wird, dass der Eintrag in einer
Suchmaschinen unterstützen
265
7 Erstellen und Gestalten von Internetseiten
Suchmaschine nie aktuell wäre. Mit diesem Tag können Sie festlegen, wie Suchmaschinen dieses Dokument behandeln sollen. Neben einer Sperre der Indizierung dieser Seite können Sie dabei auch festlegen, ob die Robots Hyperlinks in der Seite verfolgen sollen. Gültige Werte finden Sie in der folgenden Tabelle. Tabelle 7.3: Werte für das MetaTag ROBOTS
Content-Wert
Funktion
index
Der Robot nimmt die Begriffe dieser Seite in die Datenbank auf.
noindex
Die Seite wird nicht in den Index der Suchmaschinen eingetragen.
follow
Der Robot folgt den Hyperlinks in der Seite.
nofollow
Der Robot verfolgt die Hyperlinks in der Seite nicht.
Beispiel: <meta http-equiv=“robots“ content=“noindex, nofollow“> Untersucht ein Suchroboter Ihre Seite, filtert er bestimmte Suchbegriffe heraus, nach denen dann die Seite in der Suchmaschine gefunden werden kann. Sie können passende Suchbegriffe für eine Seite aber auch zusätzlich angeben. Diese Begriffe müssen dann nicht in der Seite direkt auftauchen. Einen Missbrauch dieser Funktionen durch übermäßigen Einsatz von Schlagwörtern oder Wortwiederholungen bestrafen die Suchmaschinen durch Streichung aus dem Index. Sie sind also gut beraten, wirklich nur passende Suchbegriffe anzugeben und dies sparsam aber präzise zu tun. Obwohl oder gerade weil „Sex“ das am meisten gesuchte Wort im Internet ist, vermeiden Sie dieses und ähnliche Wörter, wenn Sie kein Erotik-Angebot betreiben. Verkaufen Sie ComputerHardware, wählen Sie genauere Bezeichnungen, beispielsweise die Namen der Hersteller, deren Produkte Sie vertreiben, denn eine Suche nach Computer und Hardware ergibt meist Millionen von gefundenen Seiten, sodass die Chance, dass Sie gerade unter den ersten zehn angezeigten Seiten auftauchen, minimal ist. Weitere Tipps für die Optimierung Ihrer Seiten für Suchmaschinen geben Kapitel 4 und 9. Folgende Meta-Tags können Sie zur Angabe von Suchbegriffen einsetzen. name=“keywords“ Mit diesem Tag legen Sie einzelne Suchbegriffe oder Wortgruppen fest. Geben Sie möglichst nicht mehr als 20 Suchbegriffe ein, und trennen Sie Schlagwörter mit Kommata. Beispiel: <meta name=“keywords“ content=“Musik, Fan, CD, Schallplatte, Pink Floyd“>
266
Seiteneigenschaften
name=“description“ Tragen Sie hier einen griffigen Text ein, den Suchmaschinen als Beschreibung des Seiteninhaltes anzeigen, wenn diese Seite als Treffer in der Suchmaschine ausgegeben wird. Die Besucher entscheiden anhand dieses Textes, ob sie Ihr Angebot aufsuchen. Schreierische Werbetexte à la „Die beste Seite im Netz. Hier finden Sie alles, was Sie schon immer gesucht haben.“ lösen keinen Klickanreiz aus. Beispiel: <meta name=“description“ content=“Musicommunity lädt Musikfans zum Austausch über ihre Lieblingsinterpreten, Komponisten und Bands ein.“> name=“abstract“ Manche Suchmaschinen prüfen dieses Meta-Tag anstelle des DescriptionTags. Tragen Sie hier denselben Content wie bei name=“description“ ein. name=“revisit-after“ Suchmaschinen prüfen Websites regelmäßig auf Aktualisierungen. Das Intervall ist dabei von Suchmaschine zu Suchmaschine unterschiedlich. Mit diesem Tag laden Sie die Roboter nach der angegebenen Zeit, die Sie in Tagen (englisch: Days) angeben können, wieder ein. Eine zu kurze Frist bestrafen die Suchmaschinen mit der Entfernung Ihrer Seiten aus dem Index! Beispiel: <meta name=“revisit-after“ content=“15 days“> name=”expires” Verliert Ihre Seite zu einem bestimmten Zeitpunkt ihre Gültigkeit, weil das Semester oder der Sommerschlussverkauf zu Ende ist, oder wissen Sie, wann Ihre Website „umzieht“, können Sie den Suchmaschinen mitteilen, wann die Seite aus dem Index gestrichen werden soll. Damit verhindern Sie, dass Besucher Ihre Seite in der Suchmaschine finden, die Seite dann aber nicht angezeigt werden kann und die Besucher verärgert abziehen. Die korrekte Syntax hierfür ist Jahr-Monat-Tag. Beispiel: <meta name=“expires“ content=“1999-12-31“> name=”author” Sie sind der Autor. Ihnen gebührt Anerkennung für eine gute Seite. Lassen Sie Besucher wissen, wer die Seite entworfen hat. Beispiel: <meta name=“author“ content=“Dietmar Kracht“> Standardmäßig zeigen Internetbrowser die Seiteninhalte mit einem kleinen Abstand von etwa 10 Pixel Breite im Browserfenster an. Dies verbessert die Lesbarkeit an den Rändern, ist aber nicht immer erwünscht. Besonders wenn Sie Frames einsetzen oder eine Grafik ganz am Rand des Dialogfensters positionieren wollen, müssen diese Ränder entfernt werden. Sie können dies in der Registerkarte ALLGEMEIN über den Button FORMATVORLAGE tun.
267
7 Erstellen und Gestalten von Internetseiten
Im Dialogfenster FORMATVORLAGE BEARBEITEN, zu erreichen über die Schaltfläche ÄNDERN, finden Sie unten links einen Auswahlknopf, der unter dem Menüpunkt RAHMEN ein Dialogfenster öffnet, in dem Sie die Abstände zum Rand einstellen können. Spezifizieren Sie die Abstände in Pixel für die vier Seiten des Browserfensters. FrontPage fügt dann dem -Tag der Seite die entsprechenden Attribute hinzu. Abbildung 7.7: Dialogfenster „Rahmen und Schattierung“, schwer zu finden
Farben und Vordergrund Genau genommen definieren Sie über die Registerkarte HINTERGRUND auch den Vordergrund einer Seite. Im Bereich FARBEN können Sie für die gesamte Seite Farbvorgaben festlegen. Sie können dabei Eigenschaften für den Hintergrund und die Textelemente der Seite bestimmen. Tabelle 7.4 zeigt die verschiedenen Elemente und deren HTML-Attribute. Tabelle 7.4: Farbeigenschaften einer HTML-Seite
268
Name
HTMLAttribut
Besonderheiten
Hintergrund bgcolor
Der Hintergrund wird, sofern kein Hintergrundbild ausgewählt wurde, in dieser Farbe dargestellt.
Text
text
Alle Zeichen des Textes werden mit dieser Farbe dargestellt.
Hyperlink
link
Alle Hyperlinks der Seite erhalten diese Farbe. Auch Bilder, die als Hyperlink definiert sind, werden mit dieser Farbe umrahmt.
Seiteneigenschaften
Name
HTMLAttribut
Besonderheiten
Besuchter Hyperlink
vlink
Alle Hyperlinks, die ein Besucher schon einmal angeklickt hat, werden so eingefärbt. Stellen Sie für diese Farbe möglichst einen Mittelwert zwischen Text und Hyperlinkfarbe ein, um den Besuchern zu vermitteln, dass sie die damit verknüpfte Seite schon besucht haben.
Aktiver Hyperlink
alink
Während eine Seite aufgerufen wird, nachdem ein Hyperlink angeklickt wurde oder wenn bei einer Frames-Konstruktion die Seite angezeigt wird, ist der Hyperlink „aktiv“ und wird in dieser Farbe dargestellt.
Die Farbwerte, die Sie hier einstellen, werden im body-Tag der Seite eingetragen: Beispiel:
Hintergrundeigenschaften übernehmen Hat Ihre Website mehrere Seiten, sollten Sie das Aussehen aller Seiten vereinheitlichen. Um Farbeinstellungen nicht für jede Seite manuell vornehmen zu müssen und die Anpassung dieser Eigenschaften zu erleichtern, bietet FrontPage die Option HINTERGRUNDINFORMATIONEN VON EINER ANDEREN SEITE ÜBERNEHMEN. Wählen Sie eine andere Seite des Webs aus, indem Sie auf DURCHSUCHEN klicken oder geben Sie die URL der gewünschten Seite an. Der Browser liest dann bei jedem Zugriff auf diese Seite die Farbinformationen aus der angegebenen Seite aus. Zwei Bedingungen müssen hierbei jedoch erfüllt sein: Die Seite muss zu dem Zeitpunkt der Betrachtung verfügbar sein, und der Browser muss Cascading Style Sheets unterstützen. Kapitel 11 erläutert dies näher.
7.3.4
Sprache und Codierung
Klicken Sie auf die Registerkarte SPRACHE, um festzulegen, in welcher Sprache der Inhalt der Seite geschrieben ist. FrontPage nutzt diese Einstellung für die Rechtschreibprüfung. Im Bereich „Sprache der Seite“ können Sie aus der Liste „Aktuelles Dokument markieren als“ die Sprache des Dokumentes bestimmen. Die HTML-Codierung bestimmt die Tabelle der Zeichen, die zur Definition von Buchstaben, Ziffern und Son|derzeichen verwendet wird. Sie ist für jede Sprache oder Sprachgruppe unterschiedlich. Verwenden Sie eine der europäischen Sprachen auf Ihrer Tastatur und arbeiten Sie mit einem Betriebssystem in einer dieser Sprachen, sollten Sie die Einstellung „US/Westeuropäisch“
269
7 Erstellen und Gestalten von Internetseiten
auswählen. Achten Sie auf die Besonderheiten der Seitencodierung und auf mögliche Probleme bei der Anzeige auf verschiedenen Betriebssystemen. Abbildung 7.8: Sprach- und Codierungseigenschaften
7.3.5
Arbeitsgruppe
Die Registerkarte ARBEITSGRUPPE umfasst drei verschiedene Optionsbereiche: Die Zuordnung der Seite zu bestimmten Kategorien, die Festlegung von verantwortlichen Autoren und Aufgaben sowie eine Einstellung für die Veröffentlichung der Seite. Abbildung 7.9: Die Registerkarte „Arbeitsgruppe“
270
Text
Einer Seite verschiedene Kategorien zuzuordnen kommt dann infrage, wenn Sie Berichte über Ihr Web erzeugen wollen. In Kapitel 9 wird erklärt, wie Sie Berichte erzeugen und welchen Nutzen diese haben. Die Optionen für die Arbeitsgruppe kommen zum Einsatz, wenn Sie mit verschiedenen Autoren zusammenarbeiten und die Aufgabenverwaltung koordinieren. Kapitel 13 beschäftigt sich mit der Verwaltung von Aufgaben und Autoren.
Arbeitsgruppen für mehrere Autoren
Im unteren Teil der Registerkarte befindet sich das Auswahlfeld DIESE SEITE VERÖFFENTLICHEN DES WEBS AUSSCHLIESSEN. Damit können Sie bestimmen, ob die Seite mit auf den Server übertragen wird, wenn Sie das Web veröffentlichen. Von Bedeutung ist diese Funktion vor allem dann, wenn Sie Teile des Webs als Unterweb in ein anderes Web veröffentlichen wollen. Kapitel 6 erläutert den Umgang mit Webs und Unterwebs.
BEIM
7.3.6
System- und Benutzervariablen
Die Registerkarte BENUTZERDEFINIERT stellt Eingabemasken für Variablen zur Verfügung, die Sie für jede Webseite festlegen können.
7.4
Text
Die Darstellung einer HTML-Seite in FrontPage erinnert an ein Textverarbeitungsprogramm wie Microsoft Word, das ebenfalls Teil der Microsoft OfficeFamilie ist. Sind Sie bereits mit der Arbeit mit Word vertraut, fällt es Ihnen sicher leicht, mit FrontPage Texte in Ihren Webseiten zu erstellen. Bewegen Sie die Maus in die Seitenansicht von FrontPage, ändert sich der Mauszeiger in ein großes I, was anzeigt, dass hier Text eingegeben werden kann. Klicken Sie in den weißen Bereich der Seite, erscheint die Texteinfügemarke am linken oberen Bildrand. Dort beginnt der Inhalt, und Sie können nun Text eingeben. Erreicht der Text den rechten Seitenrand, wird er automatisch umbrochen. Anders als bei Textverarbeitungs- oder Layoutprogrammen gibt es in HTML keine Möglichkeit, Seitenränder oder genaue Maße für die Größe einer Seite anzugeben. Die Größe des Fensters des Internetbrowsers beim Betrachter legt fest, welche Breite und Höhe die Seite hat. Mögliche Größen werden dadurch bestimmt, wie groß die Besucher ihr Browserfenster eingestellt haben und mit welcher Bildschirmauflösung sie arbeiten. Welche Regeln für die Anpassung der Seiten für unterschiedliche Systemkonfigurationen zu beachten sind, werden nachfolgend erläutert.
Eingeschränkte Textformatierung
271
7 Erstellen und Gestalten von Internetseiten
7.4.1
Besonderheiten von HTML-Text
Text, den Sie in der Normalansicht eingeben, wird zunächst normal dargestellt, das heißt, es werden ihm keine speziellen Attribute zugewiesen. Die Einstellungen des Internetbrowsers des Betrachters entscheiden darüber, in welcher Größe und mit welcher Schriftart der Text angezeigt wird. Sie können allerdings auch Schriftarten, Größen und Farben für jedes Zeichen festlegen. Geben Sie einen kurzen Satz ein, und wechseln Sie dann in die HTML-Ansicht, indem Sie auf die Registerkarte HTML am unteren Rand der Seite klicken. Wie Sie in bereits erfahren haben, sind im oberen Teil der Seite, der den Head enthält, allgemeine Informationen zur Seite zu finden. Der Body enthält die tatsächlichen Inhalte. Sie erkennen, dass FrontPage den von Ihnen eingegebenen Text in den Body der Seite eingefügt hat. Hinter dem letzten Zeichen, das Sie in der Normalansicht eingetippt haben, blinkt die Einfügemarke. Sie können nun auch hier Ihren Text eingeben. Schreiben Sie einige kurze Sätze und drücken Sie nach jedem Satz die (¢)Taste. Schreiben Sie nun noch zwei Wörter in eine neue Zeile und trennen Sie diese Wörter durch mehrere Leerzeichen. Wechseln Sie zurück in die Normalansicht. Abbildung 7.10: HTML-Seite mit Text in der HTMLAnsicht
272
Text
Dort ist nun auch der Text zu sehen, den Sie in der HTML-Ansicht hinzugefügt haben. Allerdings fehlen die Zeilenumbrüche, die Sie mit der (¢)-Taste eingegeben hatten, ebenso wie dass statt mehrerer Leerzeichen nur ein Leerzeichen zwischen den letzten beiden Wörtern steht. Der Grund dafür ist, dass Leerzeichen, Tabstopps und Zeilenumbrüche im HTML-Code ignoriert werden, um den Code besser strukturieren zu können. Damit ist es möglich, im Code zur besseren Übersichtlichkeit Absätze einzurücken oder Leerzeilen einzufügen, ohne das Erscheinungsbild im Browser zu beeinflussen. Bei größeren Seiten mit stark verschachtelten Tags und besonders bei Skripten in den Seiten ist für eine fehlerlose Programmierung eine solche Struktur besonders hilfreich. Abbildung 7.11: Dieselbe Seite in der Normalansicht
Wechseln Sie zurück in die HTML-Ansicht, hat FrontPage im HTML-Code automatisch einen Zeilenumbruch bei Zeichen 80 eingefügt. Auch wenn diese Strukturierung sinnvoll ist, kann es unter Umständen nicht im Sinne des Autors sein, dass FrontPage den Code anpasst. Leider ist diese Anpassung durch FrontPage nicht zu umgehen. Geben Sie in der Normalansicht Texte mit Umlauten und Sonderzeichen ein, wandelt FrontPage diese automatisch in deren ASCII-Codes um, sodass sie auf allen Betriebssystemen korrekt angezeigt werden. Kapitel 7 erklärt die Verwendung von Sonderzeichen und ASCII-Codes.
273
7 Erstellen und Gestalten von Internetseiten
7.4.2
Text eingeben und bearbeiten
Die Eingabe und Bearbeitung von Texten erfolgt in FrontPage analog zum Vorgehen in Textverarbeitungsprogrammen. Die Einfügemarke, an der Text eingefügt wird, kann mit der Maus positioniert werden, indem Sie mit der linken Maustaste auf die gewünschte Stelle klicken. Eine HTML-Seite wird (sofern Sie keine Sprache wie Hebräisch oder Arabisch verwenden) von links oben aufgebaut. Zeichen werden dann jeweils hinter das vorangehende Zeichen und in Anpassung an dessen Größe gesetzt, wie Sie dies auch aus Textverarbeitungsprogrammen kennen. Allerdings können Sie die Einfügemarke nicht beliebig auf der Seite positionieren. Dies ist in HTML nicht ohne weiteres möglich. Tricks, wie Sie aber dennoch eine absolute Positionierung erreichen können, zeigen wir in den Kapiteln 7, 8 und 13. Leerzeichen und Tabulatoren Sie können darüber hinaus in HTML nicht mit Leerzeichen am Anfang einer Zeile oder mit Tabulatoren arbeiten. Geben Sie ein solches Zeichen am Anfang einer Zeile ein, wird der erste darauf folgende Buchstabe trotzdem am Anfang der Zeile dargestellt. Auch mehrere Leerzeichen hintereinander sind wirkungslos. Sollten Sie dennoch den Abstand zwischen Wörtern oder Zeichen mit Hilfe von Leerzeichen vergrößern wollen, setzen Sie dazu das HTMLSonderzeichen ein. Dieser „Non-Breaking Space“ ist ein geschütztes Leerzeichen, das ursprünglich verhindern sollte, dass am Ende einer Zeile bei wichtigen Wortgruppen umbrochen wird. Allerdings stellen Browser diese geschützten Leerzeichen – anders als Standardleerzeichen, die Sie über die Leertaste eingeben –, auch wenn mehrere hintereinander stehen, korrekt dar. So lässt sich hiermit auf einfache Art und Weise ein Zeileneinzug generieren, der anderenfalls nur mit Hilfe eines besonderen HTML-Tags für einen ganzen Absatz umzusetzen ist. Beachten Sie aber, dass die Darstellung dieser Leerzeichen von der Schriftgröße im Browser des Betrachters abhängt. Sie können sich also nicht darauf verlassen, dass ein Text, der mit diesem Zeichen strukturiert wurde, dort so angezeigt wird wie bei Ihnen. Sie werden bereits Unterschiede zwischen der Normalansicht und der Vorschauansicht in FrontPage erkennen können. Das geschützte Leerzeichen geben Sie in der Normalansicht über das Tastenkürzel (Strg)+(ª)+(Leertaste) ein.
274
Text
Text bearbeiten Haben Sie Text eingegeben und möchten Sie einzelne Teile des Textes innerhalb der Seite verschieben oder korrigieren, verwenden Sie dazu die aus der Textverarbeitung bekannten Verfahren: 왘 Markieren
Um einen Textbereich zu manipulieren, markieren Sie den Text. Klicken Sie dazu mit der linken Maustaste vor das erste Zeichen, das Sie markieren möchten, und ziehen Sie mit festgehaltener Maustaste den Mauszeiger hinter das letzte Zeichen des Textabschnittes. Alternativ können Sie besonders bei längeren Textabschnitten auch vor ein Zeichen klicken, die Maustaste wieder loslassen, die (ª)-Taste drücken, den Mauszeiger hinter das letzte zu markierende Zeichen setzen und wieder mit der linken Maustaste dorthin klicken. Markierten Text stellt FrontPage invers dar. 왘 Klicken Sie doppelt auf ein Wort, um es zu markieren. Sie können
aber auch gleichzeitig die Tasten (Strg)+(ª) gedrückt halten und mit den Pfeiltasten (Æ) und (æ) das an die Einfügemarke angrenzende Wort markieren.
왘 Bewegen Sie den Mauszeiger vor den Anfang einer Zeile, verändert
sich der Mauszeiger in einen nach rechts gekippten Pfeil. Klicken Sie nun auf den Seitenrand, um die gesamte Zeile zu markieren. Ziehen Sie den Mauszeiger mit gehaltener linker Maustaste nach unten, um mehrere Zeilen zu markieren. 왘 Den gesamten Inhalt der Seite markieren Sie über (Strg)+(A) oder das Menü BEARBEITEN | ALLES MARKIEREN. 왘 Eine Markierung heben Sie auf, indem Sie in einen beliebigen Bereich
der Seite klicken. Alle nun folgenden Veränderungen betreffen den markierten Bereich. 왘 Löschen
Zeichen links von der Einfügemarke löschen Sie mit der (Backspace)Taste, Zeichen rechts davon mit der (Entf)-Taste. Markierte Abschnitte werden von jeder der beiden Tasten oder über das Menü BEARBEITEN | LÖSCHEN gelöscht. 왘 Ausschneiden
Ausschneiden bedeutet im Computer immer, dass der Text (oder sonstige Information) in die Zwischenablage kopiert und aus dem Dokument entfernt wird. Drücken Sie dazu die Tasten (Strg)+(X), oder wählen Sie das Menü BEARBEITEN | AUSSCHNEIDEN. Die ausgeschnittenen Informationen befinden sich nun in der Zwischenablage und können weiterverwendet werden. Allerdings fasst die Zwischenablage nur ein Objekt, sodass beim erneuten Kopieren oder Ausschneiden die Zwischenablage damit überschrieben wird. Dieser Vorgang kann nicht rückgängig gemacht werden.
275
7 Erstellen und Gestalten von Internetseiten 왘 Kopieren
Kopieren funktioniert wie das Ausschneiden, allerdings wird hier der Text nicht aus dem Dokument entfernt. Wählen Sie das Menü BEARBEITEN | KOPIEREN oder die Tastenkombination (Strg)+(C). 왘 Einfügen
Haben Sie Text oder andere Informationen in die Zwischenablage kopiert oder ausgeschnitten, können Sie ihn mit (Strg)+(V) oder über das Menü BEARBEITEN | EINFÜGEN wieder in dieses oder in ein anderes Dokument einfügen. 왘 Verschieben
Indem Sie einen Abschnitt ausschneiden und an einer anderen Stelle wieder einfügen, lässt sich Text verschieben. Einfacher geht es aber, wenn Sie auf einen markierten Bereich klicken, die Maustaste nicht wieder loslassen und dann dorthin bewegen, wo der Abschnitt neu positioniert werden soll. Der Mauszeiger verwandelt sich daraufhin in einen Pfeil mit einem halbtransparenten Quadrat. Lassen Sie die Maustaste wieder los, wenn sich der halbtransparente Strich, der gleichzeitig im Text erscheint, an der gewünschten Stelle befindet. Text aus anderen Anwendungen einfügen Verwenden Sie andere Textverarbeitungsprogramme, wie etwa Microsoft Word, StarWriter oder das Windows WordPad, können Sie Text in FrontPage über die Zwischenablage importieren. Dies gilt auch für alle anderen Programme, die mit Text umgehen, etwa E-Mail-Programme. Kopieren Sie dort den Text und fügen Sie ihn in FrontPage ein, oder markieren Sie den Text in der anderen Anwendung und ziehen Sie ihn mit der Maus in das Microsoft FrontPage-Fenster. Sollten Sie alle Dialogfenster maximiert oder minimiert haben, können Sie die Maus auf das FrontPage-Symbol in der Taskleiste ziehen, bis sich FrontPage öffnet. Lassen Sie dann die Maus los, wird der Text an der gewählten Stelle eingefügt. Auf dieselbe Art können Sie natürlich auch Text aus FrontPage in andere Anwendungen einfügen. Kopieren Sie Text aus Word nach FrontPage, wird Ihnen auffallen, dass die meisten Formatierungen beibehalten werden. Die Formatierungsbefehle aus Word werden übernommen und in HTML-Code umgesetzt. Allerdings kommen dabei Cascading Style Sheets zum Einsatz, das sind Formatierungsdefinitionen, die nicht von allen Browsern verstanden werden. Vollkommen korrekt können nur die Internet Explorer 4 und 5 diese Definitionen anzeigen.
276
Text
7.4.3
Absätze und Umbrüche
Wie auch in Textverarbeitungsprogrammen gibt es in HTML zwei Möglichkeiten, Umbrüche im Text einzufügen: Absatz- und Zeilenwechsel. Ein Absatz ist ein Seitenbereich, der durch das HTML-Tag
(für Paragraph) gekennzeichnet wird. Einen Absatz fügen Sie ein, indem Sie am Ende des Textbereiches die (¢)-Taste drücken. FrontPage umschließt dann den Text mit diesem Tag. Der nächste Absatz beginnt mit einem größeren Zeilenabstand. Zeilenumbruch Ein Zeilenumbruch hingegen gibt nur die Anweisung, den Text auf der nächsten Zeile fortzusetzen. Der Text bleibt dabei aber Teil des Absatzes. Einen Zeilenumbruch fügen Sie über das Menü EINFÜGEN | MANUELLER UMBRUCH ein. Wählen Sie im nun erscheinenden Dialogfenster die Option NORMALER ZEILENUMBRUCH. Wesentlich einfacher geht es aber, wenn Sie gleichzeitig die (ª)- und (¢)-Tasten drücken. Das HTML-Tag für einen Zeilenumbruch heißt (englisch: Line Break). Abbildung 7.12: Das Dialogfenster „Umbruch“
Das Dialogfenster UMBRUCH bietet aber noch weitere Möglichkeiten. Die drei anderen Optionen fügen dem -Tag jeweils ein Attribut hinzu, das beeinflusst, wie Text umbrochen wird, wenn im Absatz auch Bilder eingefügt sind. Absätze Sie können für einen Absatz bestimmte Formatierungen festlegen, die für den gesamten Absatz gelten. Welche Formatierungen Sie hier einsetzen können, hängt dabei vor allem vom Browsertyp des Betrachters ab. Browser, die Cascading Style Sheets verarbeiten können, wie etwa der Internet Explorer ab Version 3 oder Netscape Navigator ab Version 4, erlauben hier weitaus mehr Optionen. Es soll daher an dieser Stelle nur auf zwei Formatierungsmöglichkeiten für Absätze eingegangen werden, die von allen Browsern korrekt angezeigt werden – die horizontale Ausrichtung und Einzüge. Ausrichtung Die horizontale Ausrichtung ist Ihnen aus Textverarbeitungsprogrammen bekannt. Absätze können linksbündig, zentriert oder rechtsbündig ausgerichtet werden. Der Text wird dann an einem Seitenrand ausgerichtet und am anderen Rand je nach Seitenbreite umbrochen. Man spricht daher von
277
7 Erstellen und Gestalten von Internetseiten
Flattersatz. Zentrierter Text wird an der vertikalen Mittelachse der Seite ausgerichtet. Darüber hinaus gibt es eine Option für Blocksatz, die jedoch nur von modernen Browsern unterstützt wird. Abbildung 7.13: Horizontale Ausrichtung von Absätzen
Die linksbündige Ausrichtung ist die Standardeinstellung. Alle Absatzausrichtungen können über das Menü FORMAT | ABSATZ eingestellt werden. In der Menüleiste FORMAT finden Sie außerdem Schaltflächen für die linksund rechtsbündige sowie die zentrierte Ausrichtung. Im HTML-Code wird die Absatzausrichtung durch das Attribut align im Tag
bestimmt. Tabelle 7.5: Optionen für die Ausrichtung von Absätzen
Ausrichtung
HTML-Tag
Linksbündig
Zentriert
Rechtsbündig
Blocksatz
Einzüge Wie bereits erwähnt, gibt es in HTML keine Möglichkeit, Text mit Hilfe von Leerzeichen oder Tabulatoren einzurücken. Das HTML-Tag
kann dazu verwendet werden, obwohl es seinem Ursprung nach dazu gedacht war, längere Zitate als solche zu kennzeichnen. Da die Browser aber einen mit diesem Tag versehenen Absatz einrücken und nicht weiter formatieren, hat es sich eingebürgert, dieses Tag für Einzüge zu benutzen. Auch FrontPage macht mit seiner Funktion davon Gebrauch.
278
Text
Klicken Sie in der Symbolleiste FORMAT auf das Symbol EINZUG VERGRÖSSERN, um einen Absatz einzurücken. Das Tastenkürzel für diese Funktion ist (Strg)+(M). Sie können auch mehrfach auf diese Schaltfläche klicken, um den Einzug zu vergrößern. Dabei fügt FrontPage um den Absatz ein weiteres
-Tag ein. Die Schaltfläche EINZUG VERKLEINERN oder das Tastenkürzel (Strg)+(ª)+(M) macht den Vorgang rückgängig. Abbildung 7.14: Text mit Einzügen
Diese Methode, Absätzen Einzüge zuzuweisen, ist nicht präzise, da keine genaue Maßangabe für den Einzug festgelegt werden kann. Jeder Browser unterscheidet sich hier. Eine bessere Variante zum Einzug von Absätzen bieten Tabellen. Trennungen und Umbrüche Wo und wie Text im Browser umbrochen wird, hängt von der Größe des Browserfensters beim Betrachter ab. Da ein langer Text ohne Umbrüche generell schwer zu lesen ist, fügen Sie am zweckmäßigsten häufig Zeilenwechsel oder besser Absätze ein. Verfügt der Betrachter über einen großen Bildschirm mit hoher Auflösung, kann ein langer Text zudem so breit werden, dass es schwer ist, den richtigen Übergang zur nächsten Zeile zu finden. Allerdings sollten Sie keinesfalls die Breite Ihres Textes mit Hilfe von Umbrüchen verkleinern, es sei denn, dies ist wirklich beabsichtigt. Nutzen Sie dazu besser Tabellen. Sie sind weitaus besser für die Strukturierung von Text geeignet. Verwenden Sie lange Wörter bei begrenzter Breite, kann es – vor allem bei kleinen Browserfenstern – zu Problemen bei der Darstellung kommen. Leider gibt es in HTML keine Möglichkeit der automatischen Silbentrennung und auch kein Sonderzeichen für einen versteckten Trennstrich, der nur dann angezeigt wird, wenn ein Zeilenumbruch im Wort notwendig ist.
279
7 Erstellen und Gestalten von Internetseiten
Dennoch sollten Sie möglichst keine manuellen Trennstriche einfügen. Es kann sonst zu unliebsamen Verschiebungen des Textes kommen, die nicht voraussehbar sind. Besonders lange zusammengesetzte Substantive können Sie jedoch an passenden Stellen mit Bindestrichen versehen, statt sie zusammenzuschreiben.
7.4.4
Überschriften
Überschriften legen neben der Hierarchieebene auch die Zeichengröße der Überschrift fest. Der Vorteil ist, dass Sie nicht jedes Mal die Überschrift manuell formatieren müssen, sondern allein durch die Zuweisung des Überschriften-Tags den Browser anweisen, diesen Text als Überschrift der Ebene X darzustellen. In HTML gibt es sechs Hierarchieebenen für Überschriften. Gekennzeichnet werden Überschriften durch die Tags
bis
, wobei „h1“ die Überschrift der höchsten Ebene darstellt. In den meisten Browsern werden Überschriften fett gesetzt. Die Schriftgrade der Überschriftenebenen 1 bis 3 ist meist größer als die Normalschrift, sodass diese drei Ebenen auch als Überschriften wahrgenommen werden. Abbildung 7.15: Überschriften
Eine Überschrift ist ein Absatz, Sie müssen also nicht zusätzlich vor oder nach einer Überschrift einen Absatz einfügen. Um den Abstand vor und nach der Überschrift zu vergrößern, sind Zeilenumbrüche besser geeignet. Leider lassen sich in HTML Überschriften nicht automatisch nummerieren. Dies ist in der Regel auch nicht notwendig, da Internetseiten eher kurz gehalten und längere Texte stattdessen auf mehrere Dateien aufgeteilt werden sollten.
280
Text
7.4.5
Zeichenformatierungen
Eine Reihe von HTML-Tags bieten Ihnen die Möglichkeit, Zeichen und Textbereiche unterschiedlich zu formatieren. Die von FrontPage angebotenen Formatierungen umfassen Schriftart, Schriftschnitt und Schriftgrad und eine Reihe von Effekten. Auf Windows-Plattformen wird in den Webbrowsern als Standardschrift meist die Schriftart „Times New Roman“ eingesetzt. Auch FrontPage zeigt den Text standardmäßig in dieser Schriftart an. Im Browser ist auch die Schriftgröße voreingestellt. Wollen Sie die Schriftart ändern, die in Ihren Seiten verwendet wird, können Sie die Details über die Zeicheneigenschaften ändern. Markieren Sie den zu formatierenden Bereich, klicken Sie dann mit der rechten Maustaste auf den markierten Abschnitt, und wählen Sie aus dem Kontextmenü die Option ZEICHEN. Das Eigenschaftenfenster für Zeichen erreichen Sie auch über das Menü FORMAT|ZEICHEN oder über das Tastenkürzel (Alt)+(¢). Schriftarten In der Liste „Schriftarten“ sind alle auf Ihrem System installierten Zeichensätze aufgeführt. Sind Sie ein Schriftenfan, kann diese Liste leicht 200 und mehr Schriften enthalten. Ob die Besucher allerdings auch diese Schriften besitzen, bleibt zu bezweifeln. Sie können daher nur die häufigsten Schriftarten einsetzen, um sicherzugehen, dass die Betrachter Ihre Seiten wie Sie angezeigt bekommen. Wählen Sie eine Schrift aus der Liste aus, um sich eine Vorschau anzeigen zu lassen. Der markierte Bereich wird, nachdem Sie OK gedrückt haben, mit dieser Schriftart formatiert. Abbildung 7.16: Mit unterschiedlichen Schriftarten ausgezeichneter Text
281
7 Erstellen und Gestalten von Internetseiten
Eine weitere Möglichkeit, eine Schriftart für einen Textbereich auszuwählen, ist die Auswahlliste SCHRIFTEN in der Symbolleiste FORMAT. Auch dort finden Sie alle Schriften, die Sie einem markierten Abschnitt zuordnen können, indem Sie die gewünschte Schrift hier auswählen. Schriftschnitte Schriftschnitte sind Varianten einer Schriftart. Der Begriff Schnitt rührt daher, dass Typen für den Druck früher aus Blei gegossen wurden und die Gussform meist aus Holz bestand, die geschnitten wurde. Beispiele sind der kursive, also schräg gestellte Schnitt oder der fette Schnitt. Viele Schriften verfügen über weitere Schnitte. Diese lassen sich aber nicht ohne weiteres in HTML-Seiten einbinden, sofern sie nicht als separate Schriftdatei vorliegen. FrontPage bietet im Feld SCHRIFTSCHNITT vier Varianten an: Standard, Kursiv, Fett und Fett Kursiv. Wählen Sie den gewünschten Schnitt und drücken Sie OK. In der Symbolleiste FORMAT finden Sie zusätzlich die Schaltflächen FETT und KURSIV. Wählen Sie die gewünschten Schnitte, indem Sie die Schaltflächen anklicken. Sie können beide gleichzeitig auswählen, um einen Text fett und kursiv auszuzeichnen. Sind beide Schaltflächen nicht angeklickt, wird der Standardschnitt verwendet. Schriftgrade In Internetseiten können Sie nicht ohne weiteres genaue Punktgrößen für Schriften angeben. HTML kennt sieben verschiedene Schriftgrade, die von 1 bis 7 nummeriert sind, wobei 1 den kleinsten und 7 den größten Grad bezeichnet. Als Standardgröße ist 3 festgelegt. FrontPage zeigt in den Schriftgradlisten in Klammern Vergleichsgrößen in Punkthöhen an, die Sie auch in Text- und Grafikprogrammen verwenden. Diese Größen sind aber stets von der Bildschirmauflösung des Betrachters abhängig. Auch hier können Sie im Eigenschaftenfenster ZEICHEN oder in der Symbolleiste FORMAT die Grade auswählen. Schriftfarben Endlich wird es bunt. Da Internetseiten sehr flexibel mit Farben gestaltet werden können (und sollten), kann hier mit Farben weitaus verschwenderischer umgegangen werden, als dies beim Druck möglich wäre. Dunkle Hintergründe mit hellen Schriften sind problemlos zu realisieren und oftmals angenehmer am Bildschirm zu lesen. Natürlich sind mit Farben überfrachtete Seiten ebenso zu vermeiden wie unpassende Farbkombinationen mit zu starken oder zu schwachen Kontrasten. Eine knallgrüne Seite mit hellvioletter Schrift bringt garantiert keine begeisterten Besucher ein. Doch diese ästhetischen Fragen seien Ihrem Geschmack überlassen.
282
Text
Allerdings gibt es auch einige technische Besonderheiten bei der Auswahl von Farben zu beachten. Abschnitt 7.8.6 weist auf die wichtigsten Kriterien hin. Hier sei aber schon darauf hingewiesen, dass es eine Palette von 216 Farben gibt, die auf allen Systemen und in allen Browsern korrekt dargestellt werden. FrontPage bietet Ihnen diese Farben in einer Farbwahlpalette an, die Sie in der Symbolleiste FORMAT HINTER DEN SYMBOLEN FÜR DIE HINTERGRUND- ODER DIE SCHRIFTFARBE FINDEN. Abbildung 7.17 zeigt das Dialogfenster WEITERE FARBEN mit der „websicheren“ Palette. Es ist ratsam, sich bei der Farbauswahl für Hintergründe und Farbflächen dieser begrenzten Anzahl von Farben zu bedienen. Bei Schriften müssen Sie dies nicht unbedingt tun. Abbildung 7.17: Die „websichere“ Farbwahlpalette
Um einem Textbereich eine bestimmte Farbe zuzuordnen, wählen Sie wiederum die ZEICHENEIGENSCHAFTEN oder die Schaltfläche SCHRIFTFARBE in der Symbolleiste FORMAT. Diese Schaltfläche verfügt über einen kleinen Pfeil an der rechten Seite, den Sie anklicken können, um andere Farben auszuwählen. Abbildung 7.18: Die Auswahl von Schriftfarben in der Symbolleiste „Format“
Allerdings bietet FrontPage dort nur 16 Windows-Standardfarben an, die Sie nicht verwenden sollten, denn sie gehören nicht zu den websicheren Farben. Klicken Sie stattdessen auf WEITERE FARBEN. Im Dialogfenster WEITERE FARBEN, das daraufhin geöffnet wird, können Sie die websicheren Farben aus-
283
7 Erstellen und Gestalten von Internetseiten
wählen. Klicken Sie auf die gewünschte Farbe, wird sie im rechten Bereich des Dialogfensters in einem Vorschaufenster mit der aktuellen Farbe verglichen. Das RGB-Farbmodell Im Feld WERT sehen Sie den Hexadezimalcode der Farbe, der in HTML zur Definition von Farben verwendet wird. Das Farbmodell, das standardmäßig zur Anzeige von Farben auf dem Bildschirm verwendet wird, heißt RGB. Dieses Farbmodell kann ca. 16,7 Millionen Farben darstellen und basiert auf einem 24-Bit-Schlüssel. Dazu werden die drei Farbwerte Rot, Grün und Blau in einer Skala mit 256 Stufen additiv zusammengesetzt. Sind alle Farbwerte auf 0 gesetzt, ergibt dies Schwarz, die kombinierten Maximalwerte 255,255,255 erzeugen Weiß. In HTML ist es üblich, diese Farbwerte mit dem Hexadezimalcode anzugeben. Die Basis des hexadezimalen Zahlensystems ist 16. Dazu werden neben Ziffern 0 bis 9 auch die Buchstaben A bis F genutzt. Die Dezimalzahl 0 wird in Hexadezimalcode 00 geschrieben, die Zahl 1 als 01 und die Zahl 255 als FF. Mit dem Windows-Rechner, den Sie im Startmenü unter PROGRAMME | ZUBEHÖR finden, können Sie Dezimalzahlen in Hexadezimalzahlen umwandeln. Wechseln Sie dazu über das Menü ANSICHT in den Modus WISSENSCHAFTLICH. Geben Sie eine Zahl zwischen 0 und 255 ein und klicken Sie auf das Auswahlfeld HEX. Die Zahl wird dann hexadezimal angezeigt. Um in HTML einen Farbwert anzugeben, wird das Attribut color benutzt. Dem Hexadezimalcode wird stets das Zeichen # vorangestellt, und die Farbwerte für Rot, Grün und Blau werden ohne Komma hintereinander geschrieben. Die Farbe Blau wird beispielsweise so gekennzeichnet: color=“#0000ff“, einen beruhigenden Ockerton erzeugt der Eintrag color=“#0000ff“. Das Feld WERT bedient sich des Hexadezimalsystems, und Sie können dort nicht nur den Code betrachten, sondern auch selbst eingeben. Farben auswählen Wollen Sie eine Farbe übernehmen, die bereits im aktuellen Dokument verwendet wird, beispielsweise in einer Grafik, benutzen Sie die Pipette. Klicken Sie dazu auf das Feld AUSWÄHLEN. Der Mauszeiger wird zu einer Pipette. Klicken Sie mit der Spitze der Pipette auf einen beliebigen Punkt am Bildschirm, können Sie dessen Farbe mit der Pipette aufnehmen. Diese wird damit zur neuen Farbe. Um eine beliebige Farbe selbst zu „mischen“, rufen Sie über BENUTZERDEFINIERT den Standard-Windows-Farbenmischer auf. Der Farbenmischer erlaubt es, mit den Farbmodellen HSL und RGB Farben in Dezimalcode festzulegen und genau abzustimmen.
284
Text Abbildung 7.19: Der WindowsFarbenmischer
Hinter den Kulissen Das HTML-Tag zur Definition von Schrift heißt . Über verschiedene Attribute können Sie damit die Schriftarten, -grade und -farben festlegen. Attribut
Beispielwert
Bedeutung
face
Arial, Helvetica
Legt die Schriftart fest. Verschiedene Schriftarten werden mit Kommata und Leerzeichen voneinander getrennt.
size
2
Legt den Schriftgrad fest.
color
#336699
Legt die Farbe des Textes im Hexadezimalcode fest.
Tabelle 7.6: Attribute des fontTags
Ein vollständiges Tag für die Schriftdefinition lautet: Text
Nicht alle Attribute müssen festgelegt werden. Darüber hinaus können auch mehrere Tags ineinander verschachtelt werden, um Teilbereiche eines Textes anders zu formatieren. Hallo Welt, dies ist Text
285
7 Erstellen und Gestalten von Internetseiten
In diesem Beispiel wird der gesamte Text in der Schriftart Times oder Times New Roman in einem dunklen Grau angezeigt, aber Teile des Textes haben unterschiedliche Schriftgrößen. Schriftgrade können übrigens auch relativ, das heißt in Beziehung zur Schriftgröße des umgebenden Textes angegeben werden. Dazu wird das size-Attribut verwendet: Text größer und kleiner
Mit diesen Attributen können Sie das Verhältnis von Zeichengrößen zueinander festlegen, ohne jedes Mal die exakte Größe angeben zu müssen. Ändern Sie dann den size-Wert des umgebenden Tags, ändern sich auch die Werte im Inneren relativ. Eine praktische Anwendung wären Initialen am Anfang eines Absatzes oder in einer Überschrift: Crimson Consulting Aktiengesellschaft
Leider wird diese Funktion von FrontPage nicht unterstützt. Sie können aber im HTML-Code damit arbeiten.
7.4.6
Zeichenformatierungen
Neben Schriftarten, -graden und -farben können Sie eine Reihe weiterer Formatierungen auf Text anwenden. FrontPage nennt diese Formatierungen Effekte. Diese Effekte werden durch HTML-Tags festgelegt, die Sie Tabelle 7.7 entnehmen können. Damit Sie diese Tags nicht manuell eingeben müssen, verwenden Sie das Eigenschaftenfenster für Zeichenformatierung. Sie können es über das Menü FORMAT | ZEICHEN oder über das Tastenkürzel (Alt)+(¢) aufrufen, nachdem Sie den zu formatierenden Text markiert haben. Welche der Effekte zur Verfügung stehen, hängt davon ab, welche Browser Sie unterstützen wollen. Über das Menü EXTRAS | SEITENOPTIONEN können Sie festlegen, für welche Browser und deren Versionen Ihre Seiten optimiert werden sollen. FrontPage blendet dann die Optionen aus, die für diese Browser nicht infrage kommen.
286
Text Abbildung 7.20: Das Eigenschaftenfenster für Zeichenformatierung
Bezeichnung
HTML-Tag/Attribut
Besonderheiten
Kursiv
Fett
Unterstrichen
Durchgestrichen
<strike>
Hochgestellt
<sup>
Tiefgestellt
<sub>
Betont
<strong>
Entspricht
Hervorgehoben
<em>
Entspricht
Beispiel
<samp>
Meist kursiv
Definition
Meist kursiv
Zitat
Meist kursiv
Variable
Meist in einer Schriftart mit fester Zeichenbreite dargestellt
Tastatur
Code
Überstrichen
text-decoration: overline
Kapitälchen
font-variant: small-caps
Tabelle 7.7: Effekte für die Zeichenformatierung
Diese Effekte können nur mit Browsern verwendet werden, die CSS unterstützen
287
7 Erstellen und Gestalten von Internetseiten
Bezeichnung
HTML-Tag/Attribut
Großbuchstaben
text-transform: uppercase
Initialen groß
text-transform: capitalize
Verborgen
visibility: hidden
Besonderheiten
FrontPage bietet auch den Effekt Blinkend an. Das dafür zuständige Tag
