Claude Reuter http://cours.creuter.lu
Werbung
Claude Reuter [email protected] http://cours.creuter.lu Formation http://cours.creuter.lu Seite 2/71 WebDesign Inhaltsverzeichnis INHALTSVERZEICHNIS .............................................................................................................................................. 1 INHALTSVERZEICHNIS .............................................................................................................................................. 2 VORWORT....................................................................................................................................................................... 5 VORTEILE VON WEBEDITOREN ....................................................................................................................................... 5 DIE WAHL VON FRONTPAGE ........................................................................................................................................... 5 1. ETAPPE: VORÜBERLEGUNGEN ZUM AUFBAU EINES WEBSITES ............................................................. 6 DAS WEB IST EIN RAUM .................................................................................................................................................. 6 DIE ANSPRÜCHE DES BENUTZERS ................................................................................................................................... 6 10 REGELN ZUM GELUNGENEN WEBAUFTRITT (VON JENNIFER FLEMING)....................................................................... 6 DESIGNING FOR USERS..................................................................................................................................................... 6 DIE ARCHITEKTUR DES SITES .......................................................................................................................................... 7 Kategorien .................................................................................................................................................................. 7 Verzeichnisse .............................................................................................................................................................. 7 Grafik und andere Inhalte........................................................................................................................................... 7 NAVIGATIONSSTRUKTUR ................................................................................................................................................. 8 Breit und flach ............................................................................................................................................................ 8 Schmal und tief ........................................................................................................................................................... 8 Breit und tief ............................................................................................................................................................... 8 NAVIGATIONSELEMENTE ................................................................................................................................................. 8 EXTERNE NAVIGATION .................................................................................................................................................... 8 WEBSITE-UNTERHALT..................................................................................................................................................... 9 Information Gathering................................................................................................................................................ 9 Strategy....................................................................................................................................................................... 9 Prototyping ................................................................................................................................................................. 9 Implementation ......................................................................................................................................................... 10 Launch ...................................................................................................................................................................... 10 Maintenance and Growth ......................................................................................................................................... 10 FAZIT............................................................................................................................................................................. 10 Die 10 wichtigsten Punkte (nach Wilhelm Köhler): ................................................................................................. 10 Die schlimmsten Fehler (nach Wilhelm Köhler)....................................................................................................... 10 DATEIEN HOCHLADEN (UPLOAD)......................................................................................................................... 11 DOWNLOAD ................................................................................................................................................................... 11 INSTALLATION ............................................................................................................................................................... 11 EINRICHTUNG ................................................................................................................................................................ 11 Das WS-FTP Fenster................................................................................................................................................ 12 BILDSCHIRM VON FRONTPAGE ............................................................................................................................ 13 NEUES WEB ANLEGEN.............................................................................................................................................. 13 WEBSITE-VORLAGEN .................................................................................................................................................... 15 WORKSHOP: STRUKTUR EINES NEUEN WEBS AUFBAUEN ......................................... ERROR! BOOKMARK NOT DEFINED. Navigation ................................................................................................................................................................ 15 Ordnerliste................................................................................................................................................................ 17 Gemeinsame Randbereiche....................................................................................................................................... 17 Seitenbanner ............................................................................................................................................................. 19 Navigationsschaltflächen.......................................................................................................................................... 19 Design....................................................................................................................................................................... 19 VERSCHIEDENE ANSICHTEN.................................................................................................................................. 21 SEITEN EDITIEREN .................................................................................................................................................... 22 HTML: EINFÜHRUNG .............................................................................................. ERROR! BOOKMARK NOT DEFINED. TAG und HTML ...........................................................................................................Error! Bookmark not defined. Das erste eigene HTML-Dokument .............................................................................Error! Bookmark not defined. Frames .........................................................................................................................Error! Bookmark not defined. TEXT EINGEBEN UND FORMATIEREN .............................................................................................................................. 25 DATEIEN IMPORTIEREN.................................................................................................................................................. 26 SEITENEIGENSCHAFTEN ................................................................................................................................................. 28 CSS ............................................................................................................................................................................... 30 Filtereffekte mit CSS ................................................................................................................................................. 31 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 3/71 WebDesign CSS in FrontPage ..................................................................................................................................................... 32 VORLAGEN .................................................................................................................................................................... 34 Register ALLGEMEIN .............................................................................................................................................. 34 Register FRAMESSEITEN........................................................................................................................................ 35 Register STYLESHEETS ........................................................................................................................................... 36 LINKS ............................................................................................................................................................................ 28 FORMULARE ................................................................................................................................................................ 37 FORMULARELEMENTE ................................................................................................................................................... 38 Einzeilige Eingabefelder: input ................................................................................................................................ 38 Mehrzeilige Eingabefelder: textarea ........................................................................................................................ 38 Auswahllisten: select ................................................................................................................................................ 38 Radiobutton .............................................................................................................................................................. 39 Checkbuttons ............................................................................................................................................................ 39 Ausführungsbuttons .................................................................................................................................................. 39 FORMULAR ANPASSEN ................................................................................................................................................... 39 AUSWERTEN DES FORMULARS ...................................................................................................................................... 41 BILDER/GRAFIKEN .................................................................................................................................................... 22 BILDER .......................................................................................................................................................................... 22 THUMBNAILS ................................................................................................................................................................. 24 IMAGEMAPS ................................................................................................................................................................... 24 ANIMATED GIFS ............................................................................................................................................................ 25 MULTIMEDIA............................................................................................................................................................... 43 SOUND ........................................................................................................................................................................... 43 MP3 .......................................................................................................................................................................... 43 VIDEO............................................................................................................................................................................ 43 RealAudio/Video ....................................................................................................................................................... 44 RealAudio/Video Dateien in HTML-Seiten einbetten ............................................................................................... 44 EMBED-EINSTELLUNGEN ............................................................................................................................................ 44 CONTROLS-Parameter für RealVideo..................................................................................................................... 45 MULTIMEDIA ALS LINK ................................................................................................................................................. 47 MULTIMEDIA IN FRONTPAGE ........................................................................................................................................ 47 FLASH............................................................................................................................................................................ 48 DYNAMIK ...................................................................................................................................................................... 49 JAVASCRIPT ................................................................................................................................................................... 49 Einbettung von JavaScript in HTML-Dokumente ..................................................................................................... 49 Workshop:Javascript-Quiz ....................................................................................................................................... 50 DYNAMIC HTML (DHTML)......................................................................................................................................... 50 Die Probleme von DHTML....................................................................................................................................... 51 FrontPage und DHTML ........................................................................................................................................... 51 Seitenübergänge ....................................................................................................................................................... 51 JAVA .............................................................................................................................................................................. 52 PUBLIZIEREN............................................................................................................................................................... 55 WEITERE FUNKTIONEN ........................................................................................................................................... 56 DATENBANKEN ............................................................................................................................................................. 56 ASP (ACTIVESERVERPAGES) ........................................................................................................................................ 57 CGI ............................................................................................................................................................................... 58 ZEHN TIPPS ZUR BESSEREN PERFORMANCE ................................................................................................... 59 ANHANG ........................................................................................................................................................................ 61 HTML-KURZREFERENZ ................................................................................................................................................ 61 Definition des Dokuments......................................................................................................................................... 61 Textformate und -auszeichnungen ............................................................................................................................ 61 Schriftfarbe, Hintergrund ......................................................................................................................................... 61 Listen ........................................................................................................................................................................ 61 Bilder ........................................................................................................................................................................ 61 interne Verweise ....................................................................................................................................................... 62 externe Verweise....................................................................................................................................................... 62 Tabellen .................................................................................................................................................................... 62 FARBTABELLE ............................................................................................................................................................... 62 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 4/71 WebDesign SOFTWARE .................................................................................................................................................................... 63 HTML-Editoren ........................................................................................................................................................ 63 Grafikprogramme ..................................................................................................................................................... 63 Sound/Video/Animations-Programme ...................................................................................................................... 64 WEBSEITEN .................................................................................................................................................................. 65 VORÜBERLEGUNGEN ..................................................................................................................................................... 65 HTML........................................................................................................................................................................... 65 MIDI, REALAUDIO/VIDEO, QUICKTIME: ...................................................................................................................... 65 GRAFIKOPTIMIERUNG .................................................................................................................................................... 65 MP3 .............................................................................................................................................................................. 65 JAVASCIPT ..................................................................................................................................................................... 65 DHTML........................................................................................................................................................................ 65 CSS ............................................................................................................................................................................... 66 JAVA............................................................................................................................................................................ 66 CGI ............................................................................................................................................................................... 66 ASP............................................................................................................................................................................... 66 BIBLIOGRAPHIE ......................................................................................................................................................... 67 GELUNGENER WEBAUFTRITT: VORÜBERLEGUNGEN ..................................................................................................... 67 FRONTPAGE .................................................................................................................................................................. 67 HTML........................................................................................................................................................................... 67 JAVASCRIPT ................................................................................................................................................................... 67 JAVA .............................................................................................................................................................................. 67 CSS ............................................................................................................................................................................... 67 DHTML........................................................................................................................................................................ 67 ASP............................................................................................................................................................................... 67 CGI ............................................................................................................................................................................... 68 BILDERVERZEICHNIS ............................................................................................................................................... 69 VIDEOVERZEICHNIS ................................................................................................................................................. 71 FEEDBACK .................................................................................................................................................................... 71 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 5/71 WebDesign Vorwort Vorteile von WebEditoren WYSIWYG: WYSIWYG ist die Abkürzung für : What You See Is What You Get, das heißt, man sieht am Bildschirm das fertige Resultat und muss also nicht mühsam mit Befehlen die Seiten aufbauen. Ansichten : mehrere Ansichten sind verfügbar : Navigationsansicht, Hyperlinkansicht, Berichte, Ordneransicht und natürlich die Seitenansicht. Diese erleichtern die verschiedenen Arbeitsphasen erheblich. Site-Manager : das Verwalten der HTML-Dateien innerhalb des Websites wird durch viele automatische Funktionen vereinfacht. So werden Links zum Beipiel automatisch aktualisiert, verwaltet, ... Dynamik : man findet viele vorgefertigte Routinen um interaktive Inhalte (JAVA, DHTML, Formularauswertungen, ...) zu erstellen. Vom Anwender werden keine Programmierkenntnisse verlangt. Publizieren : das Publizieren des Websites wird kinderleicht. Ordner und Dateien werden synchronisiert, das heißt nur die neuen oder geänderten Dateien werden übertragen. Die besten modernen Webeditoren sind Dreamweaver von Macromedia, Golive von Adobe oder Frontpage von Microsoft. Die Wahl von FrontPage Ein Vorteil von FrontPage ist zudem die Office Anbindung: FrontPage ist sehr eng an Office angebunden, so dass keine lange Einarbeitungszeit verlangt ist. Benutzer von MSWord werden sofort mit FrontPage arbeiten können. Sie müssen lediglich die zusätzlichen Befehle und Möglichkeiten von FrontPage erlernen. Das Editieren einer Webseite erfolgt jedoch genauso wie in MSWord. Dadurch eignet sich FrontPage vor allem für Anfänger, die gerne schnelle zu einem Resultat kommen. In diesem Kurs werden viele Screenshots zur Arbeit mit FrontPage gezeigt; auch die Videos zeigen den Umgang mit FrontPage. Dabei will ich aber darauf hinweisen, dass dieser Kursus genauso gut mit anderen Editoren erarbeitet und durchgeführt werden kann. Die Wahl für diesen Kurs fiel auf FrontPage wegen seiner Office-Anbindung: kürzeste Einarbeitungszeit und kein neues Umstellen auf eine Programmoberfläche. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 6/71 WebDesign Etappe 1: Vorüberlegungen zum Aufbau eines Websites Das Web ist ein Raum Das Web ist ein Raum, ein virtueller Raum. Viele Ausdrücke deuten auf diesen Vergleich mit der realen Welt hin: wir reden von Datenautobahnen, Bewegungsfreiheit, verlangen klare Pfadangaben, usw. Demnach muss die Navigation im Web auch ähnlich der Orientierungshilfen unserer Alltagswelt funktionieren, das heißt klar und deutlich auf das Ziel hinweisen. Die Ansprüche des Benutzers Folgende Fragen stellt sich ein Benutzer: Wo bin ich? Wo kann ich hingelangen? Wie komme ich dorthin? Wie komme ich an den Ausgangspunkt zurück? Wichtig ist also, sich in die Haut des Benutzers zu versetzen, um einen übersichtlichen Website aufzubauen und dem Benutzer die obengenannten Fragen zu beantworten. Versuchen Sie einige Szenarien von verschiedenen Benutzerprofilen auszudenken, um die Struktur des Sites aufzubauen. 10 Regeln zum gelungenen Webauftritt (von Jennifer Fleming) • • • • • • • • • • leicht verständliche Oberfläche konsistente Navigation (Menüs, ...) Rückmeldungen an den Benutzer Alternativen zur Navigation (graphisch, textuell, ...) klare deutliche Meldungen klare und leichtverständliche Labels Navigation soll sich dem Kontext anpassen und sich darin integrieren Navigation soll dem Inhalt der Website entsprechen Navigation soll den Benutzer schnell zum gewünschten Ziel führen Navigation soll sich den Ansprüchen des Benutzers anpassen Designing for users Beim Erstellen eines Websites besteht die Gefahr, dass man vergisst, sich in die Haut eines unerfahrenen Benutzers zu versetzen. Viele User haben noch Probleme lange URL’s einzutippen, werden durch lange Downloads frustriert, panikieren bei Fehlermeldungen oder wissen nichts mit Cookies oder Site-Zertifikaten anzufangen. Ebenso verhält es sich mit Plugins. Hier sollte man sich vorher genau überlegen, was notwendig ist und was nicht. Es ist wichtig, vor dem Auftritt, den Site von mehreren Personen testen zu lassen. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 7/71 WebDesign Die Architektur des Sites Die Architektur des Websites soll übersichtlich sein, leicht ausbaubar und ohne großen Aufwand aktualisierbar sein. Kategorien Wichtig ist es, die verschiedenen Inhalte in Kategorien zu gruppieren, um einen besseren Überblick zu geben. Verzeichnisse Die Verzeichnisstruktur soll die Gliederung in Kategorien wiedergeben. Sie erlaubt auch nachträglich auf einfache Weise Veränderungen durchzuführen. Grafik und andere Inhalte Wichtig ist hierbei der Unterschied der Darstellung in verschiedenen Browsern zu beachten. Was elegant in dem einen Browser aussieht, kann unübersichtlich in einem anderen Browser aussehen. Hier muss man entscheiden, ob man mehrere Versionen schreibt (je nach Browser), auf einen bestimmten Browser setzt (und andere Benutzer zum Download dieses Browsers auffordert) oder ob man auf Besonderheiten verzichtet. Nicht vergessen: Das Wichtigste bleibt der Inhalt! Hier sieht man ein Beispiel der Browserverteilung und der verschiedenen Betriebssysteme der Benutzer eines Sites (Beispiel vom Site http://www.webhits.de – 25.06.2002) 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 8/71 WebDesign Navigationsstruktur Die Navigation einer Website kann nach einem der untenerwähnten Organisationsmodelle aufgebaut werden. Man kann bei einem größeren Website auch mehrere Modelle mischen, doch ist dies immer mit Vorsicht zu genießen, da der Surfer sonst leicht durcheinandergebracht wird. Die Navigation ist das Skelett, das Gerüst einer Website auf welchem der Inhalt (Text, Grafiken, …) aufbaut. Bei der hierarchischen Navigationsstruktur sind folgende 3 Grundtypen geläufig: Breit und flach Hier hat man schnellen Zugriff auf sämtliche Kategorien der Website. Diese enthalten dann nur wenige Unterkategorien. Man gelangt also schnell zum Ziel, hat aber dort nur wenige Wahlmöglichkeiten. Schmal und tief Auf jeder Ebene gibt es nur wenige Wahlmöglichkeiten. Man muss viele Ebenen durchlaufen um ans Ziel zu kommen. Dieser Typ eignet sich besonders für Informationen, die in verschiedenen Detailstufen angezeigt werden. Breit und tief Bei einer Fülle von Informationen muss man den Website in Teilbereiche aufspalten und sowohl in die Breite als in die Tiefe gehen. Man setzt dann auch bereichsübergreifende Links ein. Die Auswahl der Links muss gut getroffen werden, da man ansonsten riskiert durch die Fülle der Wahlmöglichkeiten den Überblick zu verlieren. Navigationselemente Das Navigationsmodell kann im Webbrowserfenster in Form eines Frames, einer ImageMap, von PulldownMenüs oder als Textlinks dargestellt werden. Die Auswahl hängt vom optischen Bild der Site ab. Wichtig ist, immer parallel mit Textlinks zu arbeiten, da einige ältere Browser keine Grafiken anzeigen und einige Surfer das Anzeigen von Grafiken ausgeschaltet haben (ermöglicht schnelleres Surfen). Externe Navigation Bei Links auf externe Seiten (Seiten außerhalb des eigenen Websites) sollte man, um das Problem der optischen Inkompatibilität zu vermeiden) die Links in einem separaten Browserfenster anzeigen lassen. Der Besucher der eigenen Website erkennt so leicht, dass er einen Website verlässt und in einem neuen navigiert. Er kann also leicht zwischen beiden Fenstern hin- und herwechseln. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 9/71 WebDesign Website-Unterhalt Folgende Grafik illustriert den Prozess des Website-Unterhalts: Man sieht, dass es ein zirkularer Prozess ist. Die Arbeit ist also nicht mit dem Aufstellen eines Sites erledigt, die eigentliche Arbeit fängt damit erst an. Die verschiedenen Prozesse: Information Gathering Zuerst sammelt man Ideen und Konzepte um einen neuen Site zu erstellen. An wen richtet sich der Site? Welche Inhalte soll man dort finden?… Strategy Hier versucht man mögliche auftretende Probleme zu identifizieren. Man schaut sich andere Sites an, sucht nach möglichen technischen Voraussetzungen und Möglichkeiten, definiert sein Konzept, organisiert es und geht mehrere technische und designerische Alternativen durch. Prototyping In dieser Phase erstellt man eine Skizze des Websites und geht einige Szenarien von verschiedenen Besuchern durch, um zu erfahren, ob die Planung ansprechend und benutzerfreundlich ist Hier das Beispiel einer Skizze: 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 10/71 WebDesign http://cours.creuter.lu Implementation Hier erst beginnt man den Website zu erstellen. Man versucht Informationen, Navigation und Design harmonisch miteinander zu verbinden. Launch Der Site wird veröffentlicht und man versucht ihn bekannt zu machen (durch Anmelden bei mehreren Suchmaschinen). Vor der ersten Veröffentlichung sollte man jedoch noch den Site von mehreren Personen testen lassen. Maintenance and Growth Regelmäßige Updates erfrischen den Site. Wie kann ich den Site erweitern, ohne ihn zu überladen? In regelmäßigen Abständen sollte auch ein neues Design erarbeitet werden. Fazit Die 10 wichtigsten Punkte (nach Wilhelm Köhler): • Organisationsstruktur und Navigationsstruktur sind zwei verschiedene Dinge. Organisationsmodelle beschreiben die Aufbereitung und Darstellung der Daten. • Zwinge Inhalt nicht in Kategorien, nur um möglichst viele Wahlmöglichkeiten anbieten zu können. • Jede Seite MUSS Inhalt haben. • Der Weg zum Ziel soll so einfach wie möglich sein. • Stelle den Benutzern keine Hindernisse in den Weg. • Baue auf jeder Page eine Hintertür und einen Notausgang ein. • Berücksichtige verschiedene mögliche Benutzertypen. • Sei flexibel. • Schaffe Platz für Wachstum. • Rechne jederzeit mit Änderungen. Die schlimmsten Fehler (nach Wilhelm Köhler) • Konfusion …wenn schlechte Strukturierung und unlogische Navigation es unmöglich machen, an die gewünschten Informationen zu kommen • Schlechtes Grafikdesign und Layout • …es stören ein Missverhältnis zwischen Text, Grafik und Freiflächen sowie lange Downloadzeiten durch Javaapplets und Grafiken. • Falscher Sprachgebrauch • …der "Ton" muss an die Zielgruppe angepasst sein • Baustellen …jeder weiß heutzutage, dass das Internet dynamisch ist, sich ständig verändert und eine permanente Baustelle ist. Keinen Website freischalten, bevor er noch nicht publikationsfähig ist. • Mangelnde Liebe zum Detail • …einen unprofessionellen und schlampigen Eindruck hinterlassen Rechtschreibfehler, tote Links, HTMLFehler und Ähnliches 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 11/71 WebDesign http://cours.creuter.lu Etappe 2: Skizze hochladen (Upload) Nachdem du aufgrund der vorigen Erklärungen eine Skizze erstellt hast, sollst du diese hochladen. Hier findest du eine kurze Beschreibung, wie du das mit Hilfe von WS-FTP tun kannst. Download von WS-FTP Unter der Adresse http://www.ipswitch.com/ kann man die Software herunterladen. Es gibt eine PRO-Version die kostenpflichtig ist (ungefähr 40US$). Für einfache Zwecke jedoch genügt die kostenlose LIMITED EDITION. Klicke auf DOWNLOAD–EVALUATION SOFTWARE um die kostenlose Version herunterzuladen. Unter PRODUCTS wählst du WS-FTP LE aus. Die Datei ist weniger als 1 MB groß, der Download dauert also nicht lange. Installation Gehe nun in das Verzeichnis, in welches du die Software soeben heruntergeladen hast. Klicke doppelt auf die Ikone damit das Installationsprogramm startet. Wähle bei den folgenden Dialogboxen folgendes aus: Klicke dann auf ACCEPT und das Programm wird installiert. Du findest den Shortcut zum Programm nun unter START-PROGRAMME-WS_FTP Einrichtung Fülle folgende Felder aus: • Profil Name: Irgendein Name für die folgenden Einstellungen (Beispiel: Webdesign) • Host Name/Address: www.creuter.com • Host Type: MICROSOFT NT • User ID: gib hier die User ID, die auf der Webseite dieses Kurses angegeben ist, ein • Password: das Passwort findest du auch auf der Webseite dieses Kurses Wenn du das Passwort nicht jedes Mal neu eingeben willst, klicke noch das Kästchen SAVE PWD an. Klicke nun auf APPLY und OK und alle Angaben sind abgespeichert. Webadresse dieses Kurses: www.creuter.lu 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 12/71 WebDesign http://cours.creuter.lu Das WS-FTP Fenster Wähle das eben erstellte Profil aus und klicke dann auf OK. Ausgewähltes lokales Verzeichnis Laufwerke, Verzeichnisse und Dateien auf deinem PC Ausgewähltes Remote-Verzeichnis Laufwerke, Verzeichnisse und Dateien auf dem Server Du kannst in die Verzeichnisse durch doppeltes Anklicken wechseln. Mit MKDIR (MakeDirectory) erstellst du ein neues Verzeichnis. Mit diesen Buttons kannst du einzelne Dateien oder ganze Verzeichnisse vom PC zum Provider oder vom Provider zum PC übertragen (=Upload oder Download). Es werden immer die markierten Elemente übertragen. Achte immer beim Übertragen von Dateien/Verzeichnissen, dass du dich in den korrekten Verzeichnissen befindest. Diese werden oben im Fenster angezeigt! Lade die Skizze im GIF Format hoch (weiter Erklärungen zu Grafikformaten findest du im Kapitel 4). 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 13/71 WebDesign http://cours.creuter.lu Etappe 3: Umsetzen der Struktur in einem HTML-Editor Nun erfolgt das eigentliche Umsetzen der Vorüberlegungen mit Hilfe eines Webeditors. Hier wird nun die Arbeit mit FrontPage gezeigt. Bildschirm von FrontPage Titelzeile : zeigt den Namen des aktuellen Webs oder der aktuellen Webseite Ansichtenleiste zum Umschalten zwischen den verschiedenen Ansichten Formatsymbolleiste mit den häufigsten Befehlen zum Formatieren von Abschnitten und Text Standardsymbolleiste mit den gängigsten Befehlen Aktuelle Webseite an der gearbeitet wird Register zum Umschalten zwischen Arbeitsansicht, HTML-Ansicht oder Vorschau der aktuellen Seite Statuszeile mit zusätzlichen Informationen, zum Beispiel der Ladezeit der Seite Am Erscheinungsbild des Bildschirmes erkennt man sehr gut die Verwandtschaft mit Office. Die Symbolleisten entsprechen denen von anderen Office-Produkten, wie MSWord. Neues Web anlegen Tipps • Die Videos NAVIGATION.AVI, ORDNERLISTE.AVI, NAVIGATIONSLEISTE.AVI und DESIGN.AVI zeigen den schnellen Aufbau eines Websites mit FrontPage. • Oft sind nicht alle Menüeinträge zu sehen. Am unteren Ende des Menüs sieht man folgendes Zeichen: . Wenn man mit der Maus kurze Zeit darauf verweilt oder darauf klickt, erscheinen alle Menüeinträge. Ein Website besteht aus vielen HTML-Dateien, Bildern, Grafiken, Photos, Videos, Tondateien, ... Alle Dateien zusammen bilden einen Website. FrontPage eignet sich zur Verwaltung von Websites. Bei der ersten Arbeit mit FrontPage legt man also zuerst ein Web an. Dieses Web ist eigentlich ein Ordner auf der Festplatte, in welchem alle Dateien gespeichert werden. Natürlich sollen auch Unterordner darin enthalten sein. Bei der Installation des MS Personal Web-Servers wird ein Webserver auf der Festplatte simuliert. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 14/71 WebDesign Zum Anlegen eines neuen Webs wählt man den Menüeintrag DATEI-NEU-WEB. FrontPagewebs erkennt man an der folgenden Ikone : Um ein Web zu öffnen, wählt man den Menüeintrag DATEI-WEB ÖFFNEN. Hier kann man dann das gewünschte Web aussuchen. Alternativ kann man unter DATEI-ZULETZT GEÖFFNETE WEBS eines der letzten bearbeiteten Webs öffnen. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 15/71 WebDesign http://cours.creuter.lu Website-Vorlagen Verzeichnis auf der Festplatte, wo das neue Web abgespeichert wird Verschiedenen Vorlagen Beschreibung der markierten Vorlage Man kann: • eine vordefinierte Vorlage auswählen. Das Web enthält dann schon einige Seiten mit Text und Bildern (die man leicht ändern kann) • ein leeres Web erstellen, um von Grund auf neu zu beginnen. • mit dem Webimport-Assistenten ein bestehendes Web in ein FrontPage integrieren. Hiermit kann man auch Webs aus dem Internet auf die Festplatte downloaden. Navigation In der zweiten Phase setzt man die oben erworbenen Gedanken am Computer grafisch um. Man öffnet ein neues Web (siehe Kapitel Neues Web anlegen). Nun wählt man die Ansicht NAVIGATION aus dem linken Frame. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 16/71 WebDesign http://cours.creuter.lu Unter ANSICHT-SYMBOLLEISTEN-NAVIGATION kann man sich diese Symbolleiste anzeigen lassen. Dies ist eine Ordneransicht mit allen Dateien aus dem Web In diesem Hauptbereich kann man die Struktur des Websites grafisch aufbauen. Man fügt Seiten hinzu und verlinkt sie durch hin- und herschieben. Hier wählt man die Ansicht NAVIGATION aus Arbeiten in dieser Ansicht: • zuerst fügt man alle Seiten ein: DATEI-NEU-SEITE oder einfach CTRL-N • nun gibt man Bezeichnungen für die Seiten ein: klick auf die erste Seite und drücke die Taste F2; nun gib die Bezeichnung eingeben. Mit der TAB-Taste gelangt man zu allen anderen Seiten. • Man kann Seiten durch Drag And Drop verschieben: Seite anklicken, Maustaste gedrückt halten und verschieben. So kann man den Aufbau nachträglich ändern. • Mit der DEL-Taste kann man markierte Seiten löschen. Hinweise • Die Startseite des Webs erkennt man an diesem Symbol . Sie heißt index.htm, dieser Dateiname sollte nicht geändert werden. Die Bezeichnung Homepage jedoch kann beliebig verändert werden. In einem Web muss solch eine Datei (Startseite) vorhanden sein, da sich alle Links darauf beziehen. • Keine Umlaute oder Sonderzeichen in der Bezeichnung der Seiten eingeben! Das kann beim Upload zu Problemen führen! • Man kann auch bestehende Dateien durch Drag And Drop von der Ordnerliste in die Navigation einfügen. Siehe hierzu das Video NAVIGATION.AVI 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 17/71 WebDesign http://cours.creuter.lu Ordnerliste Nachdem nun die Navigationsstruktur aufgebaut ist, muss man auch die Verzeichnisse strukturieren. Momentan liegen alle Dateien im Hauptverzeichnis. Man sollte jedoch für jede Kategorie ein eigenes Verzeichnis anlegen. So bleibt der Site übersichtlich und leicht aktualisierbar. Hierzu wählt man am besten die Ansicht ORDNER aus dem linken Frame. Hier ist die Ordnerliste: sie stellt die Verzeichnisstruktur des Websites an Hier sieht man den Inhalt des ausgewählten Ordners. Arbeiten in dieser Ansicht: • Ordner erstellt man mit DATEI-NEU-ORDNER. • Die Dateien verschiebt man anschließend durch Drag And Drop in die entsprechenden Ordner. • Ordner und Dateien kann man jederzeit löschen (DEL-Taste drücken) oder umbenennen (F2-Taste drücken). • Mit CTRL-N kann man auch hier jederzeit eine neue Webseite einfügen ...oder... • über DATEI-IMPORTIEREN andere Dateien zum Web hinzufügen. Die Arbeitsweise ist die gleiche wie beim Windows Explorer! Siehe hierzu das Video ORDNERLISTE.AVI Gemeinsame Randbereiche Wir erstellen hier ein typisches Layout einer Webseite: die Seitenaufteilung sieht wie folgt aus: Navigationslei ste mit den Seitenbanner (Überschrift) Inhalt Dazu benutzen wir folgende Arbeitsweise: Öffnen einer Seite des Webs (am besten der Startseite in der Ansicht SEITE) 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 18/71 WebDesign http://cours.creuter.lu Im Menü FORMAT-GEMEINSAME RANDBEREICHE... auswählen. Gemeinsame Randbereiche sind Bereiche einer Webseite die auf allen Seiten des Webs gleich definiert sind; es sind keine Frames (siehe Kapitel Error! Reference source not found.)! Wichtig, damit alle Seiten gleichzeitig verändert werden Hier legt man fest, wo gemeinsame Randbereiche erstellt werden sollen Grafische Vorschau der Randbereicheinstellung Nun erscheint auf der dargestellten Webseite folgender Inhalt: 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 19/71 WebDesign http://cours.creuter.lu Seitenbanner Wir erstellen nun einen Seitenbanner. Klicke auf den Kommentar in der Seite und wähle aus dem Menü EINFÜGENSEITENBANNER. Wähle ob das Seitenbanner als Text oder Bild angezeigt werden soll. Standardmäßig übernimmt Frontpage die Bezeichnung die man zu Beginn der Seite gegeben hat (Inhalt des HTML-Tags TITLE – siehe auch Kapitel HTML) Zentriere das Banner noch auf der Seite. Das Banner wird erst als Bild dargestellt, wenn man ein Design ausgewählt hat (siehe Kapitel Design)! Navigationsschaltflächen Doppelklicke nun auf die Links im linken Randbereich auf der Webseite. Es ist immer gut, wenn man einen Sprung zur Startseite, respektiv zur übergeordneten Ebene mit einbaut. Die Links werden erst als Schaltflächen angezeigt, nachdem man ein Design ausgewählt hat. Siehe hierzu das Video NAVIGATIONSLEISTE.AVI Design Zum Schluss wählen wir nun ein Design aus. Designs sind fertigformatierte Vorlagen, die angeben, wie die Farben, Grafiken, Text, Links, ... auf den Seiten aussehen werden. In der Menüleiste klickt man auf FORMAT-DESIGN. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 20/71 WebDesign http://cours.creuter.lu Vorschau des ausgewählten Designs Soll das Design auf allen Seiten, oder nur der aktuellen Seite angewandt werden? Liste der zur Verfügung stehenden Designs Verschiedene zusätzliche Einstellungen zum Design: • Aktive Grafiken sind Grafiken die sich bei Mausbewegungen ändern • CSS wird in einem eigenen Kapitel behandelt. Es dient zur Seiten- und Textformatierung Design übernehmen Formatierung des Designs ändern Man kann die bestehenden Designs beliebig ändern und als neues Design abspeichern Nun sieht die Startseite zum Beispiel folgendermaßen aus: Mit DATEI-VORSCHAU IN BROWSER... oder durch Klick auf die Ikone in der Symbolleiste kann man sich den eben erstellten Website in einem Browser ansehen. Das Ganze sieht optisch gut aus – und man bedenke: bisher haben wir noch keine Zeile HTML (die Seitengestaltungssprache des WWW) gesehen. Alles wurde von FrontPage selbstständig erstellt. Siehe hierzu das Video DESIGN.AVI 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 21/71 WebDesign http://cours.creuter.lu Nun kommt die eigentliche Arbeit: das Füllen der Seiten mit Inhalten. Zur Erinnerung: Wichtig ist, dass ein Website regelmäßig aktualisiert wird und so stets aktuell bleibt! Verschiedene Ansichten FrontPage bietet zur Arbeit mit einem Web verschiedene Ansichten an, die den verschiedene Arbeitsphasen angepasst sind. • Die Ansicht SEITE eignet sich zum Editieren und Bearbeiten einer einzelnen Webseite. • Die Ansicht ORDNER gibt einen Überblick über die Verzeichnisstruktur des Webs. • Die Ansicht BERICHTE enthält eine Reihe von Informationen zum Site: sie weist zum Beispiel auf zu große Seiten hin (=Seiten die eine lange Ladezeit haben) oder andere Fehler im Website. . • Die Ansicht NAVIGATION dient zur visuellen Darstellung der Webstruktur. • Die Ansicht HYPERLINKS zeigt wie die verschiedenen Seiten miteinander verlinkt sind. • 24.03.2000 In der Ansicht AUFGABEN kann man die noch zu erledigenden Aufgaben auflisten und beim Beenden wieder löschen. Sie dient also der Organisation der Arbeit. [email protected] http://www.creuter.lu Formation Seite 22/71 WebDesign http://cours.creuter.lu Etappe 3: Bilder/Grafiken Bilderformate Im Internet werden vor allem folgende Pixelbilder benutzt: GIF (Graphics Interchange Format), JPG (Joint Photographic Experts Group) und neuerdings PNG (Portable Network Graphic Format). Alle Formate komprimieren ein Bild, so dass die Datei kleiner wird und schneller geladen ist. GIF eignet sich für Grafiken mit reduzierten Farben und Schwarz/Weiß-Vorlagen oder wenn man einen transparenten Hintergrund benötigt. Auch bei Grafiken mit großen einheitliche Farbflächen ist GIF das bessere Format. JPG sollte man zum Anzeigen von Photos oder bei Grafiken mit großer Farbpalette benutzen. JPG erlaubt eine größere Komprimierung als GIF, jedoch ist diese Komprimierung nicht verlustfrei. Hier kann man jedoch keinen transparenten Hintergrund definieren. PNG beinhaltet die Vorteile beider letzten Formate: transparente Hintergründe und starke Komprimierung. Wichtig beim Erstellen von Bildern für das Web sind folgende 3 Punkte: • Größe: das Bild nur in der Größe abspeichern, wie es nachher angezeigt wird. Die Größe sollte man in Pixel anzeigen lassen • Auflösung: Webbilder werden nur am Bildschirm angezeigt. Eine Auflösung von 72-75dpi genügen also vollends. Höhere Auflösungen blähen die Grafikdatei nur unnütz auf. • Farbtiefe: Speichere die Grafik nicht mit mehr Farben ab wie gebraucht werden. Gute Grafikprogramme erlauben das Verändern der Farbtiefe als Vorschau anzusehen. Bilder mit PaintShopPro bearbeiten Grafik vorbereiten Eine Grafik kann man mit Hilfe des Menübefehls IMAGE-RESIZE zuerst in DPIAuflösung und Pixelauflösung anpassen. Hier setzt man die DPI-Auflösung auf 72 dpi (eventuell zuerst ACTUAL/PRINT SIZE anklicken) Nun kann man die Pixelgröße des Bildes angeben 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 23/71 WebDesign Vorsicht: Das Bild wird nicht immer in Originalgröße angezeigt; in diesem Beispiel ist die Darstellung 1:4, also 4 mal kleiner als in Wirklichkeit. Nicht dadurch täuschen lassen! Mit der Lupe kann man zur Originalgröße (1:1) wechseln. Grafik abspeichern Im Menü FILE-EXPORT findet man Optimizer für GIF und JPG Dateien. Diese ermöglichen es, das Bild optimal im Verhältnis Qualität/Dateigröße abzuspeichern. Vorschau des komprimierten Bildes Originalbild Zeigt die Ladezeit der Grafik an Kompressionsstufe Grafiken in FrontPage einfügen Bilder fügt man ein mit EINFÜGEN-BILD-AUS DATEI... oder durch Klick auf in der Symbolleiste. Dies ist die Symbolleiste GRAFIK. Sie ähnelt der von MSWord. Hiermit kann man unter anderem ein Bild als Button erstellen oder absolut im Text positionieren 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 24/71 WebDesign http://cours.creuter.lu Wie in MSWord kann man ein Bild anhand der Ankerpunkte in der Größe verändern. Mit Rechtsklick auf das Bild kann man die Eigenschaften des Bildes ändern (BILDEIGENSCHAFTEN) ... oder man drückt ALT+ ENTER auf der Tastatur. Unter ALTERNATIVE DARSTELLUNGSWEISEN kann man ein Bild mit niedriger Auflösung angeben (Bsp. Schwarz/weiß oder eine niedrigere Auflösung) das als Vorschau dient, bevor das richtige Bild geladen ist. Auch kann man einen Alternativtext eingeben der angezeigt wird, wenn das Bild nicht geladen wird. Thumbnails Eine Thumnail ist eine verkleinerte Vorschau eines Bildes. Wenn man z.Bsp. eine Bildergalerie hat, so zeigt man die Bilder zuerst als Thumbnails an. Die Seite wird schneller geladen. Der User klickt das gewünschte Thumbnail an und erhält dadurch die Ansicht des Originalbildes in Originalgröße. FrontPage erstellt Thumbnails automatisch mit dem dazugehörenden Hyperlink. Man markiert das gewünschte Bild, klickt auf in der Symbolleiste – und fertig. Imagemaps Imagemaps sind Bilder die mehrer Hyperlinks enthalten. Je nach der Stelle wo man das Bild anklickt, gelangt man zu verschiedenen Webseiten. Diese Buttons aus der Grafiksymbolleiste dienen zum Erstellen von Imagemaps. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 25/71 WebDesign http://cours.creuter.lu Mit dem Rechteck, dem Oval und dem Polygon wählt man die Form des Hotspots (Stelle die einen Link enthält) aus. Danach erscheint folgendes Dialogfenster, das schon im Kapitel Links erklärt wurde. Hier gibt man an, an welche Stelle dieser Link verweist. Animated Gifs Eine ANIMATED-GIF Datei ist eine Datei, die eigentlich aus mehreren Bildern besteht, die in festgesetzten Zeitintervallen abgespielt werden. Wie beim Daumenkino entsteht hierbei der Effekt einer Animation. Diese ANIMATED-GIF’s werden in die Seiten eingefügt wie eine normale GIF-Datei. Zum Erstellen einer solchen Datei bedarf es besonderer Funktionen im Grafikprogramm. Allerdings sind diese Funktionen heute in jeder guten Grafiksoftware enthalten. Etappe 4: Text und Links Text eingeben und formatieren Das Eingeben von Text bedarf keiner großen Erklärung. Man findet hierbei fasst die gleich Oberfläche wie in MSWord: FORMATSYMBOLLEISTE, Menüs BEARBEITEN, FORMAT, TABELLE, EINFÜGEN. Man muss also keine HTML-Befehle kennen. Wer aber trotzdem den HTML-Code seiner erstellten Seite ansehen oder ändern will, kann das durch Klick auf das Register HTML unten auf der Seite erreichen. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 26/71 WebDesign Dateien importieren Im Menü EINFÜGEN-DATEI... hat man die Möglichkeit Dateien mit Text, Grafiken, Tabellen ..., die in einem anderen Programm erstellt wurden sofort in eine HTML-Datei einzubinden. Hier sieht man die Vielzahl von Filtern, die in FrontPage integriert sind. Bereits erstellte Texte aus anderen Programmen werden so auf einen Mausklick hin ins Web integriert. Wenn man andere Dateien (wie Videos, Grafiken, ... oder Texte, die nicht in HTML umgewandelt werden sollen) in sein Web integrieren will, so wählt man im Menü DATEI-IMPORTIEREN. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 27/71 WebDesign http://cours.creuter.lu Hier wählt man, ob eine einzelne Datei oder ein kompletter Ordner importiert werden soll AUS EINEM WEB erlaubt es, bestehende HTML-Dateien in das Web zu integrieren oder sogar ganze Websites aus dem WWW auf die Festplatte zu downloaden und dann in FrontPage zu editieren. Man gibt die URL der Website ein und schon startet der WebimportAssistent. Hinweis: • Beim Importieren kopiert FrontPage die Dateien automatisch in das Verzeichnis das für das aktuelle Web angelegt wurde. Alle Dateien müssen innerhalb des Hauptverzeichnisses oder eines Unterverzeichnisses des Webs vorhanden sein, damit sie von FrontPage verwaltet werden können. • Man kann natürlich auch über die Zwischenablage Dateien oder Teile einer Datei in FrontPage einfügen. Siehe hierzu das Video IMPORT.AVI 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 28/71 WebDesign Seiteneigenschaften Durch einen rechten Mausklick auf die HTML-Seite kann man in dem dabei erscheinenden Popupmenü die Eigenschaften der Seite ändern. Register ALLGEMEIN: hier kann man vor allem den Titel (Text der in der Titelzeile des Fensters angezeigt wird) ändern Register HINTERGRUND: zum Festlegen eines Hintergrundes, eines Wasserzeichens oder von Rollovereffekten (Änderungen beim Überfahren eines Links mit der Maus) Register RÄNDER: Festlegen der Seitenränder Register BENUTZERDEFINIERT: hier kann man METATags aus dem Head definieren. Diese werden von Suchmaschinen eingelesen, um die Webseite zu bewerten und zu katalogisieren Register SPRACHE und ARBEITSGRUPPE: Einstellen der Sprache und der Arbeitsaufteilung innerhalb einer Arbeitsgruppe Links Das Web besteht oder lebt durch die Links, das heißt Verweise auf eine andere Seite (im eigenen Site oder extern). In FrontPage kann man Links auf 2 Arten erstellen: 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 29/71 WebDesign http://cours.creuter.lu Man markiert das Element in der Seite. Das kann Text, eine Grafik oder ein anderes Element sein. Dann klickt man oder EINFÜGEN-HYPERLINK oder einfach nur CTRL-K Suche nach der Datei im eigenen Web Textmarken sind Links innerhalb einer Seite; so kann man leicht zu einer bestimmten Stelle im Dokument springen. Vorher muss man jedoch mit EINFÜGEN-TEXTMARKE eine solche Stelle definiert haben Oder URL einer externen Adresse eingeben Link um eine Email an jemanden zu schreiben Benutzt man Frames, so gibt man hier an, in welchem Teilfenster der Link geladen werden soll Man schiebt (Drag And Drop) eine Datei aus der Ordnerliste in die Seite. Dort erscheint ein Text (Inhalt des TITLETags) als Hyperlink. Externe Hyperlinks sollte man immer in einem neuen Fenster ablaufen lassen. Dazu wählt man bei ZIELFRAME das Ziel NEUES FENSTER Siehe hierzu das Video LINKS.AVI 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 30/71 WebDesign Fügt man dem Link-Tag noch das Attribut TITLE hinzu, so ersccheint beim MouseOver ein Tooltip mit dem Textinhalt des TitleTags. Beispiel: <a href=“index.html“ title=“Zurück zur Homepage“> Etappe 5: CSS Was ist CSS? Mit CSS (Cascading Style Sheets) sind endlich (von Textverarbeitungen bereits alltägliche) Formatierungen und Formatvorlagen für das Web möglich. Im Gegensatz zu DHTML (Dynamic HTML) sind die CSS-Formate bei Netscape und Microsoft weitgehend gleich. CSS Formatierungen werden dann interessant, wenn man sie extern von HTML-Dateien in einer besonderen Textdatei auf dem Server abspeichert. Das erspart viel Arbeit und bewahrt die optische Durchgängigkeit des Websites. Diese globale Vorlage enthält nur die Formatierungsanweisungen, also keine HTML-Tags oder andere Elemente. Am besten benutzt man die Endung .css für diese CSS-Datei. Diese Vorlagen werden durch den <link>-Tag in das HTMLDokument eingebunden. Beispiel: <link rel=stylesheet href="/style/vorlage.css" type="text/css"> Dieser <link>-Tag gehört in den HEAD des HTML-Dokumentes. Man kann auch mehrere CSS-Vorlagen in ein HTML-Dokument einbinden (durch mehrere <link>-Tags) oder im HTML-File selbst definieren. Wichtig ist hierbei die Reihenfolge: das neue Style überschreibt immer die ältere Version. Im Dokument selbst fügt man ein Stylesheet im HEAD folgendermaßen ein: Beispiel: <Style type=“text/css“> <!—for older browsers H1 {font-size:12 pt; text-indent: 3 pt} // end --> </style> Hier wird jedes Mal im HTML-Dokument die Überschrift H1 in der Größe 12Punkte formatiert mit einem Einzug von 3 Punkten zum linken Rand. Man kann auch die CSS-Formatdefinitionen nur für bestimmte Tags anwenden. <Style type=“text/css“> <!—for older browsers P.zitat {text-indent: 3 pt} // end --> </style> Dies definiert den Abschnitt P mit Namen ZITAT nach einer bestimmten Art. Diese Formatvorlage wird nun nur bei den Abschnitten angewandt, die als ZITAT definiert sind. <P CLASS=“zitat“>.....</P> während andere mit <P>...</P> definierte Abschnitte die Standardformatierung enthalten. Eine dritte Möglichkeit besteht darin, TAGS im Body zu definieren. Beispiel: <H2 Style=“text-decoration: underline“>....</H2> Einige Stolpersteine gibt es trotzdem bei CSS (davon abgesehen, dass noch nicht jeder Browser CSS unterstützt): Netscape verlangt bei der Zuweisung einer Formatierung einen Doppelpunkt, bei Microsoft kann es Doppelpunkt oder Gleichheitszeichen sein. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 31/71 WebDesign bei der Angabe der Zeichengröße muss man beim Netscape-Browser hinter font-size das Kürzel pt angeben, bei Microsoft kann es ausgelassen werden. Bei der Positionierung von Seitenelementen sind beide Browser weitgehend kompatibel. Mit position und absolut oder relativ kann man genau definieren, wo sich ein Element im Browserfenster befinden soll. Auch Befehle wie hidden oder visible und z-index erlauben einzelne HTML-Elemente erst später auf der Seite erscheinen zu lassen oder zu überlagern, ohne die HTML-Datei neu vom Server laden zu müssen. Beim neuen CSS Version 2, die vom W3C herausgebracht wird, gibt es eigentlich keine revolutionäre Neuerungen, sondern es handelt sich eher um eine Evolution, das heißt es gibt vor allem Verbesserungen und logische Fortführungen des bisherigen Standards. Eine wichtige Neuerung sind die Aural Style Sheets, akustische Formatierungen für sehbehinderte Menschen. Mit CSS 2 können Seitenelemente nun millimetergenau positioniert werden. Das Modell der Medientypen (Beipiel: @media screen oder @media print) erlaubt je nach Medium (Monitor, Drucker, TV, Handheld, ...) verschiedene Formatierungen vorzunehmen. Schriften lassen sich neuerdings auch mit Schatteneffekten versehen (Beispiel: text-shadow: 0.2mm 0.2 mm), ohne mit Grafiken arbeiten zu müssen. Zu bemerken ist allerdings, dass diese neue Spezifikationen von den Browser-Herstellern auch implementiert werden müssen um angewandt zu werden. Filtereffekte mit CSS Microsoft bietet eine Reihe Effektfilter an die in HTML-Tags eingebunden werden können. Diese Filter sind jedoch nur ab MSInternet Explorer 4 aktiv. Netscape ignoriert die Filter. Folgende Filter stehen zur Verfügung: Filtername Effekt Beschreibung filter:Alpha(Parameter) Vordergrund und Hintergrund Sinnvoll für Bilder auf Hintergrundgrafiken, von Bildern verschmelzen arbeitet mit der Deckkraft (Opazität) eines Bilds. filter:Blur(Parameter) Verwischen von Grafiken Wischrichtung und Stärke können angegeben werden filter:Chroma(Parameter) Farbe in einem Bild transparent Schaltet freibestimmbare Farbe in einem Bild machen auf transparent filter:DropShadow(Parameter) Wurfschatten Erzeugt einen Schatten für Text oder Bild, eingestellt werden kann Schattenfarbe und x-/y-Richtung in Pixeln. filter:FlipH() Horizontales Spiegeln Erzeugt ein links-rechts-Spiegelbild der Grafik. filter:FlipV() Vertikales Spiegeln Erzeugt ein oben-unten-Spiegelbild einer Grafik filter:Glow(Parameter) Erzeugt glühenden Rand um Text Eingestellt werden können Glühfor be und -stärke filter:Gray() Graustufenfilter Macht aus einem Farbbild ein Graustufenbild. filter:Invert() Invertiert ein Bild Invertiert Bilder und Grafiken in ihre Komplementärfarben. filter:Mask(Parameter) Transparenzmaske für GIF Ersetzt die Transparenzfarbe in einem GIF-Bild durch eine gewünschte Farbe und alle nichttransparenten Farben durch die Transparenzfarbe f ilter:Shadow(Parameter) Erzeugt verlaufenden Schatten Geeignet für Text und Bild, eingestellt werden Farbe und Richtung filter:Wave(Parameter) Erzeugt wellenartige Störung Verzerrt ein Text- oder Bildobjekt wellenförmig, eingestellt werden können Stärke, Frequenz, Phase, Licht, Mischung mit Original ja/nein 24.03.2000 [email protected] http://www.creuter.lu Formation WebDesign http://cours.creuter.lu filter:Xray() Seite 32/71 Erzeugt Negativbild-Effekt Konvertiert alle Farben eines Bilds in Graustufen und invertiert diese zum Schwarzweißnegativ. Die Filter sind allerdings nicht für alle HTML-Befehle anwendbar, sondern nur für die folgenden: <body>, Filtereffekt auf ganzer Seite <button>, Filtereffekt gilt nur für Schaltfläche <div> oder <span>, Filtereffekt betrifft nur den vom <div>-Container in einer Seite geklammerten Bereich in Verbindung mit den Stylesheet-Angaben width: und/oder height: und/oder position: <img>, Filtereffekt wirkt sich nur auf das Bild aus <input>, Filtereffekt betrifft nur das Eingabefeld <marquee>, Filtereffekt betrifft die Laufschrift <table>, Filtereffekt wirkt sich nur auf Tabelle aus <td>, Filtereffekt betrifft nur die Zelle einer Tabelle <textarea>, Filtereffekt betrifft das mehrzeilige Eingabefeld in einem Formular <tfoot>, Filtereffekt betrifft den Fuß einer Tabelle <th>, Filtereffekt betrifft die Kopfzelle einer Tabelle <thead>, Filtereffekt betrifft den Tabellenkopf <tr>, Filtereffekt betrifft nur die Zeile einer Tabelle Beispiel eines Filters: <div style=“width: 500; filter: Glow(color=#ff0000, strength=12)“><p align=“center“> Hier gl&uuml;ht die Schrift</P></div> CSS in FrontPage In FrontPage arbeitet man mit CSS wie mit Formatvorlagen in MSWord. Im Menü FORMAT-FORMATVORLAGE kann man eigene Vorlagen definieren oder bestehende ändern. Liste aller vordefinierten Vorlagen Vorschau der ausgewählten Vorlage Hier kann man auswählen zwischen den vorgegeben Formatvorlagen (Alle HTML-Tags) oder den eigenen Formatvorlagen (Benutzerdefinierte Vorlagen) Um eine Formatvorlage anzuwenden, markiert man das/die Elemente in der Seite und wählt eine Formatvorlage aus der Dropdownliste in der FORMATSYMBOLLEISTE. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 33/71 WebDesign Siehe hierzu das Video CSS1.AVI 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 34/71 WebDesign http://cours.creuter.lu Vorlagen Alternativ hierzu hat man auch Seitenvorlagen, so wie in Word. Diese beinhalten sofort eine ganze Reihe vorgegebener Formatvorlagen. Dies findet man unter DATEI-NEU-SEITE... Register ALLGEMEIN Wahl zwischen Seitenvorlagen, Framesseiten und Stylesheets Vorschau Liste der Vorlagen Vorsicht: Die Vorlagen überschreiben oft die Einstellungen der gemeinsamen Randbereiche. Man kann auch seine eigenen Seiten als Vorlagen abspeichern: DATEI-SPEICHERN UNTER. Hier wählt man unter Dateityp FRONTPAGE-VORLAGE aus 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 35/71 WebDesign http://cours.creuter.lu Register FRAMESSEITEN Will man Frames benutzen, wählt man hier das passende Layout aus. Natürlich kann es nachträglich noch geändert werden. Diese Trennungslinie zwischen beiden Frames kann man mit der Maus verschieben und so die Größe der Teilfenster verändern. Hier bestimmt man nun welche Seite in welchem Frame angezeigt werden soll. Wenn die Seite noch nicht besteht, klickt man auf NEUE SEITE und erstellt eine, ansonsten lädt man eine bestehende HTML-Seite durch Klick auf STARTSEITE FESTLEGEN... in den Frame. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 36/71 WebDesign http://cours.creuter.lu Register STYLESHEETS Wenn man eine externe CSS-Datei mit Formatvorlagen erstellen will, kann man hier eine aussuchen. Diese speichert man dann in seinem Web unter einem aussagekräftigem Namen ab. Um diese nun in allen Seiten einzubinden wählt man FORMAT-LINKS ZU STYLESHEET. Angeben ob diese Vorlage für alle oder nur die markierte Seite gültig sein soll Verfügbare Vorlagen Siehe hierzu das Video CSS2.AVI CSS mit TopStyle TopStyle ist ein weiteres Programm zum Erstellen von CSS. Das Programm bietet eine grafische Vorschau der erstellten Styles. Es ist erhältlich unter http://www.bradsoft.com/topstyle/index.asp 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 37/71 WebDesign Styles-Definitionen Einstellungsmöglichkeiten der Styles Enthaltene Styles Styles-Vorschau Formulare Immer wenn man ein vorgedrucktes Stück Papier ausfüllt, hat man es mit einem Formular zu tun. Um die Verarbeitung von Informationen zu optimieren, gibt es elektronische Formulare. Am schnellsten ist dabei das Online-Formular: In dem Moment, wo man das fertig ausgefüllte Formular abschickt, ist es schon in der Datenbank des Servers gespeichert und kann sofort bearbeitet werden. In diesem Kapitel geht es nur um die Gestaltung von Formularen, eine Auswertung der Eingaben in einer Datenbank kann man nicht mit HTML erstellen. Hierzu braucht man CGI, Perl, ASP oder Java. Außerdem braucht man zur Auswertung einen dafür vorbereiteten Server. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 38/71 WebDesign http://cours.creuter.lu Abbildung 1: Menüeintrag für Formulare Im Menüpunkt EINFÜGEN-FORMULAR kann man ein Formular erstellen. Man wählt die gewünschten Elemente aus. FrontPage setzt automatisch 2 Buttons hinzu: ABSCHICKEN und ZURÜCKSETZEN. Formularelemente Einzeilige Eingabefelder: input Dies ist ein einzeiliges Formularfeld Der Quellcode lautet: <input type="text" size="20" name="T1"> Folgende input type gibt es: type="text" Zeichenfeld (A-z,0-9,Sonderzeichen) type="int" Ganzzahlen (1000) min=10 max=100 erlauben nur Zahlen zwischen 10 und 100 type="float" Dezimalkommazahlen (1000,24) type="date" Kalenderdatum type="url" Eingabe einer Internet-Adresse Mehrzeilige Eingabefelder: textarea Hier kann man einen längeren Text eingeben Der Quellcode lautet: <textarea name="S1" rows="2" cols="20"> Mit rows und cols werden Zeilenhöhe und Spaltenbreite definiert. Auswahllisten: select Der Quellcode lautet: <select name="Dropdownmenü" size="1"> <option selected >schwarz</option> <option>weiß</option> <option>rot</option> <option>tot</option> </select> 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 39/71 WebDesign Um einen Eintrag schon vorauszuwählen, gibt man das über <option selected> beim Eintrag, der ausgewählt sein soll ein. <select name="Dropdownmenü" size="1" multiple> erlaubt eine Mehrfachauswahl. Radiobutton Der Quellcode lautet: <input type="radio" name="R1" value="V1">schwarz <input type="radio" name="R1" value="V2">weiß <input type="radio" name="R1" value="V3">rot <input type="radio" checked name="R1" value="V4">tot Alle Buttons haben den gleichen Namen: R1. Dadurch erreicht man, dass nur eine Auswahl möglich ist. Um nachher zu erkennen, welcher Wert gewählt wurde, ist die value-Eigenschaft vorgesehen. In der E-Mail erscheint nachher lediglich das Ergebnis als R1=V4, wenn tot gewählt wurde. Checkbuttons Der Quellcode lautet: <input type="checkbox" checked name="C1" value="ON">schwarz <input type="checkbox" checked name="C2" value="ON">weiß <input type="checkbox" name="C3">rot <input type="checkbox" name="C4">tot Hier ist eine Mehrfachauswahl möglich. Ausführungsbuttons Am Ende sollte das Ganze abgeschickt werden. Dafür gibt es Schaltflächen, die den action-Befehl am Anfang des Formulars ausführen. Code: <input type="submit" name="B1" value="Abschicken"> Code: <input type="reset" name="B2" value="Zurücksetzen"> Der Name und Value sind frei zu bezeichnen. Einzeiliges Textfeld : hier kann man einen kurzen Text eingeben Textfeld mit Bildlauf : zum Eingeben von größeren Texten. Wenn der Text nicht mehr in das Feld passt, erscheinen Scrollbalken. Kontrollkästchen : zum Auswählen zwischen mehreren Möglichkeiten (mehrere Auswahlen können getroffen werden) Optionsfeld : im Gegensatz zu den Kontrollkästchen, kann hier nur eine Auswahl getroffen werden. Dropdownmenü : eine Liste von mehreren Einträgen Schaltfläche : Knopf um eine Aktion auszulösen Formular anpassen Durch Doppelklick auf ein Element des Formulars kann man dessen Eigenschaften verändern. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 40/71 WebDesign http://cours.creuter.lu Abbildung 2: Eigenschaften von Formularfeldern Name: Jedes Formularelement sollte einen aussagekräftigen Namen haben Anfangswert : das ist der Standardwert der übernommen wird, wenn der User nichts eingibt. Er kann auch leer sein Die anderen Felder bestimmen die Größe des Elementes, sie ändern von Element zu Element. Beim Dropdownfeld sieht das Eigenschaftsfenster folgendermaßen aus : Abbildung 3: Dropdownmenüeigenschaften Durch Klicken auf HINZUFÜGEN kann man Einträge in die Liste eingeben. Die Aktivierreihenfolge bestimmt, wie die Felder beim Klicken mit der TAB-Taste der Reihe nach ausgewählt werden. Mit EINFÜGEN-FORMULAR-FORMULAREIGENSCHAFTEN kann man die Eigenschaften des Formulars bestimmen. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 41/71 WebDesign Abbildung 4: Formulareigenschaften Bei SENDEN AN kann man unter EMAIL-ADRESSE die Email des Empfängers angeben, dann wird der Inhalt des Formulars per Email verschickt. Auswerten des Formulars <form action="mailto:[email protected]" method="post"> Mit dem TAG <form> wird das Formular geöffnet. Action: Hier wird die Adresse eingegeben, wo das Formular hingesandt werden soll. In unserem Fall wird das Formular mit den Daten an die Emailadresse [email protected] geschickt. Man kann aber auch, wie schon erwähnt, ein CGI-Skript aufrufen oder ähnliches: Besipiel: <form action="../cgi-bin/guestbook.cgi" method="post"> Hier wird das CGI-Skript GUESTBOOK.CGI beim Verschicken des Formulars ausgeführt. Das Skript übernimmt nun die Auswertung des Formulars (Rückmeldung an den User, Speichern der Daten auf dem Server,...) Siehe hierzu das Video FORMULAR.AVI 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu 24.03.2000 Seite 42/71 WebDesign [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 43/71 WebDesign Multimedia Sound Gängige Soundformate für Internet sind: MIDI, MP3, RealAudio, AU. MIDI eignet sich hervorragend für Instrumentalmusik. Allerdings hängt die Wiedergabe sehr stark von der Soundkarte des Besuchers ab. MP3 ist ein neues Format das CD-Qualität bietet bei kleinen Datengrößen. AU ist ein älteres Format, das eigentlich nur bei vertonten JAVA-Applets gebraucht wird. RealAudio ist weit verbreitet und erlaubt (wie auch MP3) Streaming. Beim Streaming wird der Anfang der Datei schon abgespielt, während der Rest noch vom Server nachgeladen wird. So erspart man sich lange Wartezeiten. Beim Benutzen von AudioDateien im Web sollte man folgendes beachten: je kleiner die Datei desto besser. Es gilt also das ideale Verhältnis Qualität/Dateigröße zu finden. Hier 2 Tipps: • Oft benötigt man keinen Stereosound, Mono genügt meistens • Die Samplingrate der Aufnahme muss nicht immer CD-Qualität (44100 HZ) haben MP3 Seit über einem Jahr ist MP3 auf dem Siegeszug im Bereich Audioübertragung im Internet. MP3 als Kurzform für MPEG Layer 3 ist am Fraunhofer-Institut entwickelt worden um Audiodateien fast verlustfrei komprimieren zu können. Es ist also keine verlustfreie Kompression, jedoch ist der Unterschied zwischen einer MP3-Datei und der OriginalCD-Qualität für das menschliche Ohr fast unbemerkbar. MP3 Dateien erreichen also fast CD-Qualität. Im MP3-Format kann man den Inhalt von 10-12 herkömmlichen CD's auf eine einzige CD brennen. (Allerdings sind diese MP3-CD's nicht in einem Standard-Audio-CD-Player abspielbar, man benötigt MP3-Player.) Viele Websites stellen (oft illegal) MP3-Dateien zum Download bereit. Man kann so von einer neuen CD nur einzelne Titel herunterladen, diese zuhause auf CD brennen oder mit einem MP3Player (ähnlich wie sonst der Walkman) anhören. Dadurch gehen der Plattenindustrie viele Einnahmen verloren. Dies erklärt die vielen Diskussionen die momentan zum Thema MP3 bestehen. Zum Abhören von MP3 Dateien braucht man einen MP3Player (Beispiel: WinAmp). Man kann auch anhand eines MP3-Producers selbst aus Wav-Dateien oder direkt von einer AudioCD MP3Dateien erstellen. Mehr und mehr Soundeditoren integrieren einen MP3-Import/Export Filter, so dass man ohne Umwege sofort aus der gewohnten Umgebung MP3-Dateien erstellen kann (Beispiel: CoolEdit von Syntrillium). Video Die häufigsten Videoformate im Internet sind: RealVideo und Quicktime. Beide erlauben Streaming. Videos sind sehr große Dateien. Hier ist es wichtig, die Qualität zu Gunsten der Dateigröße anzupassen. Ein Video das im Internet abgespielt wird, muss nicht im Vollbildmodus mit 25Frames/Sekunde ablaufen. Die meisten Videos laufen in einem kleinen Fenster ab mit einer Bildrate von ungefähr 15 Bildern/Sekunde. Man muss bedenken, dass viele Internetbenutzer noch keine ISDN-Leitung haben. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 44/71 WebDesign RealAudio/Video Vor ungefähr 5 Jahren gründete ein Programmierer von Microsoft die Firma Progressive Networks Inc., die vor kurzem in Real Networks Inc. umbenannt wurde. Diese Firma stellt sich den Problemen der Audio- und Videoübertragung über Internet. Das von ihr benutzte Kompressionsverfahren ist auf dem besten Weg, ein Internetstandard zu werden. Die Übertragung von Audio oder Video ist, wegen der Größe der Dateien, ein Problem: sie erfordert lange Wartezeiten. Mit dem RealAudio oder Real-Videoformat, werden diese Dateien stark komprimiert, werden also viel kleiner und werden so auch schneller übertragen. Zusätzlich müssen die Dateien nicht zuerst ganz heruntergeladen werden, bevor sie abgespielt werden, sondern man kann sich schon den Beginn der Datei anhören/sehen während der Rest noch nachgeladen wird. Dieses Verfahren nennt man STREAMING. Das Streaming verkürzt die Wartezeiten nochmals erheblich. Das Ansehen dieser Dateien setzt voraus, dass man den RealPlayer-Plugin installiert hat. RealAudio/Video Dateien in HTML-Seiten einbetten 1. Mit einem Texteditor, beispielsweise Notepad von Windows, erstellt man eine Datei mit der Endung RPM die als Text die URL der RealAudio/Video-Datei hat Beispiel:http://www.restena.lu/primaire/steinsel/myclip.rm 2. Diese Datei speichert man mit der Extension RPM. Sie ist die RAM-Datei 3. In der Webseite fügt man den Tag <EMBED> hinzu, zusammen mit der RealVideo/Audio URL, der Fenstergröße und den gewünschten Schaltflächen. Beispiel <EMBED WIDTH=176 HEIGHT=132 SRC="myclip.rpm" CONTROLS=ImageWindow CONSOLE=one> 4. Nun lädt man alle Dateien auf den Server EMBED-Einstellungen Um Videos, Ton oder andere multimediale Komponenten einzufügen, braucht man hauptsächlich die beiden Tags EMBED und OBJECT. Da OBJECT jedoch nur vom MS Explorer erkannt wird, wird dieses Tag hier nicht behandelt. Man hat hier vor allem folgende Einstellmöglichkeiten Border = zeigt einen Rahmen oder auch nicht Hidden = es wird nichts angezeigt Autostart = das Plugin startet automatisch Loop = gibt an wie oft die Datei abgespielt werden soll Src = gibt an wo die Datei abgespeichert ist Ein Beispiel: <embed src=movie.avi width=320 height=200 autostart=true loop=3> Mit NOEMBED kann man angeben was ältere Browser anstelle der multimedialen Komponente anzeigen sollen. Ein Beispiel: <embed src=movie.avi width=320 height=200 autostart=true loop=3> <noembed>Neuere Browser zeigen hier ein Video</noembed> Mit den CONTROLS-Parametern kann man die RealPlayer-Controls wie Play/Stop Button usw. anzeigen lassen. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 45/71 WebDesign Beispiel: <EMBED SRC="..." WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton> CONTROLS-Parameter für RealVideo ImageWindow Hier wird das Video abgespielt. All Controls Standardgröße: 375x100 Pixel Einzelne Controls and Sliders ControlPanel Standardgröße: 26x26 Pixel FFCtrl Standardgröße: 26x26 Pixel Standardgröße: 350x36 Pixel RWCtrl Standardgröße: 26x26 Pixel PlayButton Standardgröße: 44x26 Pixel MuteCtrl Standardgröße: 26x26 Pixel PlayOnlyButton Standardgröße: 26x26 Pixel PauseButton Standardgröße: 26x26 Pixel MuteVolume Standardgröße: 26x88 Pixel StopButton 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 46/71 WebDesign http://cours.creuter.lu InfoPanel VolumeSlider Standardgröße: 26x65 Pixel PositionSlider Standardgröße: 300x55 Pixel StatusBar Standardgröße: 120x26 Pixel TACCtrl Standardgröße: 300x30 Pixel StatusField Standardgröße: 370x32 Pixel Standardgröße: 200x30 Pixel HomeCtrl Standardgröße: 45x25 Pixel PositionField InfoVolumePanel Standardgröße: 90x30 Pixel Standardgröße: 325x55 Pixel Parameter Reference Hier ist eine Liste der <EMBED> und <OBJECT> Tag Parameters. Parameters kompatibel mit RealPlayer 5.0 sind in der Kolonne "5.0?" angegeben. Um eine Datei sowohl mit RealPlayer 5.0 als auch mit RealPlayer G2 abzuspielen sollte man nur 5.0-kompatible Parameter benutzen. <EMBED> und <OBJECT> Tag Parameter Parameter Funktion 5.0? Werte AUTOSTART Sets automatic playback. yes true|false no color name or RGB hex value black BACKGROUNDCOLOR Sets background color. Default false CENTER Centers clip in window. no true|false false CONSOLE Links multiple controls. yes name, _master, or _unique (none) CONTROLS Adds RealPlayer controls. yes control name All HEIGHT Sets window or control height. yes percentage or pixels (none) 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 47/71 WebDesign http://cours.creuter.lu LOOP Loops clips indefinitely. no true|false false MAINTAINASPECT Preserves image aspect ratio. no true|false false NOJAVA Prevents JVM start-up. no true|false false NOLABELS Suppresses presentation information. yes true|false false NOLOGO Suppresses RealLogo. no true|false false NUMLOOP Loops clip a given number of times. no any number (none) REGION Ties clip to SMIL region. no SMIL region (none) SHUFFLE Randomizes playback. no true|false false SRC Specifies source clip. yes URL (none) WIDTH Sets window or control width. yes percentage or pixels (none) Hier ein Beispiel einer Integration eines Videos in einer Web-Seite: <EMBED SRC="http://realserver.company.com:8080/ramgen/sample1.rm?embed" WIDTH=176 HEIGHT=128 NOJAVA=true CONTROLS=ImageWindow> <H4>Video 1</H4> <EMBED SRC="http://realserver.company.com:8080/ramgen/sample1.rm?embed" WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton> <EMBED SRC="http://realserver.company.com:8080/ramgen/sample1.rm?embed" WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton> Hierbei erscheint das Videofenster mit einem PLAY- und einem STOP Button. Multimedia als Link Alternativ zum Tag EMBED hat man die Möglichkeit alle multimedialen Inhalte auch einfach als Link (Tag <A>) einzufügen. Dann wird die Datei nicht im Browserfenster abgespielt, sondern es öffnet sich ein externes Windowsfenster das die Datei abspielen kann. Beispiel: <A HREF=“video.mov“>Spielt ein Video ab</A> Multimedia in FrontPage Abbildung 5: Video einfügen oder mit 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 48/71 WebDesign http://cours.creuter.lu Abbildung 6: Plugin einfügen Nun kann man die Eigenschaften einstellen (auch später noch durch Rechtsklick auf das PlugIn-Symbol) Abbildung 7: Plugin Eigenschaften Siehe hierzu das Video EMBED.AVI Flash Das Programm besitzt seine Stärken im Erzeugen von animierten Vektorgrafiken mit der Möglichkeit auf Mausklicks oder Tastatureingaben reagieren zu können. Vektorgrafiken haben gegenüber der Pixelgrafiken wie GIF, JPG, BMP, ... folgende Vorteile: • sie sind kleiner im Dateivolumen • sie werden also schneller geladen • sie lassen sich problemlos rotieren, skalieren Animationen die mit Flash erstellt wurden sind also platzsparend. Flash ist also die Wahl um 2-dimensionale Animationen fürs WEB zu erzeugen. Der große Vorteil ist, dass das FlashPlugin in den meisten Browsern bereits integriert ist. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 49/71 WebDesign http://cours.creuter.lu Dynamik Javascript Javascript und Java deuten durch ihre Namensähnlichkeit auf eine enge Verwandtschaft hin. In Wirklichkeit sind es aber 2 verschiedene Sprachen, zwischen denen keine unmittelbare Beziehung besteht, die aber gewisse Gemeinsamkeiten, etwa in der Syntax aufweisen. JavaScript wurde ursprünglich von der Firma Netscape entwickelt, unter dem Namen LiveScript, und erst in JavaScript umbenannt, als die neue Sprache gemeinsam mit der Firma Sun, Inhaberin des geschützten Namens Java, der Öffentlichkeit vorgestellt wurde. 2 der Hauptunterschiede zwischen JavaScript und Java sind: Javascript Java Quellcode wird auf Client-Side interpretiert wird kompiliert und als Byte-Code zum Client übertragen In HTLM eingebettet außerhalb von HTML als „Applet“ JavaScript erlaubt HTML-Dokumente dynamischer zu gestalten. Es ist damit möglich, neue Fenster erscheinen zu lassen, neue Seiten zu laden oder andere Ereignisse nach dem Laden des HTML-Dokumentes durchzuführen, etwa als Interaktion mit dem Benutzer oder dem Fensterinhalt. JavaScript kann sogar mit Java-Applets interagieren. Syntaktisch erinnert JavaScript an C,C++. Jedoch ist JavaScript eine nichttypisierte Sprache, das heißt Variablen sind nicht durch einen Typ festgelegt. Objekte in JavaScript erinnern mehr an assoziative Arrays von Perl. Neben JavaScript (das wie schon erwähnt von der Firma Netscape programmiert wurde) gibt es auch VBScript (Visual Basic Scripting Edition, von der Firma Microsoft). Beide Sprachen sind sehr ähnlich. VBScript wird allerdings derzeit nur ab Microsoft Internet Explorer 3.0 unterstützt. Netscape Navigator unterstützt momentan und wahrscheinlich auch in Zukunft kein VBScript. Dies hat zur Folge, dass man im Hinblick der Browserunabhängigkeit VBScript nicht zu sehr einsetzen sollte. Einbettung von JavaScript in HTML-Dokumente Das HTML-Tag <Script> dient zum Einfügen von Skripten in HTML-Dokumente. Der Befehl wird mit </Script> geschlossen. Das so eingefügte Skript kann sich im HEAD oder im BODY des Dokumentes befinden. Kurzes Beispiel: <SCRIPT LANGUAGE=“JavaScript“> <!- - for non script browsers //hier kommt nun der Code document.write ("Hallo Welt"); // end of script - - > </SCRIPT> Mit LANGUAGE kann man angeben für welche Version das Programm bestimmt ist (es gibt momentan die Versionen 1.0, 1.1, 1.2 , 1.3 und 1.4) <!-- soll den folgenden Programmcode für ältere Browser verstecken; diese erkennen den Code als Bemerkung und zeigen ihn nicht an (JavaScript wird erst ab Navigator 2.0 und Explorer 3.0 unterstützt) // hier kommt nun der Code deutet darauf hin, dass ein mehrzeiliger Kommentar folgt //end of script--> zeigt, dass der Programmcode hier zu Ende ist 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 50/71 WebDesign Oft wird JavaScript auch nur als kleine Erweiterung von HTML-Tags gebraucht. Das erreicht man mit Events wie onMouseOver onMouseOut onClick ... Hier ein praktisches Anwendungsbeispiel: <A HREF=“index.html“ onMouseOver=“self.status=`Klicke hier`;return true“> Hier wird beim Überfahren des Links mit der Maus der Text „Klicke hier“ unten in der Statuszeile angezeigt. Sehr nützlich ist JavaScript auch bei der Auswertung von Formularen: es erlaubt eine sofortige Korrektur der Angaben, das Ausrechnen von Werten, Rückmeldungen an den Benutzer zu geben usw. Eine ausführliche Beschreibung der Sprache JavaScript in diesem Kurs würde zu weit führen. Vorsicht: Navigator und Explorer interpretieren Variablen und Befehle aus JavaScript manchmal verschieden. Ebenso gibt es Unterschiede zwischen den Versionen eines gleichen Browsers je nach Plattform (UNIX, WINDOWS, MAC). Ein JavaScript-Programm das in einem Browser korrekt abläuft, gibt vielleicht Fehlermeldungen in einem anderen Browser. Es empfiehlt sich, hier unbedingt die Seiten in verschiedenen Browsern zu testen. Aus dem Internet kann man fast zu allen Bereichen Javascripts herunterladen und in die eigene Seite einbinden. Das geht sehr einfach mit COPY/PASTE. Man kopiert das Skript im Internet und fügt es mit PASTE in der Ansicht HTML in der Seite ein. Es gehört sich, den Namen des Autors stehen zu lassen, auch wenn man das Skript leicht umgeändert hat. Workshop:Javascript-Quiz An der folgenden URL finden Sie ein Javascript, das dem User Fragen stellt und diese online auswertet. Versuchen Sie dieses mit eigenen Fragen und Antworten anzupassen. http://javascript.internet.com/miscellaneous/user-quiz.html Dynamic HTML (DHTML) DHTML bietet die Möglichkeit, Seitenelemente pixelgenau zu orientieren und klar zu gliedern. Der Inhalt einer Webseite kann nach dem Herunterladen verändert werden, ohne dass eine neue Verbindung mit dem Server aufgebaut werden muss. Damit ermöglicht DHTML dem Webautor spielerische Effekte und multimediale Anwendung zu erzeugen. DHTML besteht aus drei Teilen: HTML, Cascading Style Sheets (CSS) und verschiedenen Skriptsprachen (wie Javascript, Vbscript, Jscript). HTML definiert die Tags die eine Seite enthält, die Elemente einer Seite. Mit CSS werden diese formatiert und mit Skriptsprachen wird die Dynamik (die Veränderung der Elemente einer Seite bei bestimmten Aktionen) beschrieben. DHTML wird derzeit erst ab den 4er-Versionen der Browser unterstützt, von Netscape Communicator oder dem Microsoft Internet Explorer. Zu erwähnen ist, dass der MSIE 5.x das umfangreichste Objektmodell besitzt, also die meisten Möglichkeiten bietet. Zum Erstellen von DHTML-Webseiten sind Editoren (wegen der Komplexität und der browserspezifischen Befehle - siehe unten) fast unerlässlich. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 51/71 WebDesign Die Probleme von DHTML Auf den ersten Blick scheint DHTML das Paradies für Webdesigner zu sein, aber wer kann das genießen? CSS wird nur von wenigen Browsern unterstützt. Will man seine Web-Site für alle lesbar machen und nicht die Surfer mit älteren Browsern ausschließen, muss man entweder auf die neuen Möglichkeiten (DHTML, CSS, ...) verzichten, oder eine zweite Version für eben diese älteren Browser schreiben, was jedoch doppelten Zeitaufwand erfordert. Andererseits ist DHTML browserabhängig, das heißt die Objektstruktur des Navigator sund Explorers unterscheidet sich. Man muss also auch hier gut aufpassen, damit die Skripte auf beiden Browsern fehlerfrei laufen. FrontPage und DHTML Zuerst markiert man ein Objekt der Seite. Mit FORMAT-DYNAMIC HTML EFFEKTE kann man dann eine Reihe vordefinierter DHTML-Effekte für diese Objekt einfügen Abbildung 8: Menüeintrag DHTML Abbildung 9: DHTML Effekte Hierbei bedeuten : BEI : bei welchem Ereignis soll der Effekt ausgelöst werden ÜBERNEHMEN : welcher Effekt soll aktiviert werden Im dritten Dropdownfeld bestimmt man die Eigenschaften des Effekts. Mit EFFEKT ENTFERNEN kann man den DHTML-Effekt wieder löschen. Seitenübergänge Hierzu wählt man das Menü FROMAT-SEITENÜBERANG. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 52/71 WebDesign http://cours.creuter.lu Abbildung 10: Menüeintrag Seitenübergänge Abbildung 11: Seitenübergänge definieren In diesem Fenster definiert man den Übergangseffekt, bestimmt die Dauer des Effektes und bestimmt, wann der Effekt ablaufen soll (EREIGNIS). Auch fertige DHTML-Skripte gibt es viele zum Download im Internet. Java Java ist eine von SUN Microsystems entwickelte Programmiersprache, die Animation und Interaktion ins WWW bringt. Java macht so aus der Hypertext-Seite eine Bühne, auf der Akteure und Spieler auftreten können und Dinge ablaufen. Der Benutzer ist nicht nur Zuschauer sondern kann aktiv auf das Geschehen eingreifen. Java ist der ausführbare Inhalt einer Webseite. Der Vorteil von Java ist, dass diese Sprache plattformunabhängig ist. Java reserviert im Browser einen Teil des Fensters und läuft darin 24.03.2000 Abbildung 12: Funktionsweise JAVA [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 53/71 WebDesign ab. Die Möglichkeiten die dadurch entstehen sind fast endlos. Zur Zeit allerdings beschränken sich Java-Programme (Java-Applets genannt) noch hauptsächlich auf Spielereien und kleine Tools. Java-Applets werden folgendermaßen in ein HTML-Dokument (im BODY) eingebunden: <Applet Code=“clock.class“ Height=“120“ Width=“200“> <param name =“...“ value=“...“> ... </applet> Hier wird das Java-Applet Clock eingebunden und es reserviert einen Fensterteil der Größe 120x200 um dort abzulaufen. Optional, je nach Applet, muss man weitere Parameter eingeben die das Applet initialisieren. Java-Applets können auch mit Javascript interagieren. Aus dem Internet kann man unzählige Applets herunterladen und dann durch COPY/PASTE im HTML-Code im Register HTML einfügen oder man fügt das Applet im REGISTER NORMAL mit EINFÜGEN-ERWEITERT-JAVA APPLET ein. Abbildung 13: Applets einfügen Man kann dann die Eigenschaften des Applets im folgenden Dialogfenster eingeben. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 54/71 WebDesign http://cours.creuter.lu Abbildung 14: Java-Applet Eigenschaften 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 55/71 WebDesign http://cours.creuter.lu Publizieren Um sein Web zu publizieren, benötigt man einen Provider, der es erlaubt, die Seiten auf seinem Server zu speichern. So sind diese rund um die Uhr für jeden zugänglich. Es gibt eine Vielzahl von Providern mit sehr unterschiedlichen Dienstleistungen. Die Wahl des Providers hängt also von den eigenen Ansprüchen ab. Wichtig bei der Wahl des Providers sind folgende Punkte: • Wie viel kostet der Dienst? • Wie viel Speicherplatz (MB) habe ich zur Verfügung? • Kann ich eigene Skripts benutzen (CGI, ASP, ..)? • Besitzt der Server FrontPage-Extensions? • Habe ich die Möglichkeit eine eigene Domain anzumelden? • Kann ich Datenbanken in mein Web integrieren? • Wie sieht meine URL aus? Ist sie nicht zu lang? Das Publizieren in FrontPage geschieht sehr einfach. Man klickt auf das Ikon zum Publizieren in der Symbolleiste. Abbildung 15: Web veröffentlichen Nun gibt man an, an welcher Adresse die Homepage zu finden ist. Abbildung 16: Dialogfenster zu Web veröffentlichen Bei Servern die keine FrontPage-Erweiterungen installiert haben, erfolgt der Upload durch FTP und nicht HTTP. FrontPage schaltet automatisch um. Zum Schluss gebe ich den Namen und das Kennwort ein. Diese bekomme ich vom Provider mitgeteilt. Abbildung 17: Name und Kennwort eingeben 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 56/71 WebDesign http://cours.creuter.lu Beim Upload synchronisiert FrontPage automatisch das Web auf meiner Festplatte mit dem auf dem Server, das heißt: • Nur die neueren Dateien werden übertragen • Dateien die auf der Festplatte gelöscht wurden, werden (nach einer Rückfrage) auch auf dem Server gelöscht. Weitere Funktionen Abbildung 18: Zusätzliche Komponenten Hier hat man eine ganze Reihe weiterer nützlicher Funktionen die sehr interessant sind und auch keine Programmierkentnisse verlangen. Einige davon verlangen jedoch, dass die FrontPage-Erweiterungen auf dem Server installiert sind. Mit Rechtsklick auf die Eigenschaften im Register NORMAL der SEITENANSICHT kann man die Eigenschaften der Komponenten verändern. Datenbanken Immer häufiger werden Datenbanken im WEB angeboten. Man kann Daten sortieren, suchen, filtern, ... so als ob die Datenbank auf der eigenen Festplatte installiert wäre. Für die Anbieter bietet dies den Vorteil, dass die Webseiten stets aktuell bleiben, ohne jedes Mal die HTMLSeite umschreiben zu müssen. Die WEBseiten werden dynamisch erzeugt aus den Inhalten der Datenbank. Um Datenbanken in sein Web einzufügen, benötigt man entweder Zugriff zum CGI-BIN Verzeichnis oder der Server muss ASP unterstützen. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 57/71 WebDesign Die Datenbank muss als ODBC-Datenquelle vorliegen. ASP (ActiveServerPages) Da Javascript und DHTML nicht von allen Browsern unterstützt wird, muss man bei interaktiven Internetseiten die Programmierung auf den Server verlegen. Mit Microsoft Active Server Pages (ASP) kann man Server-Anwendungen erstellen, die von allen Browsern benutzt werden. ASP ist eigentlich VBScript, das auf Servern abläuft. Der Skript-Code erzeugt HTML-Seiten, wenn diese angefordert werden. Ein Client bekommt niemals den Code zu Gesicht, sondern immer nur die resultierende HTML-Seite, die von jedem Browser gelesen werden kann. Voraussetzung ist allerdings, dass der Server ASP-Skripte ausführen kann; das ist momentan nur auf Windows-Servern der Fall. Reine Unix-Server unterstützen kein ASP. Hier muss man also auf andere Skriptsprachen, wie z.Bsp Perl zugreifen. VBSkript hat den Vorteil, dass es mit Visual Basic erstellt werden kann. Der Programmierer interaktiver Seiten muss also nicht unbedingt eine neue Skript-Sprache erlernen. Einbettung von ASP-Skripten in HTML Dateien Das Skript wird von spitzen Klammern und Prozentzeichen umgeben. <% .... %> Diese Symbole kennzeichnen den Code als Server-Code. Der Code wird also ausgewertet, bevor die Seite an den Browser gesendet wird. Es würde zu weit führen, VBScript hier zu erklären. Im WWW findet man eine Reihe fertiger Skripte die man auch leicht einbetten kann und den eigenen Ansprüchen anpassen kann. Zur Anschaulichkeit hier ein einfaches Skript: <HTML> <Head> <Title>Greeting</Title> </Head> <Body> <% Dim strGreeting If Hour(Now) < 12 Then StrGreeting = "Good morning!" ElseIf Hour(Now) > 11 And Hour(Now) < 18 Then StrGreeting = "Good Afternoon!" ElseIf Hour(Now) > 17 Then StrGreeting = "Good evening!" End If %> <H1><%=strGreeting%></H1> </Body> </HTML> Dieses Skript zeigt je nach Uhrzeit den Text: "Good morning!", "Good afternoon!" oder "Good evening!" Wenn es z.Bsp. 4 Uhr nachmittags ist wird folgende Seite im Browser geladen: <HTML> <Head> <Title>Greeting</Title> </Head> <Body> <H1>Good afternoon</H1> </Body> </HTML> Oft haben von ASP-Skripten erzeugte Seiten die Endung ASP und nicht HTML. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 58/71 WebDesign CGI CGI sind CommonGatewayInteractions, das heißt ausführbare Programme die Interaktivität ermöglichen. Allerdings greifen diese immer auf den Server zu, sind deshalb also langsamer in der Ausführung als DHTML, Javascript oder oft auch Java. Sie müssen auch auf dem Server in einem eigens dafür vorgesehenen Verzeichnis installiert werden, oft im Verzeichnis cgi-bin. Nicht bei jedem Provider hat man Zugang zu diesem Verzeichnis. Ihr Vorteil ist der, dass sie auch mit alten Browsern funktionieren. Perl ist eine häufig genutzte Programmiersprache um solche Skripts zu schreiben. Wie auch bei den vorigen Kapiteln findet man auch hierzu viele Beispiele im WWW. Nur ist die Installation schwieriger. 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 59/71 WebDesign Zehn Tipps zur besseren Performance Wichtig ist, dass eine Website schnell geladen wird. Ansonsten riskiert man seine Besucher zu vergraulen. Eine schnelle Website erfreut außerdem nicht nur den Surfer, sondern entlastet auch den Server. Hier nun 10 Tipps zur Leistungssteigerung: • Grafiken mehrfach nutzen . Lege Grafiken wie Logos, Buttons, ... die in mehreren Seiten vorkommen in ein Verzeichnis und greife immer wieder darauf zurück. So werden die Grafiken beim 2. Aufruf aus dem Cache geladen und der Seitenaufbau geht schneller voran. • Richtige Formate wählen . Benutze GIF bei Grafiken mit weniger Farben und großen Farbflächen. Benutze JPG bei Grafiken (Photos) mit vielen Farbdetails. Speicher die Bilder so, dass beim Laden eine stufenweise Wiedergabe erreicht wird. Dies heißt „Interlaced“ bei GIF-Dateien und „Progressive“ bei JPG-Dateien. Diese partielle Darstellung vermittelt einen subjektiven Geschwindigkeitsgewinn. • JPG-Dateien optimieren . JPG-Dateien lassen sich mit variabler Bildqualität (Komprimierung) speichern. Finde das beste Qualität/Dateigröße-Verhältnis. Von Vorteil sind Grafikprogramme die Optimierungs- und Vorschaufunktionen haben. • GIF-Grafiken richtig einsetzen . GIF-Dateien sind komprimierte Dateien, die keinen Qualitätsverlust aufweisen. Bilder mit vielen Farbdetails oder Farbverläufen lassen sich jedoch fast nicht verkleinern. Man sollte höchsten 256 Farben bei GIF-Dateien benutzen. Oft kann man die Farbpalette noch weiter verkleinern. • GIF-Animationen optimieren . Alle Bilder einer GIF-Animation sollten die gleiche Farbpalette benutzen. Verläuft die Animation nur in einem bestimmten Teilbereich, so müssen die Teilbilder nicht in voller Hintergrundgröße abgespeichert werden, sondern es genügt, nur den Teilbereich abzuspeichern. • Grafiken verkleinern . Benutze Thumbnails um auf größere Bilder hinzuweisen. Benutze eventuell den LOWSRC Zusatz beim IMG Tag um eine schnelle Vorschau des Bildes anzuzeigen. Oft eignet es sich auch große Dateien in mehrere kleine Teile aufzuteilen und dann anhand einer Tabelle wieder zusammenzusetzen. Die einzelnen Dateien werden schneller geladen und können besser komprimiert werden. • Kleine Tabellen verwenden . Tabellen haben den Nachteil, dass der Inhalt erst angezeigt wird, wenn alles geladen wurde. Große Tabellen sollte man deshalb in mehrere kleine Tabellen aufteilen. • Sauberes HTML schreiben . Entferne unnötige Tags, verschachtele HTML-Befehle nicht zu sehr. • Informationen kompakt halten . Teile lange Seiten in mehrer kurze Seiten auf die miteinander verlinkt sind. Das ergibt eine besseren Überblick. Benutze Übersichtsseiten die dem Besucher weiterhelfen, die für ihn nicht interessanten Abschnitte auszulassen. • Navigation optimieren . Die Navigationsstruktur soll das Erforschen des Sites optimal unterstützen. Eine flach Sitestruktur 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 60/71 WebDesign unterstützt das Auffinden von Informationen. Bei großen Sites ist eine Suchfunktion oder ein Inhaltsverzeichnis unumgänglich. 24.03.2000 [email protected] http://www.creuter.lu Formation Seite 61/71 WebDesign http://cours.creuter.lu Anhang HTML-Kurzreferenz Definition des Dokuments Hyper Text Markup Language= Anfang eines HTML Dokuments Kopf=Umschließt die wichtigsten Einstellungen wie Title Titel=Legt den Titel eines Dokuments fest, erscheint später im Bookmark Der Anfang eines Dokuments, ab hier folgt der eigentliche Text <HTML> <Head> <Title> <Body> Textformate und -auszeichnungen <!-Kommentar-> <H1><H2><H3><H4><H5><H6> <p> <br> <Address> <HR> <HR Size=10> <HR SIZE=10 NOSHADE <HR WIDTH=10 <HR ALIGN=left/right> Einfügen einer Kommentarzeile Verschiedene Schriftgrößen , Überschriften Es wird in die nächste Zeile gesprungen, eine Zeile freigelassen Es wird in die nächste Zeile gesprungen Schließt eine Adresse ein Es wird eine Linie über den ganzen Bildschirm gezogen Erzeugt eine dickere Linie Die breite Linie wird ausgefüllt, nicht schattiert Verändert die Breite der Linie Die Ausrichtung von Text/Linie Schriftfarbe, Hintergrund <Body BGCOLOR=FF0000 <Body Background="Graustru.gif"> <U> <Strong> <EM> Verändert die Hintergrundfarbe Es wird ein Hintergrund erstellt, der aus dem Bild Graustru.gif besteht Unterstrichen Fett Kursiv Listen <ul> <li> <ul type=square> <ul type=disc> <ul type=circle> <ol> <ol type=A> <ol type=I> <ol type=i> <ol start=123> <ol type=a> Steht am Anfang einer Liste Muss am Anfang jedes Listenpunktes stehen. Erzeugt eine Liste mit Quadraten Erzeugt eine Liste mit ausgefüllten Kreisen Erzeugt eine Liste mit runden, unausgefüllten Aufzählungszeichen Ein anderer Listentyp Erzeugt eine Liste mit Großbuchstaben Erzeugt eine Liste mit römischen Ziffern Erzeugt eine Liste mit kleinen römischen Ziffern Erzeugt eine Liste, die mit 123 anfängt (124,125,usw.) Erzeugt eine Liste mit Kleinbuchstaben Bilder <img src = „bild.gif"> <img src = „bild.gif" vspace=50> <img src = „bild.gif" hspace=50> <img src = „bild.gif" border=20> <img src = „bild.gif" align=left> <img src = „bild.gif" align=right> <img src = „bild.gif" align=top> <img src = „bild.gif" align=middle> <img src = „bild.gif" align=bottom> 24.03.2000 Image source = Bildquelle, Verweis auf eine Bilddatei Abstand oben und unten zwischen Grafik und Text. Gibt den Abstand zum linken Rand zwischen Grafik und Text an. Zieht einen Rahmen (in Pixel) um das Bild. Positionierung der Grafik nach links. Positionierung der Grafik nach rechts. Positionierung der Grafik nach oben Positionierung der Grafik in die Mitte Positionierung der Grafik nach unten [email protected] http://www.creuter.lu Formation Seite 62/71 WebDesign http://cours.creuter.lu interne Verweise <a href="#ZIEL">VON HIER</a> < a name="#ZIEL" >HIERHIN < /a> Vom Wort VON HIER wird zu Anker ZIEL gesprungen Hier ist das Ziel definiert, hierhin wird gesprungen externe Verweise <a href="http://www.creuter.lu"> < a href="mailto:[email protected]"> < a href="ftp://ftp.microsoft.com">Dateien holen< /a> Springt auf die Webseite von Claude Reuter Der externe Verweis ist eine E-Mailadresse Verweis auf einen ftp-Server Tabellen < table...>...< /table> eröffnet eine Tabelle < table border="1">...< /table> zieht einen Rahmen um die Tabelle < table bgcolor="#FF0000"> ...< /table> Färbt den Hintergrund der Tabelle < table border="1" bordercolor="#FF0000">... < Färbt den Rahmen um die Tabelle /table> < tr>...< /tr> legt eine Zeile in einer Tabelle an < td>...< /td> eröffnet eine Datenzelle in einer Tabelle < th>...< /th> Kopfzeile Bewirkt eine verlängerte Kopfzeile über den anderen Spalten. Die Zahl gibt die < th colspan="2">... < /th> Anzahl der Spalten an. < td rowspan="2">...< /td> Bewirkt eine verbreiterte Zeile vor den anderen Zeilen Farbtabelle Die Farben sind im Hexadezimalsystem angegeben. Sie setzen sich zusammen aus drei Werten: RRGGBB • R steht für den Rotanteil (00 bis FF) • G steht für den Grünanteil (00 bis FF) • B steht für den Blauanteil (00 bis FF) 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 63/71 WebDesign Software HTML-Editoren FrontPage Dreamweaver Cold Fusion Grafikprogramme Fireworks Adobe Photoshop 24.03.2000 http://www.microsoft.com Sehr guter leicht verständlicher HTML-Editor http://www.macromedia.com Gleicher Ansatz wie FrontPage, zeigt seine Stärken vor allem bei der Erstellung von DHTML-Seiten http://www.allaire.com Ebenfalls sehr bekannter und leicht verständlicher HTML-Editor mit WYSIWYG-Funktionen http://www.macromedia.com optimisiert für Webgrafiken (Rollovers, Imagemaps, ...) http://www.adobe.com In der Version 5.5 auch sehr geeignet für Webgrafiken, jedoch sehr teuer [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Corel Draw relativ teuer Gif Animator Effekte Paint Shop Pro Seite 64/71 WebDesign http://www.corel.com Sehr umfangreich, jedoch einige Einarbeitungszeit verlangt und http://www.ulead.com Sehr gute Software zum Erstellen von Animated GIF’s, viele http://www.jasc.com Gutes Programm, auch für Einsteiger Sound/Video/Animations-Programme Cool Edit http://www.syntrillium.com Hervorragendes Programm um Audio-Dateien (AU, WAV, RA, MP3, ...) zu verarbeiten Adobe Premiere http://www.adobe.com Sehr gutes Programm um Videos zu bearbeiten, jedoch sehr teuer Real Producer Quick Time Pro Flash http://www.real.com Gutes, leicht verständliches Programm um Real-Dateien zu erstellen (mitsamt HTML-Code) http://www.quicktime.com Die PRO-Version erlaubt das Umwandeln in das Quicktime Format aus anderen Formaten http://www.macromedia.com DAS Autorenwerkzeug zum Erstellen 2-dimensionaler VektorgrafikAnimatinen 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 65/71 WebDesign Webseiten Vorüberlegungen http://www.useit.com/papers/heuristic/heuristic_list.html http://www.useit.com http://www.usableweb.com HTML http://www.teamone.de/selfhtml MIDI, RealAudio/Video, QuickTime: http://files.midifarm.com//midifiles/ http://www.cs.ruu.nl/pub/MIDI/MIRRORS/SMF/ http://www.eeb.ele.tue.nl/midi/intro.html http://www.cs.ruu.nl/pub/MIDI/ http://www.thefreesite.co./freesounds.htm http://www.donandcarla.com/midiaddons.shtml http://www.real.com/ http://www.apple.com/quicktime/ http://www.microsoft.com/workshop/default.asp http://www.netscape.com/plugins/index.html Grafikoptimierung http://www.gifwizard.com MP3 http://www.heise.de/tp http://www.mp3.com http://www.mp3.de http://www.winamp.com http://www.syntrillium.com http://www.iis.fhg.de/amm/download/mp3enc/ Javascipt http://www.thefreesite.com/freejava.htm http://www.geocities.com/SiliconValley/7116/ http://www.infohiway.com/javascript/indexf.htm http://javasccriptsource.com DHTML Da die folgenden Links auf DHTML-Seiten verweisen, benötigen Sie natürlich den Navigator 4.x oder den MS Internet Explorer 4.x/5.x http://www.dhtmlzone.com http://msdn.microsoft.com/workshop/author/dhtml/ http://Developer.netscape.com/ http://dynamicdrive.com/ http://www.geocities.com/Hollywood/Studio/9349/Titanic.html 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 66/71 WebDesign http://www.htmlguru.com CSS http://www.w3.org/Style/css http://www.webreview.com/guides/style/mastergrid.html http://www.w3.org/pub/WWW/TR/REC-CSS1 http://www.htmlhelp.com/reference/css/ http://msdn.microsoft.com/workshop/author JAVA http://java.sun.com http://www.sun.com http://www.gamelan.com http://www.thefreesite.com http://javaboutique.internet.com/navigation.html CGI • http://www.worldwidemart.com/scripts/ • http://www.perl.com/pace/pub • http://www.perl.org/perl.html • http://www.cgi-resources.com ASP • http://www.asp-zone.com/ • http://www.tripod.com/explore/computers_internet/Programming/ASP/ • http://asp101.aspin.com/index/default.asp 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 67/71 WebDesign Bibliographie Gelungener Webauftritt: Vorüberlegungen • WEB NAVIGATION Designing the User Experience von Jennifer Fleming O’Reilly ISBN 1-56592-351-0 • Information Architecture for the WWW von L. Roenfeld, P. Morville O'Reilly ISBN 1-56592-282-4 FrontPage • Das große FrontPage 2000 Buch von Dr. Joachim Paul Data Becker ISBN 3-8158-1368-9 HTML • HTML The Definite Guide Von Chuck Musciano & Bill Kennedy O’Reilly ISBN 1-56592-235-2 Javascript • Javascript Das umfassende Referenzwerk Von David Flanagan O’Reilly ISBN 3-930673-56-8 Java • Java in a Nutshell von David Flanagan O‘Reilly ISBN 1-56592-183-6 CSS • Cascading Style Sheets von Hakon Wium Lie/Bert Bos Addison-Wesley ISBN 3 8273 1257 4 DHTML • Dynamic HTML von Dany Goodman O'Reilly ISBN 1-56592-494-0 ASP • Microsoft Active Server Pages von Jörg Krause Addison Wesley ISBN 3-8273-1427-5 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu • CGI • Seite 68/71 WebDesign Active Server Pages-Programmierung von Scott Hilier, Dan Mezick Microsoft Press ISBN 3-86063-449-6 Einführung in Perl von Randal L. Schwartz O‘Reilly ISBN 3-930673-08-8 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 69/71 WebDesign Bilderverzeichnis ABBILDUNG 1: BROWSERSTATISTIK................................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 2: SYSTEMSTATISTIK ................................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 4: WEBSITE-UNTERHALT ............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 5: SKIZZE EINES WEBSITES .......................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 6: FENSTER VON FRONTPAGE ...................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 10: ZULETZT GEÖFFNETE WEBS ......................................................................................................... 14 ABBILDUNG 12: ANSICHT NAVIGATION ........................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 13: ORDNERANSICHT ................................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 15: GEMEINSAME RANDBEREICHE ............................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 16: WEBSEITE MIT GEMEINSAMEN RANDBEREICHEN ................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 17: SEITENBANNER ...................................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 18: NAVIGATIONSLEISTENEIGENSCHAFTEN ................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 19: DESIGN AUSWÄHLEN ............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 20: DESIGN BEARBEITEN .............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 21: BEISPIEL EINES DESIGNS ........................................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 23: ANSICHT BERICHTE ............................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 24: ANSICHT HYPERLINKS ........................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 25: ANSICHT AUFGABEN ............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 26: FRAMES UND TARGETS .......................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 27: REGISTER ZUR SEITENBEARBEITUNG ..................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 28: MENÜBEFEHL DATEI EINFÜGEN ............................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 29: DATEIFORMATE ZUM EINFÜGEN ............................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 30: DIALOGFENSTER DATEI IMPORTIEREN ................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 31: WEBIMPORT-ASSISTENT ........................................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 32: MENÜEINTRAG SEITENEINSTELLUNGEN ................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 34: CSS-VORLAGE DEFINIEREN ................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 35: CSS-FORMATVORLAGEN ....................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 36: SEITENVORLAGEN .................................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 37: SEITENVORLAGE ABSPEICHERN ............................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 38: VORLAGEN VON FRAMESSEITEN ............................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 39: FRAMESEITE ERSTELLEN ........................................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 40: MENÜ STYLESHEETS .............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 41: EXTERNE STYLESHEETS ......................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 42: HYPERLINKS ERSTELLEN........................................................ ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 43: LINKS IN FRAMES................................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 48: GRAFIKSYMBOLLEISTE .......................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 49: GRAFIK POPUPMENÜ.............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 50: BILDEIGENSCHAFTEN............................................................. ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 51: SYMBOLLEISTE HOTSPOTS ..................................................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 52: HYPERLINK ERSTELLEN BEI IMAGEMAPS ............................... ERROR! BOOKMARK NOT DEFINED. ABBILDUNG 53: VIDEO EINFÜGEN ......................................................................................................................... 47 ABBILDUNG 54: PLUGIN EINFÜGEN ........................................................................................................................ 48 ABBILDUNG 55: PLUGIN EIGENSCHAFTEN ............................................................................................................. 48 ABBILDUNG 56: MENÜEINTRAG DHTML.............................................................................................................. 51 ABBILDUNG 57: DHTML EFFEKTE ....................................................................................................................... 51 ABBILDUNG 58: MENÜEINTRAG SEITENÜBERGÄNGE ............................................................................................. 52 ABBILDUNG 59: SEITENÜBERGÄNGE DEFINIEREN .................................................................................................. 52 ABBILDUNG 61: APPLETS EINFÜGEN ...................................................................................................................... 53 ABBILDUNG 62: JAVA-APPLET EIGENSCHAFTEN ................................................................................................... 54 ABBILDUNG 63: WEB VERÖFFENTLICHEN .............................................................................................................. 55 ABBILDUNG 64: DIALOGFENSTER ZU WEB VERÖFFENTLICHEN.............................................................................. 55 ABBILDUNG 65: NAME UND KENNWORT EINGEBEN ............................................................................................... 55 ABBILDUNG 66: ZUSÄTZLICHE KOMPONENTEN ..................................................................................................... 56 24.03.2000 [email protected] http://www.creuter.lu Formation http://cours.creuter.lu 24.03.2000 Seite 70/71 WebDesign [email protected] http://www.creuter.lu Formation http://cours.creuter.lu Seite 71/71 WebDesign Videoverzeichnis NAVIGATION.AVI NAVIGATIONSLEISTE.AVI erstellt ORDNERLISTE.AVI erstellt DESIGN.AVI WORDIMPORT.AVI CSS1 CSS2 LINKS.AVI FORMULAR.AVI EMBED.AVI HTML einbindet zeigt, wie man eine Websitestruktur grafisch erstellt zeigt, wie man eine Navigationsleiste mit FrontPage zeigt, wie man die Ordnerstruktur des Websites zeigt, wie man das Web formatiert zeigt, wie man WORD-Dateien in FrontPage einfügt zeigt, wie man mit Style Sheet Vorlagen arbeitet zeigt das Erstellen externer Style Sheet Vorlagen zeigt, wie man Links in FrontPage einfügt zeigt, wie man ein Formular erstellt zeigt, wie man multimediale Komponenten in Feedback Dieses Manual soll helfen beim Einstieg als Webdesigner mit FrontPage. Um es zu verbessern oder besser den Bedürfnissen anzupassen, ist es wichtig Kritiken dazu zu erhalten: • was könnte besser sein? • was wurde nicht genug oder undeutlich erläutert? • was fehlt noch? • was sollte beibehalten werden? • ... Ich bin froh über jede Rückmeldung. Bitte schicken sie diese an: [email protected] Vielen Dank 24.03.2000 [email protected] http://www.creuter.lu
