Claude Reuter

Transkript

1 Claude Reuter

2 Formation Seite 2/33 VORWORT... 3 VORTEILE VON WEBEDITOREN... 3 DIE WAHL VON NVU... 3 NVU HERUNTERLADEN... 4 FILEZILLA HERUNTERLADEN... 4 BILDSCHIRM VON NVU... 5 NEUES WEB ANLEGEN... 5 STARTSEITE ERSTELLEN... 6 ORDNERLISTE... 7 ORDNERSTRUKTUR AUF DEN SERVER LADEN... 8 VORLAGEN ODER TEMPLATES VERSCHIEDENE ANSICHTEN BILDER/GRAFIKEN BILDFORMATE BILDER MIT GIMP BEARBEITEN Was ist GIMP? Grafik vorbereiten Grafik abspeichern GRAFIKEN IN NVU EINFÜGEN Imagemaps ANIMATED GIFS TEXT UND LINKS TEXT EINGEBEN UND FORMATIEREN SEITENEIGENSCHAFTEN LINKS CSS WAS IST CSS? Filtereffekte mit CSS CSS IN NVU STYLESHEETS verknüpfen TABELLEN FORMULARE FORMULARELEMENTE MULTIMEDIA EINFÜGEN EMBED-Einstellungen MULTIMEDIA ALS LINK PUBLIZIEREN NVU TASTATURKÜRZEL NVU-SPEZIFISCHE TASTATURKÜRZEL ALLGEMEINE NVU-TASTATURKÜRZEL ANHANG HTML-KURZREFERENZ Definition des Dokuments Textformate und -auszeichnungen Schriftfarbe, Hintergrund Listen Bilder interne Verweise externe Verweise Tabellen FARBTABELLE SOFTWARE HTML-Editoren FTP-Programm WEB-Browser Grafikprogramme Sound/Video/Animations-Programme... 33

3 Formation Seite 3/33 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. Eine sehr gute gratis Alternative ist NVU, eine OpenSource Software zu finden unter Die Wahl von NVU Ein Vorteil von NVU ist, dass dieser Webeditor gratis aus dem Internet erhältlich ist und plattformübergreifend ist, das heißt es gibt eine Version für Windows, MAC, und Linux. So kann man sofort mit der Arbeit beginnen nachdem man die Software unter herunter geladen hat. Zum Upload der Dateien empfehle ich FILEZILLA, zu finden unter ebenfalls OpenSource-Software. In diesem Kurs werden viele Screenshots zur Arbeit mit NVU gezeigt; auch die Videos zeigen den Umgang mit NVU und FILEZILLA. Dabei will ich aber darauf hinweisen, dass dieser Kursus genauso gut mit anderen Editoren erarbeitet und durchgeführt werden kann. NVU hat momentan jedoch 2 große Nachteile gegenüber Frontpage, Dreamweaver,...: o der Sitemanager aktualisiert nicht die Links in allen bestehenden HTML-Dateien automatisch nach dem Umbenennen oder Verschieben einer Datei o beim Publizieren können nur einzelne Dateien auf den Server kopiert werden. Man kann auch keine Verzeichnisse innerhalb NVU auf dem Server erstellen. So ist der Gebrauch eines weiteren FTP- Programmes (zum Beispiel FILEZILLA) noch unabdinglich. Da NVU aber erst in der Version 1 vorliegt und noch weiter an diesem Projekt gearbeitet wird, ist es möglich, dass diese fehlenden Funktionen in Zukunft hinzugefügt werden.

4 Formation Seite 4/33 NVU herunterladen Gehe zur Webseite Wähle dort Downloads aus. Nun suchst du auf dieser Seite die Version für dein Betriebssystem aus. Nach dem Herunterladen der Datei startest du den Installer und NVU wird auf deinem Computer installiert. Es erscheint (je nach Installation) das folgende Symbol auf dem Desktop. Durch Doppelklicken auf das Symbol startest du den Webeditor. FILEZILLA herunterladen Zum späteren Uploaden des Websites empfehle ich die OpenSource-Software Filezilla. Gehe zu und wähle dort DOWNLOAD im linken Menü. Wähle nun eine Distribution aus zum Downloaden und installiere das Programmm auf deinem Computer (du kannst alle eingestellten Vorgaben übernehmen). Starte das Programm durch Doppelklick auf die entsprechende Ikone auf dem Desktop.

