Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten.
|
|
|
- Elizabeth Lange
- vor 8 Jahren
- Abrufe
Transkript
1 CSS-SCHULUNG TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM Dozentin: Dipl. Ing.(FH) Nicole Hartmann Rhoen-Saale.net GmbH Oktober 2009
2 TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS 1) Einführung Was ist CSS? CSS ist die Abkürzung für Cascading Style Sheets. CSS ist eine Sprache, die das Aussehen von HTML-Dokumenten definiert. CSS kann man z.b. zum Festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für Positionierung und viele andere Sachen benutzen. CSS hat viele Vorteile: Trennung von Layout und Inhalt zur leichteren Administration Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus präzisere Kontrolle über das Layout verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.) Barrierefreie Gestaltung einer Webseite durch einfaches Austauschen des CSS 2) Wie wird CSS in ein HTML-Dokument eingebunden? Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten. a) In-line als Style-Attribut Die Style-Angabe kann direkt in das Style-Attribut des HTML-Tags eingetragen werden. Die Angaben gelten nur für diesen einen Tag und haben für die restlichen HTML-Tags keine Bedeutung. <b style="background-color: red;">text mit rotem Hintergrund</b> b) In-document Die Style-Angabe kann innerhalb des Dokuments in einem eigenen style-block definiert werden. Hierbei gilt die Style-Angabe für alle entsprechenden Elemente innerhalb des Dokuments. <style type="text/css"> b {background-color: green; </style> <b>text mit grünem Hintergrund</b> <b>weiterer Text mit grünem Hintergrund</b> c) Extern in eigener Datei Der gängigste Weg, Style-Angaben für ein HTML-Dokument zu speichern, ist eine externe css.datei. Diese Methode wird dringend empfohlen, denn nur so kann man zentral das Layout eines kompletten Internetauftritts steuern ohne die einzelnen HTML- oder PHP-Dateien zu ändern. Eine css-datei ist eine einfache Text-Datei mit der Datei-Endung.css. Die Datei kann an jeder beliebigen Stelle im Document-Root liegen, sie muss nur in der HTML- oder PHP-Datei richtig integriert sein. Dies wird mit folgender Zeile im HEAD-Bereich des HTML-Dokuments realisiert: <link rel="stylesheet" type="text/css" href="style.css" /> <html> <head> <title>mein Dokument</title> <link rel="stylesheet" type="text/css" href=" style.css" /> </head> <body> Der große Vorteil dieser Variante: Wenn das CSS in jedes Dokument des Internet-Auftritts eingebunden ist, dann kann durch eine Änderung in der CSS-Datei gleichzeitig das Layout aller HTML- Seite -2-
3 Dateien des Internet-Auftritts geändert werden. Ganz einfach ohne großen Aufwand kann so eine Neugestaltung des Internet-Auftritts erfolgen. Auf diesem Konzept basiert auch die Layout-Gestaltung des LIS. Aufgabe Erstellen Sie eine Datei namens 1_beispiel.html und eine Datei namens 1_style.css. Wenden Sie die drei oben genannten Methoden an, um folgendes zu realisieren: - In-line: Fetter Text mit rotem Hintergrund (red) - In-document: Fetter Text mit silbernem Hintergrund (silver) - Extern: Absatz <p> mit hellgrünem Hintergrund (lime) 3) Grundlegende CSS-Syntax in einer CSS-Datei Eine CSS-Datei besteht aus mehreren Blöcken, die jeweils das Aussehen eines HTML-Elements bestimmen. Es können beliebig viele solcher Blöcke in die CSS-Datei geschrieben werden. Der Aufbau eines solchen Blockes ist immer identisch entsprechend des folgenden Schemas: selector{ eigenschaft1: wert1; eigenschaft2: wert2; Der selector gibt an, welche HTML-Elemente von diesem Layout-Block formatiert werden sollen. Als selector können HTML-Tags (z.b. b, body, p, a), class-namen und IDs aus dem HTML-Dokument verwendet werden. a) HTML-Tag als selector HTML-Tags können einfach direkt als selector eingetragen werden: html-datei: <b>roter Hintergrund</b> <a href= info.html >Link mit blauem Hintergrund</a> css-datei: b{ background-color:red; a{ background-color:blue; b) Class-Name als selector Class-Name bezieht sich auf das Klassen-Attribut im HTML-Tag. So können verschiedenen HTML-Tags gleiche Klassen zugeordnet werden. Bei Class-Namen als selectoren muss ein Punkt vorangestellt werden, um den selector als Class-Name kenntlich zu machen. html-datei: <b class=roterhintergrund>roter Hintergrund</b> <a href= info.html class=roterhintergrund>link mit rotem Hintergrund</a> css-datei:.roterhintergrund{ background-color:red; Der class-name kann frei gewählt werden, dabei ist allerdings zu beachten, dass keine Leerzeichen und Sonderzeichen verwendet werden dürfen. Seite -3-
4 c) ID als selector Die ID bezieht sich auf das ID-Attribut im HTML-Tag. So kann gezielt ein einziger HTML-Tags formatiert werden. Eine ID kann nur einmalig für einen HTML-Tag vergeben werden, es können nicht mehrere HTML-Tags die gleiche ID verwenden. Bei der ID als selector muss ein Hash (#) vorangestellt werden, um den selector als ID kenntlich zu machen. html-datei: <b id=spezialfeld>roter Hintergrund</b> <b>kein Hintergrund</b> css-datei: #spezialfeld{ background-color:red; Die ID kann frei gewählt werden, dabei ist allerdings zu beachten, dass keine Leerzeichen und Sonderzeichen verwendet werden dürfen. d) Listen von selectoren Selectoren können auch gelistet werden, d.h. eine Formatierung kann gleichzeitig für mehrere HTML- Tags angewendet werden. Die Selectoren werden dann mit Komma getrennt. html-datei: <b id=spezialfeld>roter Hintergrund</b> <b id=auchspezialfeld>auch roter Hintergrund</b> css-datei: #spezialfeld, #auchspezialfeld{ background-color:red; e) Kombination von selectoren Selectoren können auch beliebig kombiniert und verknüpft werden, um gezielt Elemente im HTML- Dokument anzusprechen. html-datei: <p> <b>fetter Text in einem Absatz</b> </p> <b>fetter Text außerhalb eines Absatzes</b> css-datei: p b{ background-color:red; Hierbei können auch Klassen oder IDs in die Selector-Definition mit einbezogen werden. Die selectoren-beschreibung kann dadurch recht komplex werden. Daher sollten möglichst aussagekräftige Klassen und IDs verwendet werden. html-datei: <p class=absatz1> <b>fetter Text in einem Absatz mit <a href= dummy.html id=dummy>link</a></b> </p> <b>fetter Text außerhalb eines Absatzes</b> css-datei: p.absatz1{ background-color:lime; p.absatz1 b{ Seite -4-
5 background-color:silver; p.absatz1 b a#dummy{ background-color:red; An die selectoren können noch zusätzliche Bedingungen geknüpft werden, dies würde jedoch im Gundlagen-Tutorial zu weit führen, zudem kommen diese Techniken im LIS nicht zum Einsatz und sind daher im Moment nicht relevant. f) Eigenschaft und Wert Für die Layout-Gestaltung der einzelnen HTML-Elemente, die durch die selectoren ausgewählt werden, gibt es nun zahlreiche Möglichkeiten. Grundsätzlich gibt es immer ein Paar aus Eigenschaft und Wert: p{ [Eigenschaft]: [Wert]; background-color: red; Im obigen Beispiel ist background-color die Eigenschaft und red der Wert. Eigenschaft und Wert werden immer durch Doppelpunkt getrennt. Und die gesamte Zeile muss immer mit einem Semikolon abgeschlossen werden. Ein style-block kann beliebig viele Eigenschaft-Werte-Paare beinhalten. p{ background-color: red; color: blue; margin: 10px; Aufgabe Erstellen Sie eine Datei 2_beispiel.html und kopieren Sie den folgenden Code in die Datei. <div id=block1> <div class=unterblock1> <H1>Erste Überschrift</H1> Dies ist der Text zur Überschrift. </div> </div> <div class=unterblock1>ablenkungstext</div> Erstellen Sie die Datei 2_style.css und definieren Sie darin das Layout für das obige HTML. Geben Sie der Überschrift einen roten Hintergrund und dem Textblock zur Überschrift einen silbernen Hintergrund. 4) Farben und Hintergründe Farben und Hintergründe sind ein wesentliches Gestaltungsmittel für Internetseiten. Für Farben kann entweder der Farbname (red, green, blue, silver, ) verwendet werden oder üblicherweise der Hexadezimal-Code eines Farbwertes (#FF0033). Beim Hexadezimal-Code stehen die ersten beiden Stellen für den Rot-Wert, die nächsten beiden für den Grün-Wert und die letzten beiden für den Blau-Wert. (siehe z.b. a) Vordergrundfarbe (color) Die Eigenschaft color bezeichnet die Vordergrundfarbe oder auch Textfarbe. Möchte mal beispielsweise alle Überschriften rot schreiben, wird dies mit der folgenden Zeile realisiert: H1{ color: #FF0000; Seite -5-
6 b) Hintergrundfarbe (background-color) Die Eigenschaft background-color bezeichnet die Hintergrundfarbe des selektierten Elements. Möchte mal beispielsweise allen Überschriften einen silbernen Hintergrund geben, wird dies mit der folgenden Zeile realisiert: H1{ background-color: silver; c) Hintergrund-Bild (background-image) Zusätzlich zur Hintergrundfarbe kann auch ein Hintergrund-Bild für das selektierte Element vergeben werden. Dazu muss das Bild auf dem Server vorliegen und entsprechend referenziert werden: p{ background-color: silver; background-image: url("bg_image.gif"); d) Wiederholung des Hintergrund-Bildes (background-repeat) Standardmäßig wird das Hintergrund-Bild sowohl vertikal als auch horizontal so oft wiederholt, bis das gesamte Element ausgefüllt ist. Dieses Verhalten möchte man manchmal jedoch ändern. Dazu git es die Eigenschaft background-repeat: p{ background-color: silver; background-image: url("bg_image.gif"); background-repeat: no-repeat; Die Eigenschaft background-repeat kann folgende Werte annehmen: background-repeat: no-repeat; Keine Wiederholung background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; Nur horizontale Wiederholung Nur vertikale Wiederholung Wiederholung in alle Richtungen (=Standard) e) Positionierung des Hintergrund-Bildes (background-position) Das Hintergrund-Bild kann auch gezielt innerhalb des HTML-Elements positioniert werden. Dazu wird die Eigenschaft background-position verwendet: p{ background-color: silver; background-image: url("bg_image.gif"); background-repeat: no-repeat; background-position: center center; Der erste Wert bestimmt die horizontale und der Zweite die vertikale Position. Als Werte sind Längenangaben (in px, em, ), prozentuale Angaben (50%, ) und vordefinierte Schlüsselwörter (top, bottom, left, right, center) erlaubt. Ursprung des dafür angenommenen Koordinaten-Systems ist in der linken oberen Ecke des HTML- Elements. Seite -6-
7 f) Verkürzte Schreibweise von background Die Eigenschaft background ist eine Abkürzung für alle Eigenschaften aus dieser Lektion (außer color). Mit background können Sie mehrere Eigenschaften in eine zusammenfassen und so Ihr Stylesheet verkürzen und leichter lesbar machen: background-color: silver; background-image: url("bg_image.gif"); background-repeat: no-repeat; background-position: right bottom; Bei Verwendung von background kann der gleiche Effekt mit nur einer Codezeile erreicht werden: background: silver url("bg_image.gif") no-repeat right bottom; Die Reihenfolge ist dabei wie folgt: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] Wird eine Eigenschaft ausgelassen, wird automatisch der Standardwert der jeweiligen Eigenschaft eingesetzt. Wird z.b. background-position aus dem Beispiel entfernt: background: silver url("butterfly.gif") no-repeat; wird diese Eigenschaften auf ihre Standardwerte top gesetzt. Aufgabe Erstellen Sie eine Datei namens 3_beispiel.html und 3_style.css. Erstellen Sie in der html-datei 3 Textblöcke/Paragraphen (<p>) mit einem beliebigen mehrzeiligen Text. Formatieren Sie den ersten Textblock mit einer blauen Schriftfarbe in Hexadezimal-Code und einem hell-roten Hintergrund. Formatieren Sie den zweiten Textblock mit dunkel-grüner Schriftfarbe. Setzen Sie ein kleines Bild als sich wiederholenden Hintergrund ein. Formatieren Sie den dritten Textblock mit dunkel-blauer Schriftfarbe. Setzen Sie ein kleines Bild einmalig in den Hintergrund. Das Bild soll horizontal mittig und mit 10px Abstand von oben positioniert sein. Seite -7-
8 5) Schriftarten Mit der Gestaltung der Schrift lässt sich das Layout einer Seite wesentlich beeinflussen. Deshalb werden hier nur die wichtigsten Schrift-Eigenschaften erläutert. a) Zeichensatzfamilie: font-family Die Eigenschaft font-family wird verwendet, um eine Liste der Zeichensätze anzugeben, in der ein bestimmtes Element oder eine Webseite angezeigt werden soll. Wenn der erste Zeichensatz nicht auf dem Computer, mit dem die Seite betrachtet wird, installiert ist, wird der nächstfolgende probiert, bis ein vorhandener bzw. passender Zeichensatz gefunden ist. Wenn man die Zeichensätze für seine Webseite auflistet, beginnt man im Allgemeinen mit dem bevorzugten Zeichensatz und ergänzt dann ein paar Alternativen. Ein Beispiel für solch eine Liste der Zeichensätze könnte wie folgt aussehen: h1 { font-family: arial, verdana, sans-serif; h2 { font-family: "Times New Roman", serif; Überschriften, die mit <h1> markiert wurden, werden in der Schrift Arial angezeigt. Falls dieser Zeichensatz nicht auf dem Computer des Nutzers installiert ist, wird stattdessen Verdana verwendet. Sollten beide Schriften nicht verfügbar sein, wird ein Zeichensatz aus der sans-serif-familie für die Überschriften benutzt. Bitte beachten Sie, dass Schriftartnamen, die Leerzeichen enthalten, in Anführungsstrichen geschrieben werden müssen. Siehe "Times New Roman" im obigen Beispiel. b) Schriftstil: font-style Die Eigenschaft font-style weist dem betreffenden Element die Stile normal (kein Stil), italic (kursiv) oder oblique (schräg) zu. Im folgenden Beispiel werden alle Überschriften, die mit <h2> markiert sind, kursiv geschrieben. h2 { font-family: "Times New Roman", serif; font-style: italic; Obwohl italic und oblique annähernd identisch sind, ist der Wert italic ist dem Wert oblique vorzuziehen, der der Browser automatisch auf oblique umschaltet, sollte die Schriftart italic beim Client nicht verfügbar sein. c) Schriftgewichtung: font-weight Mit der Eigenschaft font-weight gibt man an, wie fett oder schwer eine Schriftart angezeigt werden soll. Eine Schrift kann entweder normal oder bold (fett) dargestellt werden. Einige Browser unterstützen auch die Angabe der Zahlen (nur volle Hunderter) um eine feiner abgestufte Darstellung zu erreichen. td { font-family: arial, verdana, sans-serif; font-weight: bold; d) Schriftgröße: font-size Die Schriftgröße wird durch die Eigenschaft font-size festgelegt. Seite -8-
9 Man kann viele verschiedene Einheiten (z.b. Pixel und Prozentwerte) verwenden um die Größen zu beschreiben. Beispiele sind: h1 { font-size: 30px; h2 { font-size: 12cm; h3 { font-size: 120%; p { font-size: 1em; Es gibt einen grundlegenden Unterschied zwischen den vier obigen Einheiten. Px, cm und pt bringen die Schrift auf eine absolute Größe, während es % und em als relative Größenangabe dem Nutzer erlaubt, die Größe so zu verändern, dass es ihm/ihr passend erscheint. Viele Internetnutzer sind behindert, älter, sehbehindert oder leiden unter der schlechten Qualität Ihres Monitors. Um Ihre Webseite für jederman barrierefrei zugänglich zu machen, sollten Sie veränderbare Einheiten, wie % oder em, verwenden. Im LIS wird als Größeneinheit hauptsächlich em verwendet, damit die Schriftgrößen vom Anwender beeinflusst werden können. e) Kombination der vorgenannten: font Mit Hilfe der font-eigenschaft können Sie alle Schrift-Eigenschaften in dieser einen Eigenschaft vereinen. Stellen Sie sich z.b. die folgenden vier Codezeilen vor, die die Schrifteigenschaften für <p> angeben: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; Wenn man diese Kombination verwendet, kann der Code vereinfacht werden: p { font: italic bold 30px arial, sans-serif; Die Reihenfolge der Werte für font ist: [font-style] [font-weight] [font-size] [font-family] Aufgabe Erstellen Sie eine Datei 4_beispiel.html und 4_style.css. In der html-datei erstellen Sie eine Überschrift in h1, eine in h2, darunter einen beliebigen Text. Formatieren Sie die h1-überschrift in Times New Roman in einer Größe von 30px mit einem hell-roten Hintergrund. Formatieren Sie die h2-überschrift in Arial, kursiv und einer relativen Größe von 1.2em. 6) Textgestaltung Für die Gestaltung von Texten gibt es noch weitere Möglichkeiten. In diesem Kapitel werden die wichtigsten, die auch im LIS zu Einsatz kommen, erläutert. Seite -9-
10 a) Textausrichtung: text-align Die CSS-Eigenschaft text-align ist mit dem Attribut align vergleichbar, welches in älteren HTML- Versionen verwendet wurde. Text kann entweder left (links), right (rechts) oder center (zentriert) ausgerichtet werden. Außerdem steht der Wert justify für Blocksatz zur Verfügung, d.h. jede Zeile wird so gestreckt, dass alle gleich lang sind. Dies kennen Sie vielleicht aus Zeitungen und Zeitschriften. Im unten stehenden Beispiel ist der Text in Tabellenköpfen <th> (table header) rechts ausgerichtet, während er in normalen Tabellenzellen <td> zentriert wird. Zusätzlich werden normale Absätze im Blocksatz geschrieben: th { text-align: right; td { text-align: center; p { text-align: justify; b) Textdekoration: text-decoration Mit der Eigenschaft text-decoration ist es möglich, Texte verschiedenartig zu dekorieren oder Ihnen Effekte zu verleihen. Sie können Texte unterstreichen (underline), durchstreichen (line-through) oder eine Linie darüber (overline) zeichnen lassen. Um die Formatierung zu entfernen, verwenden Sie den Wert none. Im folgenden Beispiel sind <h1>-überschriften unterstrichen, <h2>-überschriften haben eine Linie über dem Text und <h3>-überschriften sind durchgestrichen. h1 { text-decoration: underline; h2 { text-decoration: overline; h3 { text-decoration: line-through; Mit der Formatierung underline sollte sehr sparsam umgegangen werden, da unterstrichene Texte traditionell als Links wahrgenommen werden. Daher ist es geschickter, Text, der betont werden soll, in farbiger Schrift oder farbig hinterlegt zu gestalten. Aufgabe Erstellen Sie eine Datei 5_beispiel.html und 5_style.css. Erstellen Sie eine Tabelle (2x2) und füllen sie mit beliebigem Text. Formatieren Sie die erste Spalte linksbündig, die zweite Spalte rechtsbündig. Streichen Sie mit Hilfe eines span-tags ein beliebiges Wort in Ihrem Text durch. 7) Links Links oder aus Verweise sind spezielle Tags im Hinblick auf die CSS-Formatierung. Neu ist hier, dass CSS es Ihnen erlaubt, dies abhängig davon zu gestalten, ob der Link schon besucht (visited) oder noch nicht besucht (link) wurde, gerade angeklickt wird (active) oder nur der Mauszeiger über dem Link platziert ist (hover). Seite -10-
11 Dadurch kann man seiner Webseite tolle und nützliche Effekte hinzufügen. Um diese Effekte zu steuern, benutzt man sog. Pseudoklassen. Eine Pseudoklasse erlaubt es Ihnen zwischen verschiedenen Zuständen oder Ereignissen zu unterscheiden, wenn Sie eine Eigenschaft für einen HTML-Tag festlegen. Sehen wir uns ein Beispiel an. Wie Sie wissen, werden Links in HTML mit <a>-tags markiert. In CSS nutzen wir wiederum a zum ansprechen der Links im HTML-Dokument: a { color: blue; Ein Link kann verschiedene Zustände haben. Er kann z.b. besucht oder noch nicht besucht worden sein. Sie können die folgenden Pseudoklassen verwenden, um dies darzustellen: a:link { color: blue; a:visited { color: red; Die Pseudoklassen link, visited, active und hover werden durch Doppelpunkt getrennt an den Tag-selector angehängt. a) Die Pseudoklasse :link Die Pseudoklasse :link wird für Links zu Seiten benutzt, die der Nutzer vorher noch nicht besucht hat. a:link { color: #6699CC; b) Die Pseudoklasse :visited Die Pseudoklasse :visited wird für Links zu bereits besuchten Seiten benutzt. Der nachfolgende Beispielcode färbt alle besuchten Links dunkelviolett: a:visited { color: #660099; c) Die Pseudoklasse :active Die Pseudoklasse :active benutzt man für aktive Links, also solche, die gerade angeklickt werden. Das nachfolgende Beispiel gibt den aktiven Links eine gelbe Hintergrundfarbe: a:active { background-color: #FFFF00; d) Die Pseudoklasse :hover Die Pseudoklasse :hover wird angewendet, wenn der Mauszeiger auf einem Link platziert wird. Seite -11-
12 Das kann verwendet werden, um interessante Effekte zu kreieren. Wenn man beispielsweise möchte, dass seine Links orange und kursiv geschrieben werden, wenn der Mauszeiger sie berührt, dann sollte das CSS so aussehen: a:hover { color: orange; font-style: italic; Aufgabe Erstellen Sie eine Datei 6_beispiel.html und 6_style.css. Tragen Sie in die html-datei 3 Paragraphen mit dem Text Link 1, Link 2, Link 3 ein. Verlinken Sie die Texte auf # (<a href= # ). Formatieren Sie die Texte in Arial. 1.1em mit hell-rotem Hintergrund und dunkel-roter Schrift. Fügen Sie einen Hover-Effekt hinzu, so dass der Text kursiv und fett wird, der Hintergrund dunkel-rot und die Schrift weiß. Was passiert mit der Formatierung, wenn man auf einen Link klickt? 8) Gruppierung von Elementen mittels span und div Die Elemente <span> und <div> werden zum Gruppieren und Strukturieren eines Dokumentes benutzt und sehr oft mit den Attributen class und id verwendet. In dieser Lektion werfen wir einen genaueren Blick auf die Benutzung von <span> und <div>, da genau diese beiden HTML-Elemente von zentraler Bedeutung für den Aufbau von Webseiten mit Hilfe von CSS ist. a) Gruppieren mit <span> Das Element <span> ist ein neutrales Element, welches dem Dokument eigentlich nichts hinzufügt, d.h. kein eigens definiertes Aussehen hat. Aber zusammen mit CSS, kann <span> dazu benutzt werden, um Texte innerhalb eines Fließtextes zu formatieren, ohne sonstigen Einfluss auf den Textfluss zu nehmen. Der span-tag ist ein Inline-Element, das bedeutet, dass er den Textfluss nicht unterbricht und sich in die Zeile eingliedert. Natürliche Inline-Elemente sind z.b.: span, a, b. <p>elefanten, Giraffen und auch Leoparden leben in Afrika.</p> Möchte man nun die Tiere in dem Satz hervorheben ohne den Satz an sich zu formatieren, kann und sollte man dies mit Hilfe des span-tags umsetzen, indem man den Text folgendermaßen im HTML formatiert: html-datei <p> <span class=tier>elefanten</span>, <span class=tier>giraffen</span> und auch <span class=tier>leoparden</span> leben in Afrika. </p> css-datei span.tier { color:red; Seite -12-
13 Hier könnte man theoretisch auch das id-attribut anstelle des class-attributs verwenden, um den span-elementen einen Stil zuzuordnen. Aber da man in diesem Fall jedem span-element eine eigene eindeutige ID zuordnen müsste, wäre dies ein sehr umständlicher Weg. b) Gruppieren mit <div> Im Gegensatz zum span-tag handelt es sich bei dem div-tag um ein Block-Element. Das bedeutet, dass ein div-tag immer eine neue Zeile beginnt und diese in der vollen Breite ausfüllt, eben als kompletter Block. Das Ende des Blocks wird durch den Ende-div-Tag </div> kenntlich gemacht und auch hier wird automatisch ein Zeilenumbruch eingefügt. Div-Elemente können beliebig verschachtelt werden. Daher eignen sie sich besonders für die Strukturierung einer HTML-Seite. Mit ihrer Hilfe können die Seiten-Elemente wie Navigation, Content, Fusszeile usw. auf einer HTML-Seite in Blöcken positioniert werden. <div id=navigation> <a href=#>link 1</a> <a href=#>link 2</a> <a href=#>link 3</a> </div> <div id=content> <p>elefanten sind scheue Tiere. Sie bewegen sich in Herden durch die Savanne.</p> <p>giraffen können durch ihren langen Hals Blätter von den Bäumen fressen.</p> </div> <div id=footer> Copyright 2009 </div> Durch die Vergabe von eindeutigen IDs können wir die einzelnen Block-Elemente eine HTML-Seite gezielt definieren und ihr Layout im CSS gestalten. Aufgabe Erstellen Sie eine Datei 7_beispiel.html und 7_style.css. Tragen Sie Ihre komplette Büro-Anschrift mit Namen in die html-datei ein. Hinterlegen Sie die Anschrift mit einem grauen Hintergrund. Formatieren sie Ihren Namen etwas größer als die Straße und den Ort. Erstellen Sie einen zweiten Abschnitt mit Telefonnummer und -Adresse. Hinterlegen Sie diesen Abschnitt mit einem hellen Gelb-Ton. Stellen Sie Ihrer Telefonnummer das Wort Telefon voran und formatieren Sie es fett, kursiv und etwas kleiner als den restlichen Text. Gehen Sie entsprechend bei der -Adresse vor. 9) Das Boxmodell Das Box-Modell in CSS beschreibt die Boxen, die für HTML-Elemente generiert werden. Über das Box-Modell kann man Höhe und Breite von Inhalten, Innenabstände (padding), Ränder (border) und Außenabstände (margin) für jedes Element steuern. Durch Addition der 4 Werte entsteht die tatsächliche Höhe und Breite eines Elements. Seite -13-
14 10) Breite & Höhe: width & height Die Dimensionen eines Elements wie z.b. p und div lassen sich mit Hilfe der Eigenschaften width und height steuern. div.box1{ width:100px; height:100px; Normalerweise wird die Eigenschaft height eher nicht verwendet, da die Höhe sich automatisch durch den Inhalt der div-box ergibt. Dennoch kann es als Gestaltungs-Methode manchmal notwendig werden. 11) Rahmen: border Um jedes Element kann man via CSS einen kompletten Rahmen ziehen. Für diesen Rahmen gibt es zahlreiche Gestaltungsmöglichkeiten über die diversen Eigenschaften. Zu beachten ist, dass der Rahmen nur dann angezeigt wird, wenn alle der drei folgenden Eigenschaften definiert sind. a) border-width Die Breite des Rahmens wird mit der Eigenschaft border-width eingestellt. Diese kann die Werte thin (dünn), medium (mittel) und thick (dick) oder einen numerischen Wert in Pixeln annehmen. div.box2{ border-width: 10px; div.box3{ border-width: thin; b) border-color Die Eigenschaft border-color gibt an, welche Farbe der Rahmen hat. Werte können die normalen Farbwerte, z.b. über Hexadezimal-Code (#123456) oder auch über Farbnamen (yellow) definiert werden. Seite -14-
15 div.box2{ border-color: #FF33EE; div.box3{ border-color: red; c) border-style Es gibt verschiedene Umrandungsarten, aus denen Sie auswählen können: z.b. solid, dotted, dashed, double, grove, ridge, inset, outset. Bitte beachten Sie, dass die Darstellungen in den einzelnen Browsern teilweise voneinander abweichen. Die Werte none oder hidden können benutzt werden, wenn man keinerlei Umrandung wünscht. div.box2{ border-style: dotted; div.box3{ border-style: solid; d) Kombination: border Wie auch bei vielen anderen Eigenschaften, können die Werte der Rahmeneigenschaften in der Eigenschaft border zusammengefasst werden. Schauen wir uns ein Beispiel an: p { border-width: 1px; border-style: solid; border-color: blue; kann kombiniert werden zu: p { border: 1px solid blue; Die Reihenfolge hierbei ist [border-width] [border-style] [border-color] 12) Innenabstand: padding Der Innenabstand padding kann auch als Füllung verstanden werden. Dies macht Sinn, da der Abstand zu anderen Elementen nicht verändert wird, sondern nur den inneren Abstand vom Rahmen (border) zum Inhalt des Elementes angibt. h1 { background: yellow; padding: 10px; 13) Aussenabstand: margin Der Aussenabstand margin gibt den Abstand vom Rahmen eines Elements bis zum nächsten Element an. So kann man pixelgenau Abstände definieren. h1 { background: yellow; Seite -15-
16 padding: 10px; margin: 20px; 14) Seitenbezogene Abstände Die genannten Abstände des Boxmodells können auch seitenbezogen definiert werden, wenn man beispielsweise den linken Rand größer gestalten möchte als die rechte Seite. Dazu kann man bei margin, border und padding jeweils den Zusatz verwenden. - -top - -right - -bottom und - -left h1 { padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left: 5px; In der Kurzschreib-Variante kann man diese 4 Werte auch durch Leerzeichen getrennt aneinanderhängen. Dabei ist die Reihenfolge top, right, bottom und left, als im Uhrzeigersinn zu beachten. h1 { padding: 10px 5px 10px 5px; Aufgabe Erstellen Sie eine Datei 8_beispiel.html und 8_style.css. Formatieren Sie die beiden Texte wie in der Abbildung: 15) Allgemeine Hinweise und Informationen Leider ist es noch immer so, dass nicht alle Browser einheitlich mit CSS-Formatierungen umgehen. Deshalb ist es immer ratsam, CSS-Formatierungen nach Möglichkeit in den aktuellen Versionen des Internet-Explorer, Firefox, Netscape, Opera und ggf. Safari (Linux) zu testen. Die CSS-Schulung beinhaltet nur die wichtigsten CSS-Eigenschaften und Grundlagen zu CSS. CSS ist wesentlich mächtiger und umfangreicher als in der kurzen Zeit behandelt werden kann. Zur selbständigen Vertiefung des Themas gibt es zahlreiche Seiten im Internet, die sich mit dem Thema CSS beschäftigen. Eine Auswahl sei hier genannt: Seite -16-
17 Manchmal kann es auch einfach reichen, z.b. css kursiv in das Google Suchfeld einzugeben, um die gewünschten Formatierungs-Eigenschaften ausfindig zu machen. Seite -17-
18 TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM 16) Vorbereitungen - Entwicklertools Um das CSS einer bestehenden Seite zu bearbeiten, ist es zunächst einmal wichtig, sich einen Überblick über die Struktur der Seite zu verschaffen. Dazu gibt es glücklicherweise verschiedene Tools, die den Seiten-Überblick erleichtern. a) Entwicklertools im Internet Explorer 8 Im Internet Explorer 8 sind von Haus aus die sogenannten Entwicklertools enthalten. Diese können mit F12 aktiviert und deaktiviert werden. b) Internet Explorer Developer Toolbar im Internet Explorer 7 In der älteren Version des Internet Explorer kann man sich die Internet Explorer Developer Toolbar von der Microsoft-Homepage nachinstallieren. Diese ist nicht ganz so komfortabel wie die Entwicklertools im IE 8, aber für das Auslesen der CSS-Struktur reichen die Funktionen allemal. 2D5E1DB91038&displaylang=en c) Plugin Firebug im Firefox Für den Firefox gibt es das kostenlose Plugin Firebug, das man sich von der Mozilla-Seite herunterladen kann. Dies ist ebenfalls ein mächtiges und umfangreiches Werkzeug, um Internetseiten zu debuggen. Aufgabe Betrachten Sie sich die Seite und finden Sie mit einem der Entwickler-Tools heraus, welche CSS-ID der Menüpunkt Über uns hat. 17) Offline testen Bei Internetseiten ist es immer sehr unschön, wenn man an Online-System herum testet. Man kann nicht einfach mal was ausprobieren und muss extrem vorsichtig sein, um nichts kaputt zu machen. Denn jeder Fehler wäre sofort online und würde ein unschönes Bild für den Seitenbesucher abgeben. Aus diesem Grund, ist es sinnvoll, größere Layout-Änderungen offline am lokalen PC durchzuführen. Dazu gehen wir folgendermaßen vor. a) Quelltext speichern Auf der gewünschten Internetseite klicken wir mit der rechten Maustaste auf Quelltext anzeigen. Es öffnet sich eine Textdatei, die wir dann mit der Endung.html auf unserem lokalen Rechner abspeichern. Die lokale html-seite öffnen wir nun per Doppelklick im Internet Explorer. Was stellen wir fest? b) Bilder und Dateien über base-tag nachladen Um die fehlenden Bilder und css-dateien vom Internet-Server auf unserem lokalen Rechner nachzuladen, ergänzen wir im Head-Bereich den base-tag: <base href=" Seite -18-
19 Diese Zeile führt dazu, dass der Browser externe Dateien nicht auf unserem lokalen PC sucht, sondern diese von der angegebenen Internet-Seite nachlädt. Nun sieht die Seite doch schon wie original aus. c) Lokales CSS verwenden Nur haben wir nun das Problem, dass wir ja unser CSS lokal einbinden möchten und nicht das CSS vom Server verwenden möchten. Daher ändern wir eine weitere Zeile in der html-datei ab: <link rel="stylesheet" type="text/css" href="/css/lkrg/1/layout.css" media="screen"> wird geändert in <link rel="stylesheet" type="text/css" href="c:\[lokaler Pfad]\lis.css" media="screen"> Wenn wir nun die Datei im Browser starten, stellen wir fest, dass die Formatierungen vorhanden sind, aber die im CSS integrierten Bilder nicht dargestellt werden. Woran liegt das? d) CSS-Bilder nachladen Also müssen wir die im CSS referenzierten Bilder ebenfalls noch lokal speichern. Ein Blick in unser lis.css zeigt uns, dass die Bilder im selben Verzeichnis liegen wie die css-dateien. Daher rufen wir das Verzeichnis im Browser auf und laden uns die notwendigen Bilder für die Darstellung der Seite herunter. Welche Bilder notwendig sind, können wir mit Hilfe der Developer-Toolbar auf der LIS-Seite feststellen. Markieren Sie über die Toolbar das entsprechende Box-Element an, das ein Hintergrund- Bild enthält und lassen Sie sich in der Developer-Toolbar anzeigen, welche Bild-URL an dieser Stelle eingebunden ist. Seite -19-
20 Nachdem wir die notwendigen Bilder in das Verzeichnis einkopiert haben, sind die Vorbereitungen abgeschlossen und wir können mit der Bearbeitung des CSS beginnen. Aufgabe Welche Schriftart wird im LIS bevorzugt verwendet? Wie lautet die ID der div-box, in der die Funktionen zur Barrierefreiheit enthalten sind? 18) CSS bearbeiten Nun können Sie beginnen, Änderungen an Ihrer lokalen CSS-Datei vorzunehmen. Dazu suchen wir uns am einfachsten über die Developer-Toolbar das Element heraus, was wir bearbeiten möchten und ermitteln den betreffenden Tag oder die css-klasse oder die ID. Über eines der drei Elemente versuchen wir dann die entsprechenden Formatierungen in der CSS-Datei ausfindig zu machen. Und diese dann zu bearbeiten oder ggf. neu anzulegen. Wenn wir beispielsweise die Überschriften in dunkelrot darstellen möchten, ändern wir diese Angabe im CSS: Aktuelle Version im LIS h1{ font-size:1.6em; margin:30px 0 5px 0; color: #5D5D5D; text-align: center; Neue, bearbeitete Version h1{ font-size:1.6em; margin:30px 0 5px 0; color: #AA0000; text-align: center; Wenn wir die Links in der Brotkrumen-Navigation fett darstellen möchten, dann können wir auch diese Angabe im CSS ändern bzw. eine neue Angabe hinzufügen: Aktuelle Version im LIS div.breadcrumbbox a{ font-size:0.95em; text-decoration:none; color:#5d5d5d; Seite -20-
21 Neue, bearbeitete Version div.breadcrumbbox a{ font-size:0.95em; text-decoration:none; color:#5d5d5d; font-weight:bold; Aufgabe Ersetzen Sie die Hintergrundgrafik im Kopfbereich durch eine beliebige neue Grafik. 19) Bearbeitetes CSS hochladen Wenn Sie die Änderungen am Layout soweit abgeschlossen haben, dass Sie das neue Layout online stellen möchten, dann loggen Sie sich im LIS ein und wechseln in den Administrationsbereich und dort in den Unterpunkt Layout. Hier sehen Sie, dass unterschiedliche CSS-Dateien hochgeladen werden können. layout.css: dies ist die normale Layout-Datei, die für die Gesamt-Darstellung verantwortlich ist. Seite -21-
22 print.css: Diese Datei ist für das Layout des Drucks verantwortlich und sollte normalerweise nicht geändert werden. Druck-Layouts zeichnen sich dadurch aus, dass die Inhalte Schwarz-Weiß gehalten sind und nur der Content-Bereich gedruckt wird. Der aktuelle Navigationspunkt wird meist ebenfalls in die Druck-Version integriert. handicapped.css: Diese Datei ist für die barrierefreie Darstellung und sollte ebenfalls möglichst nicht bearbeitet werden. Die handicapped.css kann bei sehbehinderten Menschen aktiviert werden, damit die Schrift möglichst groß und frei von störenden Farben dargestellt werden kann. Desweiteren gibt es noch die Möglichkeit, für die einzelnen Top-Navigations-Punkte eigene Layouts hochzuladen, um z.b. eine farbliche Trennung der einzelnen Bereiche zu realisieren. Diese css-dateien sind nur ergänzend zum bestehenden layout.css, d.h. es müssen hier nicht noch einmal alle Definitionen enthalten sein. Im unteren Teil der Seite können nun die entsprechenden Bilder für das Layout hochgeladen werden. Sobald ein neues Bild hochgeladen wird, wird ein Backup des alten Bildes erstellt, damit nicht aus Versehen eine Datei ungewollt überschrieben wird. Die gesamten Dateien werden hier aufgelistet und können auch durch rechten Mausklick heruntergeladen und bearbeitet werden. Sobald das neue Layout hochgeladen ist, kann das Ergebnis auf dem Work-Server begutachtet werden und ggf. noch einmal korrigiert werden. Erst wenn der Datenabgleich mit dem Live-Server erfolgt, ist das neue Layout online. 20) Layout-Änderung schnell testen Für eine kleine Änderung des Layouts muss nicht der komplette Aufwand betrieben werden, die gesamte Seite offline zu speichern. Dafür gibt es in der Developer Toolbar ganz interessante Funktionen. Beispielsweise kann man in der Developer Toolbar die Werte einfach ändern und sieht sofort, wie sich das Layout verändert. Die Änderungen sind natürlich nur für diesen einen Aufruf und werden nicht gespeichert. Aber zum Testen einer Änderung, ist dies ein ganz nettes Feature. 21) Eigene Formate definieren Für die hoch Motivierten gibt es auch noch die Möglichkeit, sich eigene Formate zu definieren. Dazu kann man im HTML-Editor im LIS auf die Quelltext-Ansicht umschalten und dem gewünschten Element beispielsweise eine eigene Klasse eintragen. Seite -22-
23 Aktuelle Version im LIS <H2>Die Sprechtage des Landrats</H2> Neue, bearbeitete Version <H2 class= meineeigeneklasse >Die Sprechtage des Landrats</H2> Wenn Sie dieser Klasse nun einen eigenen Style im layout.css zuweisen, können Sie ganz gezielt Formatierungen vornehmen. Sie könnten beispielsweise eine Klasse textmarkieren erstellen und der Klasse die Hintergrundfarbe Gelb zuweisen. Diese Klasse könnte dann im Gesamten Internet-Auftritt verwendet werden. 22) Fragen, Kommentare und Anregungen Wenn Sie noch Fragen rund um das Thema CSS haben, wäre jetzt der geeignete Zeitpunkt ;-) Vielen Dank! Nicole Hartmann Rhoen-Saale.net GmbH Seite -23-
Format- oder Stilvorlagen
Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen
HTML Programmierung. Aufgaben
HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite
CSS. Cascading Stylesheets
CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische
ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003
ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003 Word ist zunächst ein reines Textverarbeitungsprogramm. Allerdings lassen sich hier Vorträge genauso mit Gliederung und Querverweisen sowie Textquellen, Clips
Text Formatierung in Excel
Text Formatierung in Excel Das Aussehen des Textes einer oder mehrerer Zellen kann in Excel über verschiedene Knöpfe beeinflusst werden. Dazu zuerst die betroffenen Zelle(n) anwählen und danach den entsprechenden
Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet.
5.6. Der HTML-Editor Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet. Bild 33: Der Editor 5.6.1. Allgemeine
Hinweise zum Übungsblatt Formatierung von Text:
Hinweise zum Übungsblatt Formatierung von Text: Zu den Aufgaben 1 und 2: Als erstes markieren wir den Text den wir verändern wollen. Dazu benutzen wir die linke Maustaste. Wir positionieren den Mauszeiger
Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT
Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT LADEN DER VORLAGE 2 Öffnen Sie Outlook 2 Klicken Sie auf EXTRAS >> OPTIONEN 2 Im Optionenfeld von Outlook folgend Sie den Schritten 2 Fenster
Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.
Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen
Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen
Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
Erzherzog Johann Jahr 2009
Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein
Online-Publishing mit HTML und CSS für Einsteigerinnen
Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden
Bedienungsanleitung. Content-Management-System GORILLA
Bedienungsanleitung Content-Management-System GORILLA Einloggen Öffnen Sie die Seite http://login.rasch-network.com Es öffnet sich folgendes Fenster. Zum Anmelden verwenden Sie die Benutzerdaten, die wir
Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress.
Anmeldung http://www.ihredomain.de/wp-admin Dashboard Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress. Das Dashboard gibt Ihnen eine kurze Übersicht, z.b. Anzahl der Beiträge,
Schiller-Gymnasium Hof 20.12.2004
Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape
Textgestaltung mit dem Editor TinyMCE Schritt für Schritt
Textgestaltung mit dem Editor TinyMCE Schritt für Schritt Folgender Artikel soll veröffentlicht und mit dem Editor TinyMCE gestaltet werden: Eine große Überschrift Ein Foto Hier kommt viel Text. Hier kommt
4 Aufzählungen und Listen erstellen
4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer
Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle)
Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle) Author: Bernd Alexander K. W. Köhler http://www.pixel-cms.de email:
CSS-Grundlagen. Etwas über Browser. Kapitel. Die Vorbereitung
Kapitel 1 Die Vorbereitung Vorgängerversionen. Bald darauf folgte dann schon die Version 4, die mit einer kleinen Bearbeitung bis vor Kurzem 15 Jahre unverändert gültig war. All das, was du die letzten
Anwendungsbeispiele. Neuerungen in den E-Mails. Webling ist ein Produkt der Firma:
Anwendungsbeispiele Neuerungen in den E-Mails Webling ist ein Produkt der Firma: Inhaltsverzeichnis 1 Neuerungen in den E- Mails 2 Was gibt es neues? 3 E- Mail Designs 4 Bilder in E- Mails einfügen 1 Neuerungen
Dokumentation von Ük Modul 302
Dokumentation von Ük Modul 302 Von Nicolas Kull Seite 1/ Inhaltsverzeichnis Dokumentation von Ük Modul 302... 1 Inhaltsverzeichnis... 2 Abbildungsverzeichnis... 3 Typographie (Layout)... 4 Schrift... 4
Als Lehrende/r oder Mitwirkende/r einer Veranstaltung können Sie das Wiki unter dem Funktionsreiter + aktivieren und deaktivieren.
WikiWikiWeb Das automatisch in einer Veranstaltung aktivierte Modul/Plugin Wiki-Web ist eine Variante eines Wiki (hawaiisch für schnell ), in dem es den TeilnehmerInnen möglich ist, direkt in der angewählten
Urlaubsregel in David
Urlaubsregel in David Inhaltsverzeichnis KlickDown Beitrag von Tobit...3 Präambel...3 Benachrichtigung externer Absender...3 Erstellen oder Anpassen des Anworttextes...3 Erstellen oder Anpassen der Auto-Reply-Regel...5
Sobald Sie in Moodle einen Textbeitrag verfassen möchten, erhalten Sie Zugang zu folgendem HTML- Texteditor:
Texteditor Sobald Sie in Moodle einen Textbeitrag verfassen möchten, erhalten Sie Zugang zu folgendem HTML- Texteditor: Anmerkung für Mac-User: Da der Safari-Browser evtl. Probleme mit dem Editor von Moodle
Einstellungen im Internet-Explorer (IE) (Stand 11/2013) für die Arbeit mit IOS2000 und DIALOG
Einstellungen im Internet-Explorer (IE) (Stand 11/2013) für die Arbeit mit IOS2000 und DIALOG Um mit IOS2000/DIALOG arbeiten zu können, benötigen Sie einen Webbrowser. Zurzeit unterstützen wir ausschließlich
PowerPoint: Text. Text
PowerPoint: Anders als in einem verarbeitungsprogramm steht in PowerPoint der Cursor nicht automatisch links oben auf einem Blatt in der ersten Zeile und wartet auf eingabe. kann hier vielmehr frei über
1 Einleitung. Lernziele. das Drucklayout einer Tabelle mit der Seitenansicht kontrollieren
1 Einleitung Lernziele das Drucklayout einer Tabelle mit der Seitenansicht kontrollieren mit dem Register Seitenlayout das Drucklayout einer Tabelle ändern Kopf- und Fußzeilen schnell einfügen Lerndauer
Kleines Handbuch zur Fotogalerie der Pixel AG
1 1. Anmelden an der Galerie Um mit der Galerie arbeiten zu können muss man sich zuerst anmelden. Aufrufen der Galerie entweder über die Homepage (www.pixel-ag-bottwartal.de) oder über den direkten Link
Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Grundlagen... 2 Hyperlinks innerhalb einer Datei... 2 Verweisziel definieren... 2 Einen Querverweis setzen... 3 Verschiedene Arten von Hyperlinks... 3 Einfache
Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz
Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz Diese Anleitung soll als Kurzreferenz und Schnellanleitung dienen um einfach und schnell Berichte auf der Homepage www.dav-koblenz.de
Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.
Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die
DAUERHAFTE ÄNDERUNG VON SCHRIFTART, SCHRIFTGRÖßE
DAUERHAFTE ÄNDERUNG VON SCHRIFTART, SCHRIFTGRÖßE UND ZEILENABSTAND Word 2010 und 2007 Jedes neue leere Dokument, das mit Word 2010 erstellt wird, basiert auf einer Dokumentvorlage mit dem Namen Normal.dotx.
Inhalt. 1 Einleitung AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER
AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER Inhalt 1 Einleitung... 1 2 Einrichtung der Aufgabe für die automatische Sicherung... 2 2.1 Die Aufgabenplanung... 2 2.2 Der erste Testlauf... 9 3 Problembehebung...
11 Tabellen als Inhaltselement (ohne RichTextEditor)
11 Tabellen als Inhaltselement (ohne RichTextEditor) Inhaltsverzeichnis 11 Tabellen als Inhaltselement (ohne RichTextEditor) 1 Vorbemerkung.......................................... 1 11.1 Eine einfache
Neue Schriftarten installieren
.DIE Neue Schriftarten installieren Die Informationen zu jeder Schriftart (Font) sind in jeweils einer Datei untergebracht, der sog. Font-Datei mit der Endung.ttf ttf steht für True Type Font und bedeutet,
Kapitel 3 Frames Seite 1
Kapitel 3 Frames Seite 1 3 Frames 3.1 Allgemeines Mit Frames teilt man eine HTML-Seite in mehrere Bereiche ein. Eine Seite, die mit Frames aufgeteilt ist, besteht aus mehreren Einzelseiten, die sich den
Seite 1 von 14. Cookie-Einstellungen verschiedener Browser
Seite 1 von 14 Cookie-Einstellungen verschiedener Browser Cookie-Einstellungen verschiedener Browser, 7. Dezember 2015 Inhaltsverzeichnis 1.Aktivierung von Cookies... 3 2.Cookies... 3 2.1.Wofu r braucht
Frames oder Rahmen im Browserfenster
In dieser Ausbildungseinheit zeigen wir Ihnen, wie Frames oder auch Rahmen im Browserfenster erstellt werden. Dabei möchten wir anmerken, dass zu Frames bereits sehr viel Gegensätzliches geschrieben wurde.
STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT. Arbeiten mit Word Erstellung einer Formatvorlage
STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT Arbeiten mit Word Erstellung einer Formatvorlage Datum: März 2015 Betreuer/in: B. Sc. Lena Reisner Dipl.-Ing agr. Sibylle Henter Inhalt Einleitung... 1 Anlegen
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente
Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager
Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager Homepage-Manager Navigation Home Der Homepage-Manager bietet die Möglichkeit im Startmenü unter dem Punkt Home einfach und schnell
Meine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
Design anpassen eine kurze Einführung
Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können
1. Handhabung. 1.1. Werkzeug- und Menüleiste
1. Handhabung 1.1. Werkzeug- und Menüleiste Neuer Ordner Ausschneiden Kopieren Einfügen Löschen separate Vorschau Ausloggen Neues Dokument Schnellsuche Datei importieren Schnellsuche Spaltenansicht = normale
Anleitung zur Verwendung von Silverstripe 3.x
Anleitung zur Verwendung von Silverstripe 3.x Inhaltsverzeichnis: 1. EINLEITUNG 2. ORIENTIERUNG 2.1 Anmelden am CMS 2.2 Die Elemente des Silverstripe CMS 2.3 Funktion des Seitenbaums 2.4 Navigieren mit
Primarschule Birmensdorf PIA Anleitungen Word. Bevor du mit Schreiben beginnen kannst, musst du dein Word- Dokument einrichten.
Word einrichten Bevor du mit Schreiben beginnen kannst, musst du dein Word- Dokument einrichten. Starte ein Word Dokument, indem du auf das blaue W drückst. Wähle Ansicht 1, gehe zu Symbolleiste 2 und
InkriT Starter - 1/7 -
InkriT Starter - 1/7 - Die InkriT Nutzeroberfläche(n) Der Plural in der Überschrift zeigt schon an : Es gibt 2 Nutzerzugänge/Nutzeroberflächen - 1 - Der Editorzugang Hier können die einzelnen Artikelinhalte
1. Einschränkung für Mac-User ohne Office 365. 2. Dokumente hochladen, teilen und bearbeiten
1. Einschränkung für Mac-User ohne Office 365 Mac-User ohne Office 365 müssen die Dateien herunterladen; sie können die Dateien nicht direkt öffnen und bearbeiten. Wenn die Datei heruntergeladen wurde,
Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10
CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...
Wie Sie mit Mastern arbeiten
Wie Sie mit Mastern arbeiten Was ist ein Master? Einer der großen Vorteile von EDV besteht darin, dass Ihnen der Rechner Arbeit abnimmt. Diesen Vorteil sollten sie nutzen, wo immer es geht. In PowerPoint
Webseite einfügen und bearbeiten
Webseite einfügen und bearbeiten Aufruf: Webseiten > Menu & Seiten > Webseite bearbeiten oder über Webseiten > neue Seite einfügen neue Seite einfügen Seitenvorlage auswählen Es stehen verschiedene Seitenvorlagen
Leitfaden zur ersten Nutzung der R FOM Portable-Version für Windows (Version 1.0)
Leitfaden zur ersten Nutzung der R FOM Portable-Version für Windows (Version 1.0) Peter Koos 03. Dezember 2015 0 Inhaltsverzeichnis 1 Voraussetzung... 3 2 Hintergrundinformationen... 3 2.1 Installationsarten...
Die Dateiablage Der Weg zur Dateiablage
Die Dateiablage In Ihrem Privatbereich haben Sie die Möglichkeit, Dateien verschiedener Formate abzulegen, zu sortieren, zu archivieren und in andere Dateiablagen der Plattform zu kopieren. In den Gruppen
WEBSEITEN ENTWICKELN MIT ASP.NET
jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm
Hilfe Bearbeitung von Rahmenleistungsverzeichnissen
Hilfe Bearbeitung von Rahmenleistungsverzeichnissen Allgemeine Hinweise Inhaltsverzeichnis 1 Allgemeine Hinweise... 3 1.1 Grundlagen...3 1.2 Erstellen und Bearbeiten eines Rahmen-Leistungsverzeichnisses...
Kommunikations-Management
Tutorial: Wie kann ich E-Mails schreiben? Im vorliegenden Tutorial lernen Sie, wie Sie in myfactory E-Mails schreiben können. In myfactory können Sie jederzeit schnell und einfach E-Mails verfassen egal
Web-Kürzel. Krishna Tateneni Yves Arrouye Deutsche Übersetzung: Stefan Winter
Krishna Tateneni Yves Arrouye Deutsche Übersetzung: Stefan Winter 2 Inhaltsverzeichnis 1 Web-Kürzel 4 1.1 Einführung.......................................... 4 1.2 Web-Kürzel.........................................
Einstellungen in MS-Word - Schnellzugriffsleiste -
- Schnellzugriffsleiste - Anpassen der Schnellzugriffsleiste Zusätzlich zum Menüband (Multifunktionsleiste) existiert eine Schnellzugriffsleiste die man sich selbst konfigurieren kann Schaltfläche "Office"
Seminar DWMX 2004. DW Session 004
Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der
Handbuch zur Anlage von Turnieren auf der NÖEV-Homepage
Handbuch zur Anlage von Turnieren auf der NÖEV-Homepage Inhaltsverzeichnis 1. Anmeldung... 2 1.1 Startbildschirm... 3 2. Die PDF-Dateien hochladen... 4 2.1 Neue PDF-Datei erstellen... 5 3. Obelix-Datei
Die Formatierungsregeln (die so genannte Wiki-Syntax) für Texte in DokuWiki sind zu großen Teilen die selben, wie in anderen Wiki-Systemen.
DokuWiki Kurzanleitung DokuWiki ein sehr einfach zu installierendes und anzuwendendes Wiki und bietet einige Funktionen, welche das Erstellen von Hypertexten, Dokumentationen und Präsentation von Projekten
Wie lege ich eine neue Standardseite an?
Online-Tutorials Referat VI.5 Internetdienste Wie lege ich eine neue Standardseite an? Legen Sie einen neuen Ordner an Klicken Sie den Ordner an, unter dem Sie die neue Standardseite anlegen möchten. Legen
Windows. Workshop Internet-Explorer: Arbeiten mit Favoriten, Teil 1
Workshop Internet-Explorer: Arbeiten mit Favoriten, Teil 1 Wenn der Name nicht gerade www.buch.de oder www.bmw.de heißt, sind Internetadressen oft schwer zu merken Deshalb ist es sinnvoll, die Adressen
16. Schriftart formatieren
16. Schriftart formatieren 16.1 Überblick Das Aussehen verbessern Bis jetzt haben Sie gesehen, dass das Dokument, welches Sie erstellt haben schlicht und simpel war. Sie können das Aussehen Ihres Dokuments
HTML5. Wie funktioniert HTML5? Tags: Attribute:
HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,
TYPO3-Schulung für Redakteure Stand: 12.5.2009
TYPO3-Schulung für Redakteure Stand: 12.5.2009 Um sich in TYPO3 einzuloggen, rufen Sie bitte im Internet die Seite http://www.vdi.de/typo3 auf, geben Sie dort Ihren Benutzernamen und Ihr Passwort ein und
Java Script für die Nutzung unseres Online-Bestellsystems
Es erreichen uns immer wieder Anfragen bzgl. Java Script in Bezug auf unser Online-Bestell-System und unser Homepage. Mit dieser Anleitung möchten wir Ihnen einige Informationen, und Erklärungen geben,
Speichern. Speichern unter
Speichern Speichern unter Speichern Auf einem PC wird ständig gespeichert. Von der Festplatte in den Arbeitspeicher und zurück Beim Download Beim Kopieren Beim Aufruf eines Programms Beim Löschen Beim
Barrierefreie Webseiten erstellen mit TYPO3
Barrierefreie Webseiten erstellen mit TYPO3 Alternativtexte Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder. In der Liste der HTML 4-Attribute
Content Management System (CMS) Manual
Content Management System (CMS) Manual Thema Seite Aufrufen des Content Management Systems (CMS) 2 Funktionen des CMS 3 Die Seitenverwaltung 4 Seite ändern/ Seite löschen Seiten hinzufügen 5 Seiten-Editor
Outlook. sysplus.ch outlook - mail-grundlagen Seite 1/8. Mail-Grundlagen. Posteingang
sysplus.ch outlook - mail-grundlagen Seite 1/8 Outlook Mail-Grundlagen Posteingang Es gibt verschiedene Möglichkeiten, um zum Posteingang zu gelangen. Man kann links im Outlook-Fenster auf die Schaltfläche
12. Dokumente Speichern und Drucken
12. Dokumente Speichern und Drucken 12.1 Überblick Wie oft sollte man sein Dokument speichern? Nachdem Sie ein Word Dokument erstellt oder bearbeitet haben, sollten Sie es immer speichern. Sie sollten
Stapelverarbeitung Teil 1
Stapelverarbeitung Teil 1 In jedem Unternehmen gibt es von Zeit zu Zeit Änderungen in Normen und Firmenstandards, an die aktuelle und bereits bestehende Zeichnungen angepasst werden müssen. Auch Fehler
3. GLIEDERUNG. Aufgabe:
3. GLIEDERUNG Aufgabe: In der Praxis ist es für einen Ausdruck, der nicht alle Detaildaten enthält, häufig notwendig, Zeilen oder Spalten einer Tabelle auszublenden. Auch eine übersichtlichere Darstellung
Anleitungen zum Einfügen eines Partnerlinks in Ihre Website
www.satnam.de Anleitungen zum Einfügen eines Partnerlinks in Ihre Website A. Mittels eines Content-Management-Systems (CMS) oder Weblogs Seiten 2-6 B. Mittels eines Homepagebaukastens, z.b. von 1&1 Seiten
Das Design: Themen und Varianten anwenden
Das Design: Themen und Varianten anwenden 1 a In Kapitel 1 haben Sie schon gesehen, wie einfach Sie in PowerPoint eine Designvorlage anwenden können. Lesen Sie hier, wie Sie aus noch mehr Vorlagen auswählen
Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Die grundlegende Zellformatierung... 2 Grundlagen... 2 Formatierungsmöglichkeiten... 2 Designs verwenden... 2 Grundsätzliche Vorgehensweise beim Formatieren von
Anleitung für den Euroweb-Newsletter
1. Die Anmeldung Begeben Sie sich auf der Euroweb Homepage (www.euroweb.de) in den Support-Bereich und wählen dort den Punkt Newsletter aus. Im Folgenden öffnet sich in dem Browserfenster die Seite, auf
Beispiel Shop-Eintrag Ladenlokal & Online-Shop im Verzeichnis www.wir-lieben-shops.de 1
Beispiel Shop-Eintrag Ladenlokal & Online-Shop. Als Händler haben Sie beim Shop-Verzeichnis wir-lieben-shops.de die Möglichkeit einen oder mehrere Shop- Einträge zu erstellen. Es gibt 3 verschiedene Typen
In diesem Tutorial lernen Sie, wie Sie einen Termin erfassen und verschiedene Einstellungen zu einem Termin vornehmen können.
Tutorial: Wie erfasse ich einen Termin? In diesem Tutorial lernen Sie, wie Sie einen Termin erfassen und verschiedene Einstellungen zu einem Termin vornehmen können. Neben den allgemeinen Angaben zu einem
Für die Verwendung des Wikis wird dringend der Microsoft Internet Explorer Version 7.0 empfohlen!
Sie finden das FH-Wiki unter der folgenden Adresse: http://wiki.fh-kehl.de:9454 Falls Sie Anregungen, Fragen oder Hinweise haben wenden Sie sich bitte an Herrn Fetterer oder Frau Prof. Dr. Schenk. Für
Novell Client. Anleitung. zur Verfügung gestellt durch: ZID Dezentrale Systeme. Februar 2015. ZID Dezentrale Systeme
Novell Client Anleitung zur Verfügung gestellt durch: ZID Dezentrale Systeme Februar 2015 Seite 2 von 8 Mit der Einführung von Windows 7 hat sich die Novell-Anmeldung sehr stark verändert. Der Novell Client
Um in das Administrationsmenü zu gelangen ruft Ihr Eure Seite auf mit dem Zusatz?mod=admin :
WebsoziCMS 2.8.9 Kurzanleitung Stand: 10.04.2008 Andreas Kesting Diese Kurzanleitung zum WebsoziCMS 2.8.9 beschränkt beschränkt sich auf die häufigsten Tätigkeiten beim Administrieren Eurer Homepage: -
Über die Internetseite www.cadwork.de Hier werden unter Download/aktuelle Versionen die verschiedenen Module als zip-dateien bereitgestellt.
Internet, Codes und Update ab Version 13 Um Ihnen einen möglichst schnellen Zugang zu den aktuellsten Programmversionen zu ermöglichen liegen Update-Dateien für Sie im Internet bereit. Es gibt drei Möglichkeiten
Version 1.0 Merkblätter
Version 1.0 Merkblätter Die wichtigsten CMS Prozesse zusammengefasst. Das Content Management System für Ihren Erfolg. Tabellen im Contrexx CMS einfügen Merkblatt I Tabellen dienen dazu, Texte oder Bilder
Logics App-Designer V3.1 Schnellstart
Logics App-Designer V3.1 Schnellstart Stand 2012-09-07 Logics Software GmbH Tel: +49/89/552404-0 Schwanthalerstraße 9 http://www.logics.de/apps D-80336 München mailto:apps@logics.de Inhalt Ihr Logics Zugang...
mehr funktionen, mehr e-commerce:
mehr funktionen, mehr e-commerce: xt:commerce plugin Search Tag Cloud xt:commerce Plugin search tag cloud Wonach suchen Ihre Kunden? Nicht nur für andere Nutzer ist es interessant, welche Artikel Ihre
Bilder zum Upload verkleinern
Seite 1 von 9 Bilder zum Upload verkleinern Teil 1: Maße der Bilder verändern Um Bilder in ihren Abmessungen zu verkleinern benutze ich die Freeware Irfan View. Die Software biete zwar noch einiges mehr
Grundlagen Word Eigene Symbolleisten. Eigene Symbolleisten in Word erstellen
Eigene Symbolleisten in Word erstellen Diese Anleitung beschreibt, wie man in Word eigene Symbolleisten erstellt und mit Schaltflächen füllt. Im zweiten Teil wird erklärt, wie man mit dem Makrorekorder
Öffnen Sie die Albelli Gestaltungssoftware
In 10 Schritten zu Ihrem ersten Fotobuch Anleitung Ab Windowsversion 7.4 1 Wählen Sie Ihre besten Fotos aus. Wenn Sie wissen, welche Fotos Sie verwenden möchten, speichern Sie sie am besten in einem Ordner
Bilder und Dokumente in MediaWiki
Dieses Handout soll erklären, wie Sie Dokumente hochladen können. Der Begriff Dokumente bezieht sich hier auf Word-Dokumente (*.doc), Acrobat-Dokumente (*.pdf), Excel-Tabellen (*.xls), Audiodateien (*.mp3),
Maturaarbeit: Formatieren mit Word 2010
Maturaarbeit: Formatieren mit Word 2010 Dieses Dokument zeigt, wie sich in Word 2010 Formatvorlagen, Fussnoten und ein Inhaltsverzeichnis erstellen lassen. Fussnoten Mit Word lassen sich sehr einfach Fussnoten
Wasserzeichen mit Paint-Shop-Pro 9 (geht auch mit den anderen Versionen. Allerdings könnten die Bezeichnungen und Ansichten etwas anders sein)
Wasserzeichen mit Paint-Shop-Pro 9 (geht auch mit den anderen Versionen. Allerdings könnten die Bezeichnungen und Ansichten etwas anders sein) Öffne ein neues Bild ca. 200 x 200, weiß (Datei - neu) Aktiviere
Microsoft Access 2013 Navigationsformular (Musterlösung)
Hochschulrechenzentrum Justus-Liebig-Universität Gießen Microsoft Access 2013 Navigationsformular (Musterlösung) Musterlösung zum Navigationsformular (Access 2013) Seite 1 von 5 Inhaltsverzeichnis Vorbemerkung...
Einfügen mit Hilfe des Assistenten: Um eine Seite hinzufügen zu können, müssen Sie nur mehr auf ein Symbol Stelle klicken.
2. SEITE ERSTELLEN 2.1 Seite hinzufügen Klicken Sie in der Navigationsleiste mit der rechten Maustaste auf das Symbol vor dem Seitentitel. Es öffnet sich ein neues Kontextmenü. Wenn Sie nun in diesem Kontextmenü
ECDL Europäischer Computer Führerschein. Jan Götzelmann. 1. Ausgabe, Juni 2014 ISBN 978-3-86249-544-3
ECDL Europäischer Computer Führerschein Jan Götzelmann 1. Ausgabe, Juni 2014 Modul Präsentation Advanced (mit Windows 8.1 und PowerPoint 2013) Syllabus 2.0 ISBN 978-3-86249-544-3 ECDLAM6-13-2 3 ECDL -
Erstellen eines Formulars
Seite 1 von 5 Word > Erstellen bestimmter Dokumente > Formen Erstellen von Formularen, die in Word ausgefüllt werden können Basierend auf einer Vorlage können Sie dieser Inhaltssteuerelemente und Hinweistext
Stellen Sie bitte den Cursor in die Spalte B2 und rufen die Funktion Sverweis auf. Es öffnet sich folgendes Dialogfenster
Es gibt in Excel unter anderem die so genannten Suchfunktionen / Matrixfunktionen Damit können Sie Werte innerhalb eines bestimmten Bereichs suchen. Als Beispiel möchte ich die Funktion Sverweis zeigen.