5 Formation Seite 5/33 Bildschirm von NVU Titelzeile: zeigt den Dateinamen der momentan bearbeitenden Datei an und enthält die Standardikons zum Verkleinern, Vergrößern und Schließen des Programmfensters. Symbolleisten mit den häufig benutzten Befehlen Menüzeile mit allen verfügbaren Befehlen Site Manager zum Verwalten aller Dateien eines Websites editierbare HTML-Datei Register zum Wechseln der Ansichten Statuszeile mit verschiedenen Informationen zu den durchgeführten Aktionen Neues Web anlegen Ein Website besteht aus vielen HTML-Dateien, Bildern, Grafiken, Photos, Videos, Tondateien,... Alle Dateien zusammen bilden einen Website. NVU eignet sich zur Verwaltung von Websites. Bei der ersten Arbeit mit NVU 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. Zum Anlegen eines neuen Webs wählt man den Menüeintrag EDIT-PUBLISHING SITE SETTINGS oder im linken Fenster EDIT SITES.

6 Formation Seite 6/33 Daraufhin erscheint folgendes Dialogfenster: Names des Sites Bereits vorhandene Sites URL des Sites Speicherort auf dem Computer Speichern der Einstellungen Hier gibst du nun die Einstellungen an, wo der Website auf deinem Computer abgespeichert wird. In diesem Beispiel werden alle Dateien im Ordner web0 auf der Festplatte C: abgespeichert. Nun erstellst du auch noch einen Site mit den Einstellungen des Servers: Die Angaben zum PUBLISHING SERVER hast du bereits per erhalten oder findest sie unter nach korrektem Login im Bereich WEBDESIGN unter dem Menüeintrag SETTINGS. Diese Einstellungen dienen nachher dazu, die erstellten Seiten mit der Ikone auf den Server zuübertragen. Startseite erstellen Wir erstellen nun die Startseite unseres Webs. Sie soll index.htm oder index.html benannt werden. Der Inhalt ist noch nicht so wichtig. Nachdem du auf klickst wirst du aufgefordert eine Titel für diese Seite einzugeben. Dies ist der Text, der oben in der Titelzeile des Browserfensters erscheint.

7 Formation Seite 7/33 In dem folgenden Dialogfenster gibst du den Dateinamen dieser HTML-Seite an. Gib als Dateinamen hier index.htm oder index.html ein. Im NVU SITE MANAGER erscheint nun diese Startseite. Ist die Datei nicht zu sehen, musst du eventuell auf das Ikon vor dem Sitenamen klicken oder auf die Ikone. Ordnerliste Nachdem nun die Startseite besteht, erstellen wir nun die Verzeichnisstruktur des Sites, damit nicht alle Dateien in einem Verzeichnis abgespeichert werden, sondern den Themen nach in verschiedenen Ordnern sortiert sind. Man soll also für jede Kategorie ein eigenes Verzeichnis anlegen. So bleibt der Site übersichtlich und leicht aktualisierbar. Hierzu wählt man das NEUE ORDNER Symbol im NVU SITE MANAGER.

8 Formation Seite 8/33 Dann gibt man den Ordnernamen ein und speichert ihn ab. Auch dieser neu erstellte Ordner erschein nun im NVU SITE MANAGER. Auf die gleiche Art und Weise gehe ich nun auch für die anderen Ordner meiner Webstruktur vor. In jedem Ordner speichere ich eine Datei mit dem Name index.htm oder index.html ab. WICHTIG: Alle Ordnernamen und Dateinamen sollen keine Umlaute oder andere Sonderzeichen außer _, - oderr Leerzeichen enthalten. Am besten auch alle Namen in Kleinbuchstaben abspeichern. Ordnerstruktur auf den Server laden Da NVU keine Verzeichnisse auf dem Server erstellen kann, muss man dies mit einem anderen FTP-Programm erledigen. Ich zeige hier, wie man das mit FILEZILLA durchführen kann. Zuerst musst du die Einstellungen für den FTP-Server eingeben. Diese sind die gleichen wie schon beim PUBLISHING SERVER in NVU. Wähle hierzu FILE-SITE MANAGER. Klicke dann auf NEW SITE und trage deine Angaben ein.

9 Formation Seite 9/33 Mit SAVE AND EXIT speicherst du diese Einstellungen. Um von nun an eine Verbindung mit dem FTP-Server zu erstellen wählst du folgendes aus: Nach dem Herstellen der Verbindung siehst du folgendes Fenster: Zeigt die ausgeführten FTP-Befehle an Hier sind die Verzeichnisse und Dateien deines Computers Hier sind die Verzeichnisse und Dateien auf dem Webserver Wechsle nun in das Verzeichniss, in welchem dein Site auf deinem Computer gespeichert ist. Um eine Datei, ein Verzeichniss oder mehrere Elemente hochzuladen, wählst du diese erst aus und führst dann einen Doppelklick auf der Auswahl aus.

10 Formation Seite 10/33 ein Doppelklick auf die Auswahl lädt die markierten Elemente auf den Server. Ebenso kann man vom Server Ebenso kannst du markierte Elemente lokal oder auf dem Server löschen. Drücke dazu die ENTF-Taste auf der Tastatur. Vorlagen oder Templates Wir möchten unserem Website ein typisches Layout vergeben: die Seitenaufteilung sieht wie folgt aus: Seitenbanner (Überschrift) Navigationsleiste mit den Buttons Inhalt Mit NVU kann man auch Templates erstellen und diese als Vorlage für alle neuen Seiten benutzen. Dazu wählt man das Menü FILE-NEW und dort BLANK TEMPLATE und klickt dann auf CREATE. Diese Eigenschaft werden wir jedoch erst später benutzen, nachdem wir bereits gesehen haben wie man Text, Tabellen und Grafiken einfügt.

11 Formation Seite 11/33 Verschiedene Ansichten NVU bietet mehrer Ansichten an. Unten im Fenster kannst du auswählen zwischen o o o o NORMAL: ähnelt der PREVIEW Ansicht, doch es werden Tabellenränder angezeigt und Anker hervorgehoben. HTMLS TAGS: eignet sich um die Seitengestaltungssprache HTML kennenzulernen. Die HTML-Tags zu den Elementen werden in gelben Kästchen angezeigt. <HTML> SOURCE: Zeigt den eigentlichen HTML-Source Code der aktuellen Seite PREVIEW: ist die eigentliche Vorschau wie die Seite später in einem Browser zu sehen sein wird. Bilder/Grafiken Bildformate 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 GIMP bearbeiten Was ist GIMP? GIMP ist ebenfalls ein OpenSource-Programm, also gratis über Internet erhältlich. Lade es herunter unter

12 Formation Seite 12/33 Wähle die passende Datei aus und installiere sie auf deinem Computer. Starte die Software indem du auf die Ikone klickst. Das Programm erstellt beim ersten Start einige Verzeichnisse. Klicke auf WEITER bis das Programm gestartet ist. Grafik vorbereiten In diesem Kurs geht es nicht darum, diese Grafiksoftware zu erlernen. Ich werde nur einige nützliche Funktionen zum Webdesign hervorheben. Klicke im Menü auf DATEI-ÖFFNEN um eine vorhandene Grafik zu bearbeiten. Im folgenden Dialogfenster suchst du nach der Grafik die bearbeitet werden soll. Eine Grafik kann man mit Hilfe des Menübefehls BILD-BILD SKALIEREN zuerst in DPI-Auflösung und Pixelauflösung anpassen.

13 Formation Seite 13/33 Ändere hier die Pixelgröße und hier die Auflösung in DPI, kann auf 72 gesetzt werden für Webgrafiken Vorsicht: Das Bild wird nicht immer in Originalgröße angezeigt; in diesem Beispiel ist die Darstellung 1:1, also genau so groß wie in Wirklichkeit. Nicht dadurch täuschen lassen! Am besten immer in der Ansicht 1:1 anschauen, um zu sehen, wie groß das Bild nun in Wirklichkeit ist. Grafik abspeichern Im Menü DATEI-SPEICHERN kann man die veränderte Grafik abspeichern.

14 Formation Seite 14/33 Dateinamen eingeben Wähle hier das Verzeichnis des Websites aus. Immer Grafiken innerhalb dieses Verzeichnisses auf der Festplatte abspeichern. Es erscheint dann ein Dialogfenster, in welchem du die Qualität der Grafik einstellen kannst. Du kannst dir auch eine Vorschau anzeigen lassen. Grafiken in NVU einfügen Bilder fügt man ein mit INSERT-IMAGE ein oder über die Ikone oder indem man die Datei aus dem SITE MANAGER auf die HTML-SEITE verschiebt. 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 (IMAGE PROPERTIES).

15 Formation Seite 15/33 Interessant ist hier die Einstellung unter APPEARANCE und dann ALIGN TEXT TO IMAGE, wo man eine Textfluss um das Bild definieren kann. Imagemaps Imagemaps sind Bilder die mehrer Hyperlinks enthalten. Je nach der Stelle wo man das Bild anklickt, gelangt man zu verschiedenen Webseiten. Auch solche Imagemaps kann man mit GIMP erstellen über das Menü FILTER-WEB-IMAGE MAP.

16 Formation Seite 16/33 Daraufhin erscheint folgendes Fenster wo man die Imagemap erstellen kann. Nach dem Speichern erstellt GIMP den passenden HTML-Code den man dann durch COPY und PASTE in NVU im HTML-Code einfügen kann. 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, auch in GIMP (siehe hierzu unter

17 Formation Seite 17/33 Text und Links Text eingeben und formatieren Das Eingeben von Text bedarf keiner großen Erklärung. Man findet die Formatierungsmöglichkeiten im Menü FORMAT oder in der Toolbar: 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> SOURCE unten auf der Seite erreichen. Seiteneigenschaften Über FORMAT-PAGE COLORS AND BACKGROUND und PAGE-TITLE AND PROPERTIES kann man die Eigenschaften der HTML-Seite verändern. Hier kann man vor allem den Titel (Text der in der Titelzeile des Fensters angezeigt wird) ändern.

18 Formation Seite 18/33 Links Das Web besteht oder lebt durch die Links, das heißt Verweise auf eine andere Seite (im eigenen Site oder extern). Um einen Link zu erstellen, markiert man den gewünschten Text oder die Grafik und klickt dann auf die Ikone oder wählt im Menü INSERT-LINK. Es erscheint das folgende Fenster wo man den Link angibt. Entweder man tippt eine URL hinein oder klickt auf CHOOSE FILE um nach einer anderen Datei innerhalb des Sites zu suchen. Externe Hyperlinks sollte man immer in einem neuen Fenster ablaufen lassen. Um dies zu erreichen markierst du den Link und wählst die Ansicht <HTML> SOURCE. Füge nun innerhalb des <a...>-tags hinzu: target= _blank Fügt man dem Link-Tag noch das Attribut TITLE hinzu, so erscheint beim MouseOver ein Tooltip mit dem Textinhalt des TitleTags. Oft klickt man auch einen Link an und das -Programm startet. Es wird also nicht eine neue Webseite angezeigt, sondern man kann eine verschicken. Solche Links erstellst du indem du anstatt einer Seite die -Adresse als Link angibst. Vergiss nicht vor die -Adresse mailto: zu schreiben!

19 Formation Seite 19/33 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 HTML-Dokument 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. 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

20 Formation Seite 20/33 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 3, 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 3 können Seitenelemente nun millimetergenau positioniert werden. Das Modell der Medientypen screen 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 von Bildern verschmelzen Sinnvoll für Bilder auf Hintergrundgrafiken, 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 machen - filter:dropshadow(parameter) Wurfschatten Schaltet freibestimmbare Farbe in einem Bild auf transparent 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 filter:xray() 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

21 Formation Seite 21/33 <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üht die Schrift</P></div> CSS in NVU In NVU ist ein CSS-Editor mit dabei. Man startet ihn über TOOLS-CSS EDITOR. Daraufhin erscheint folgendes Fenster: Wähle nun STYLE ELT.

22 Formation Seite 22/33 Dann wählst du CREATE STYLESHEET und danach EXPORT STYLESHEET... damit diese Vorlage extern abgespeichert wird und mit jeder Seite verknüpft werden kann. Nun wähle RULE. Gib nun in der Textbox den Namen des HTML-Tags an und wähle eine Formatierungsart. Her wurde als Style <p> ausgewählt, das heißt der Absatztag. Nun kann ich alle Formatierungszeichen für diesen Tag definieren. STYLESHEETS verknüpfen Wenn man eine externe CSS-Datei mit Formatvorlagen erstellt hat, so verknüpft man diese folgendermaßen mit einer Datei. Öffne die Webseite, gehe wieder unter TOOLS-CSS EDITOR und wähle dort LINK ELT. und dann CHOOSE FILE. Suche nun den Speicherort der externen Stylesheetdatei.

23 Formation Seite 23/33 Tabellen Tabelle fügt man ein unter INSERT-TABLE oder mit der Ikone Dann wählst du die Größe der Tabelle. Über FORMAT-TABLE oder durch Rechtsklick auf die Tabelle oder eine Spalte/Zeile/Zelle kann man die Eigenschaften und das Aussehen (Rahmen, Hintergrundfarbe,...) der Tabelle verändern. Anmerkung: Tabellengrößen werden in Prozent oder in Pixeln angegebn. Die Pixelgröße ist eine feste Größe, unabhängig von der Bildschirmauflösung, die prozentuale Angabe ist relativ, kann also je nach Bildschirmauflösung ändern. 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 dieser Lektion 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. Im Menüpunkt INSERT-FORM oder über die Ikone findet man alle Elemente zu Aufbau eines Formulars. Zuerst erstellt man das Formular mit INSERT FORM-DEFINE FORM

24 Formation Seite 24/33 Dann gibt man die Eigenschaften dieses Formulars an. o o o o Der FORM NAME ist frei wählbar. ACTION URL sollte hier die Aktion mailto:claude.reuter@education.lu sein, da wir kein externes PHP/CGI/ASP Programm erstellen. Der Inhalt des Formulars wird also per an die eingegebene adresse verschickt. Man kann aber auch, wie schon erwähnt, ein CGI-Skript aufrufen oder ähnliches. Beispiel:../cgi-bin/guestbook.cgi Hier wird das CGI-Skript GUESTBOOK.CGI beim Verschicken des Formulars ausgeführt. Das Skript könnte nun die Auswertung des Formulars (Rückmeldung an den User, Speichern der Daten auf dem Server,...) durchführen. METHOD solltest du POST wählen. ENCODING unbedingt auf TEXT/PLAIN einstellen, damit der Text gut leserlich übertragen wird und nicht umkodiert wird. Nun erstellt man das eigentliche Formular mit dem Text und den Formularfeldern. Oft benutzt man dazu eine Tabelle mit 2 Spalten: die erste Spalte enthält die Beschriftungen der Felder, die zweite Spalte beinhaltet die Formularfelder. So erhält man ein schönes Layout des Formulars. Formularelemente Über INSERT-FORM-FORM FIELD kann man nun verschiedenartige Formularelemente einfügen oder über die FORM-Ikone in der Symbolleiste.

25 Formation Seite 25/33 Mögliche Formularfelder sind: Einzeiliges Textfeld (TEXT): hier kann man einen kurzen Text eingeben Einzeiliges Textfeld (PASSWORD): hier kann man einen kurzen Text eingeben der nicht angezeigt wird sondern durch Punkte versteckt ist Einzeiliges Textfeld (HIDDEN): hier kann man einen Wert eines Formulars mit versenden ohne dass der Benutzer diese Feld sieht. Es ist versteckt Textfeld mit Bildlauf (TEXT AREA): zum Eingeben von größeren Texten. Wenn der Text nicht mehr in das Feld passt, erscheinen Scrollbalken. Kontrollkästchen (CHECK BOX) : zum Auswählen zwischen mehreren Möglichkeiten (mehrere Auswahlen können getroffen werden) Optionsfeld (RADIO BUTTON): im Gegensatz zu den Kontrollkästchen, kann hier nur eine Auswahl getroffen werden. Dropdownmenü (SELECTION LIST): eine Liste von mehreren Einträgen Schaltfläche (BUTTON): Knopf um eine Aktion auszulösen Hier als Beispiel die Einstellungen zu einem einzeiligen Textfeld. FIELD NAME: Jedes Formularelement sollte einen aussagekräftigen Namen haben!! INITIAL VALUE : das ist der Standardwert der übernommen wird, wenn der User nichts eingibt. Er kann auch leer sein FIELD SIZE bestimmt die Größe des Elementes, sie ändert von Element zu Element.

26 Formation Seite 26/33 Bei SELECTION LIST sieht das Eigenschaftsfenster folgendermaßen aus : Durch Klicken auf ADD OPTION 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. Die Formularfelder kann man auch nach der Erstellung durch Doppelklick wieder umändern. Multimedia einfügen 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. Beispiel: <EMBED SRC="..." WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton> 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>

27 Formation Seite 27/33 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 NVU erledigt man über die Ikone. Allerdings kann man damit nicht mehrere Seiten publizieren und auch keine Verzeichnisse auf dem Server erstellen. Deshalb empfehle ich wie schon früher erwähnt, das FTP-Programm FILEZILLA..

28 Formation Seite 28/33 NVU Tastaturkürzel Nvu-spezifische Tastaturkürzel Befehl Webadresse öffnen Publizieren Textzoom - Kleiner Textzoom - Größer Textzoom - 100% Link einfügen/bearbeiten Schriftschnitt Fett Schriftschnitt Kursiv Windows Strg+Shift+L Strg+Shift+S Strg+- Strg++ Strg+O Strg+L Strg+B Strg+I Schriftschnitte Unterstrichen Strg+U Einzug vergößern Einzug verkleinern Textstile unterbrechen Link unterbrechen Zeile/Spalte auswählen Strg+[ Strg+] Strg+Shift+Y Strg+Shift+K Strg+Drag Zelle(n) auswählen Strg+Click (ziehen um zusammenhängende Zellen zu markieren oder Zellen einzeln anklicken) Site Manager F9 Rechtschreibprüfung starten Strg+K Allgemeine Nvu-Tastaturkürzel Befehl Datei öffnen Neue Seite/Vorlage öffnen Neuen Tab öffnen Datei speichern Kopieren Einfügen Ausschneiden Alles markieren Fenster schließen Nächstes Wort löschen Eine Seite nach oben Eine Seite nach unten Eine Zeile nach oben Eine Zeile nach unten Windows Strg+O Strg+N Strg+T Strg+S Strg+C Strg+V Strg+X Strg+A Strg+W Strg+Del Bild-Auf Bild-Ab Pfeil nach oben Pfeil nach unten

29 Formation Seite 29/33 Befehl Rückgängig Wiederherstellen Suchen Windows Strg+Z Strg+Shift+Z Strg+F Weitersuchen Strg+G oder F3 Vorheriges finden Strg+Shift+F Kontextmenü öffnen Shift+F10 Hauptmenü öffnen (wechselt zum ersten Alt oder F10 Menüpunkt in der Menüzeile) An den Anfang einer Zeile springen (in einem Pos1 Textfeld) An das Ende einer Zeile springen (in einem Ende Textfeld) Nächster Tab Vorheriger Tab Tab schließen Nvu beenden Strg+Bild-Ab Strg+Bild-Auf Strg+W Strg+Q

30 Formation Seite 30/33 Anhang HTML-Kurzreferenz Definition des Dokuments <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> Schriftfarbe, Hintergrund <Body BGCOLOR=FF0000 <Body Background="Graustru.gif"> <U> <Strong> <EM> 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> 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> 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 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 Verändert die Hintergrundfarbe Es wird ein Hintergrund erstellt, der aus dem Bild Graustru.gif besteht Unterstrichen Fett Kursiv 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 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

31 Formation Seite 31/33 interne Verweise <a href="#ziel">von HIER</a> Vom Wort VON HIER wird zu Anker ZIEL gesprungen < a name="#ziel" >HIERHIN < /a> Hier ist das Ziel definiert, hierhin wird gesprungen externe Verweise <a href=" Springt auf die Webseite von Claude Reuter < a href="mailto:claude.reuter@ci.educ.lu"> < a href="ftp://ftp.microsoft.com">dateien holen< /a> Der externe Verweis ist eine adresse 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" Färbt den Rahmen um die Tabelle bordercolor="#ff0000">... < /table> < tr>...< /tr> legt eine Zeile in einer Tabelle an < td>...< /td> eröffnet eine Datenzelle in einer Tabelle < th>...< /th> Kopfzeile < th colspan="2">... < /th> Bewirkt eine verlängerte Kopfzeile über den anderen Spalten. Die Zahl gibt die Anzahl der Spalten an. < td rowspan="2">...< /td> Bewirkt eine verbreiterte Zeile vor den anderen Zeilen

32 Formation Seite 32/33 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)

33 Formation Seite 33/33 Software HTML-Editoren NVU FTP-Programm Filezilla WEB-Browser Firefox Mozilla Grafikprogramme GIMP OpenSource HTML-Editor mit WYSIWYG-Funktionen OpenSource FTP-Software Sehr guter OpenSource Web-Browser Sehr guter OpenSource Web-Browser OpenSource Grafikeditor mit zahlreichen Funktionen Sound/Video/Animations-Programme Audacity Sehr gutes Programm um Audio-Dateien zu bearbeiten, OpenSource Software VirtualDub OpenSource Programm um VideoDateien zu bearbeiten Windows Media Encoder Gratis-Software zum Erstellen von WindowsMediaDateien