CSS-Tutorial. Grundlegende CSS-Kenntnisse
|
|
|
- Renate Tiedeman
- vor 8 Jahren
- Abrufe
Transkript
1 2008 CSS-Tutorial Grundlegende CSS-Kenntnisse Dieses Tutorial gibt Ihnen verschiedene CSS-Kenntnisse mit an die Hand, damit Sie Ihre Webseite ansprechend gestalten können. Webmasterparadies.de Vertraulich Jan Pionzewski Webmasterparadies.de
2 Inhaltsverzeichnis 1. Einleitung CSS einsetzen, und wie es funktioniert CSS-Syntax Die CSS-Syntax anwenden Methode 1: als Tag (In-document) Methode 2: Als Attribut (In-line) Methode 3: Extern (per Style Sheet) Mehrere Eigenschaften miteinander kombinieren Farben und Hintergründe Hintergrundfarbe Vordergrundfarbe (oder auch: Textfarbe) Hintergrundbilder Hintergrundbild-Wiederholung definieren Horizontale Wiederholung Vertikale Wiederholung Horizontale und vertikale Wiederholung Keine Wiederholung Fixierung des Hintergrundbildes Hintergrundbild fixieren Hintergrundbild nicht fixieren Positionierung eines Hintergrundbildes Textformatierung Schriftart auswählen Texte formatieren Text ausrichten Text einrücken Texte und Schriftarten formatieren Verweise (Links) gestalten Gruppierung von Elementen Gruppieren von Elementen in Klassen Einzelne Elemente hervorheben Webmasterparadies.de S e i t e 2
3 5.3 Weitere Gruppierungsmöglichkeiten Kästchenmodell Außenabstand verändern Innenabstand verändern Rahmen erstellen und verändern Das Floating-Modell Ein float-element definieren float stoppen Elemente auf der Webseite positionieren Absolute und relative Positionierung Ebenen definieren Anhang Wo sind die Bilder hin? Urheberrechtshinweis Webmasterparadies.de S e i t e 3
4 1. Einleitung Sie haben also Ihre erste Webseite ins Netz gestellt. Doch irgendwie wirkt alles ein wenig trocken und farblos. HTML bringt zwar von sich aus einige Gestaltungsmöglichkeiten für die Webseite mit sich, aber vieles lässt sich mit HTML auch wiederum nicht machen. Genau hier setzen die Cascading Style Sheets, oder auch CSS abgekürzt, an. Mit CSS ist sehr leicht, ihrer Webseite ein ansprechendes Layout zu verpassen. Jeder, der etwas mehr als nur eine ganz einfache, rein private Webseite möchte, kommt nicht um CSS herum. Dieses Tutorial wurde geschrieben, Ihnen einen Einblick in CSS und die Möglichkeiten, die sich damit eröffnen, zu verschaffen. Um mit CSS zu beginnen, sollten Sie sich bereits ein wenig mit HTML auskennen. Dazu können wir auch an dieser Stelle unser HTML-Tutorial empfehlen. Genau wie beim Erstellen von Webseiten brauchen Sie auch für CSS nur einen Texteditor und einen Browser, um sich das Ergebnis hinterher anzuschauen. Und nun wünsche ich Ihnen viel Spaß beim Lesen dieses Tutorials und beim Ausprobieren der Beispiele, die Sie in dieser Lektüre finden. Webmasterparadies.de S e i t e 4
5 2. CSS einsetzen, und wie es funktioniert CSS ist HTML gar nicht mal so unähnlich. Viele Eigenschaften von CSS gleichen denen von HTML. Doch gibt es auch einige Unterschiede, in der Anwendung zum Beispiel. In diesem Kapitel erkläre ich Ihnen, wie CSS angewandt wird. 2.1 CSS-Syntax Die CSS-Syntax wird in drei Teilen betrachtet und ist wie folgt aufgebaut: selector { eigenschaft: wert; Beachten Sie dabei bitte die Verwendung der spitz zulaufenden Klammern ([ALT Gr]+[7] bzw. [ALT Gr]+[0]) und auf das Semikolon am Ende jedes Wertes. body { background-color: lightblue; 2.2 Die CSS-Syntax anwenden Wie schon erwähnt, ist CSS ähnlich aufgebaut wie HTML. Dabei gibt es mehrere Möglichkeiten, CSS in Ihre Webseiten einzubauen: Methode 1: als Tag (In-document) Mit dem HTML-Tag <style> </style> lässt sich CSS auf das gesamte Dokument anwenden. <html> <head> <title>css In-document einbinden</title> <style type= text/css > body {background-color: lightblue; </style> </head> <body>... </body> </html> Mit diesem Beispiel wird eine Webseite erzeugt, die einen blauen Hintergrund hat. Wählen Sie statt des body-selectors beispielsweise den für einen Absatz (p), so würde diese Auswahl für das gesamte HTML-Dokument gelten. Webmasterparadies.de S e i t e 5
6 2.2.2 Methode 2: Als Attribut (In-line) Eine weitere Möglichkeit, CSS einzubinden, ist per Attribut. Dazu wird dem HTML-Tag die entsprechende CSS-Definition als Attribut hinzugefügt. <html> <head> <title>css In-line einbinden</title> </head> <body style= background-color: lightblue; >... </body> </html> Auch mit diesem Beispiel wird wieder eine Webseite mit einem hellblauen Hintergrund erzeugt. Der Unterschied bei dieser Methode ist, dass CSS hier als Attribut dem HTML-Tag hinzugefügt wird. So lassen sich beispielsweise für einzelne Absätze verschiedene Layouts definieren Methode 3: Extern (per Style Sheet) Die dritte Methode, CSS in Ihre Webseite zu bringen, ist per externes Style Sheet. Diese Methode hat den Vorteil, dass auf all Ihren HTML-Dokumenten dieses Style Sheet als Layout-Definition dienen kann, ohne dass Sie immer wieder einzelne Tags mit Attributen versehen, oder in jeden Kopf Ihr komplettes Style Sheet einfügen müssen. Das externe Verfahren ist auch jenes, welches wir Ihnen ans Herz legen möchten. Ein weiterer Vorteil ist nämlich, dass wenn Sie einmal Ihr Design verändern möchten, Sie nur die CSS- Datei anpassen brauchen. Schon ändert sich auf Ihrer kompletten Webseite das Layout. Ohne, dass Sie dafür dutzende Dateien bearbeiten bräuchten. Um die externe Methode anwenden zu können, müssen Sie eine neue Textdatei erstellen, die Sie mit der Dateiendung.css abspeichern. Diese CSS-Datei legen Sie einfach auf Ihren Webserver ab. In den HTML-Dokumenten muss nun auf dieses externe Style-Sheet verwiesen werden. <html> <head> <title>css per Style Sheet einbinden</title> <link rel= stylesheet type= text/css href= stylesheet.css /> </head> <body>... </body> </html> In der CSS-Datei selbst definieren Sie anschließend das Layout Ihrer Webseite in der In-document- Methode. Fortan werden alle Webseiten, die dieses Style Sheet als Vorlage benutzen, von dieser einen, zentralen Datei aus gesteuert, was das Layout angeht. Webmasterparadies.de S e i t e 6
7 2.3 Mehrere Eigenschaften miteinander kombinieren Selbstverständlich kann auch in CSS mehrere Eigenschaften eines selectors zusammen kombiniert werden. body { background-color: darkred; background-image: url( background.jpg ); background-repeat: no-repeat; body { background: darkred url( background.jpg ) no-repeat; Beide Beispiele zeigen das gleiche Prinzip: Verschiedene Eigenschaften werden unter einem selector (in diesem Fall: body) zusammengefasst. Im Endeffekt müssen Sie dabei selbst entscheiden, was Sie für sich übersichtlicher empfinden. Ich selbst präferiere das erste dieser Beispiele. Aber das ist Geschmackssache. Webmasterparadies.de S e i t e 7
8 3. Farben und Hintergründe Da Sie nun CSS anwenden können, möchten Sie sicherlich auch schnell die ersten Dinge ausprobieren. Neben dem Inhalt ist natürlich auch das Aussehen der Webseite wichtig. Was dabei als erstes Auffällt, sind die Farben der Webseite und die Hintergrundmotive. Deren Einsatz wollen wir nun gemeinsam betrachten. Bitte beachten Sie, dass ab hier alle CSS-Beispiele nur noch als CSS-Element angegeben werden, ohne HTML-Aufbau. Dieses CSS-Element können Sie so, wie es ist, in Ihre Webseite übernehmen. Entweder im In-line Verfahren oder, was ratsamer wäre, über ein externes Style Sheet. 3.1 Hintergrundfarbe Mit der Eigenschaft background-color: können Sie die Hintergrundfarbe eines Elementes bestimmen. body { background-color: lightblue; h1 { background-color: darkred; Mit diesen beiden Beispielen wird eine Webseite mit einem hellblauen Hintergrund und dunkelroter Hinterlegung der Überschriften angezeigt. 3.2 Vordergrundfarbe (oder auch: Textfarbe) Die Vordergrundfarbe in CSS wird mit der Eigenschaft color: definiert. h1 { color: darkred; h2 { color: red; h3 { color: lightred; In diesem Beispiel werden für die drei Überschrift-Arten verschiedene Farben definiert. Die Überschrift erster Ebene wird dabei dunkelrot, die Überschrift zweiter Ebene rot und die Überschrift dritter Ebene hellrot angezeigt. 3.3 Hintergrundbilder Um ein Hintergrundbild in Ihre Webseite einzufügen, müssen Sie die CSS-Eigenschaft backgroundimage: verwenden. Webmasterparadies.de S e i t e 8
9 body { background-image: url( image.jpg ); body { background-image: url(../grafiken/background.jpg ); body { background-image: url( ); Je nachdem, wo die Bilddatei, die Sie als Hintergrundbild verwenden möchten, abgelegt worden ist, können Sie entsprechend den Pfad oder die URL verwenden. Liegt die Datei im gleichen Verzeichnis wie die CSS-Datei, können Sie auch einfach nur den Namen der Grafik angeben. 3.4 Hintergrundbild-Wiederholung definieren CSS bietet gegenüber HTML viele verschiedene Möglichkeiten zur Wiederholung des Hintergrundbildes Horizontale Wiederholung Mit CSS ist es möglich, das Hintergrundbild nur horizontal wiederholen zu lassen. body { background-repeat: repeat-x; Vertikale Wiederholung Genau so ist es möglich, das Hintergrundbild nur vertikal zu wiederholen. body { background-repeat: repeat-y; Horizontale und vertikale Wiederholung Ähnlich wie in HTML, last sich natürlich auch ein Kacheleffekt erzeugen, indem das Hintergrundbild sowohl horizontal als auch vertikal wiederholt wird. body { background-repeat: repeat; Keine Wiederholung Selbstverständlich ist es mit CSS auch möglich, das Hintergrundbild nur einmal, ohne Wiederholung anzuzeigen. body { background-repeat: no-repeat; Webmasterparadies.de S e i t e 9
10 3.5 Fixierung des Hintergrundbildes Es ist auch möglich, das Bild zusammen mit dem Text scrollen zu lassen, oder es auf dem Hintergrund zu fixieren. Der Unterschied ist der, dass bei einer Fixierung im Hintergrund das Hintergrundbild an der vorgegebenen Stelle stehen bleibt, während der Besucher über die Seite scrollt. Ist das Bild nicht fixiert, scrollt es zusammen mit den restlichen Elementen nach oben Hintergrundbild fixieren Um das Hintergrundbild zu fixieren, also um es an der Stelle zu lassen, wo es steht muss folgende CSS-Eigenschaft verwendet werden. body { background-attachment: fixed; Hintergrundbild nicht fixieren Soll das Hintergrundbild zusammen mit der Seite scrollen, wird hingegen folgende CSS-Eigenschaft verwendet. body { background-attachment: scroll; 3.6 Positionierung eines Hintergrundbildes Etwas, was mit reinem HTML so nicht möglich ist, wird durch den Einsatz von CSS hingegen kinderleicht: Die Positionierung eines Hintergrundbildes. In der Standardeinstellung wird das Hintergrundbild im Browser links oben positioniert. Jedoch ist es auch möglich, mithilfe von CSS das Bild mittig oder rechts unten im Fenster darzustellen oder eben an jener Position, die Sie gerne hätten. Das funktioniert über den Tag background-position: body { background-position: 100px 200px; body { background-position: 100% 100%; body { background-position: bottom left; Die Angabe der Koordinaten kann dabei als fester Wert erfolgen (in Pixel oder Zentimeter), in Prozent oder mit festen Angaben in Worten. Dabei wird im ersten Wert die Position vom linken Bildschirmrand, im zweiten Wert die Position vom oberen Bildschirmrand angegeben. Für das erste Beispiel bedeutet dies, dass das Hintergrundbild 100 Pixel vom linken Bildschirmrand und 200 Pixel vom oberen Bildschirmrand entfernt ist. Im zweiten Beispiel hingegen ist das Bild sowohl 100% vom linken, als auch vom rechten Bildschirmrand entfernt (sprich: rechts unten). Das dritte Beispiel hingegen sagt, dass das Hintergrundbild unten links am Bildschirmrand positioniert sein soll. Webmasterparadies.de S e i t e 10
11 4. Textformatierung Im Gegensatz zu reinem HTML bietet CSS natürlich ebenso eine breite Palette zur Textformatierung an, ähnlich wie es bei Grafiken und Farben der Fall ist. In diesem Teil des Tutorials möchte ich Ihnen zeigen, was so alles mit dem Text angestellt werden kann. 4.1 Schriftart auswählen Schriftarten lassen sich in CSS recht einfach über die Eigenschaft font-family: auswählen. p { font-family: arial; h1 { font-family: verdana, arial, sans-serif; h2 { font-family: times new roman, serif; Diese drei Beispiele bewirken unterschiedliches. Das erste Beispiel wählt einfach die Schriftart Arial für alle Standard-Texte aus. Das zweite Beispiel hingegen wählt für alle Überschriften bevorzugt die Schriftart Verdana aus. Ist Verdana auf dem Rechner des Betrachters nicht verfügbar, wird die Schriftart Arial ausgewählt. Ist auch Arial nicht verfügbar, wird ein Zeichensatz aus den serifenlosen Schriften ausgewählt. Beispiel drei zeigt, dass für die Überschrift die Schriftart Times New Roman gelten soll. Schriftarten, die Leerzeichen enthalten, müssen dabei in Anführungszeichen stehen. Ist Times New Roman nicht verfügbar, würde in diesem Beispiel eine andere Schriftart mit Serifen genommen werden. 4.2 Texte formatieren CSS besitzt einige Möglichkeiten, die gewählten Schriftarten bzw. Texte zu formatieren Text ausrichten Mit der Eigenschaft text-align: lässt sich der Text grundlegend ausrichten. Ähnlich wie bei dem HTML-Attribut lässt sich mit text-align: der Text in CSS linksbündig, rechtsbündig, zentriert oder in Blockschrift ausrichten. p { text-align: right; p { text-align: left; p { text-align: center; p { text-align: justify; Webmasterparadies.de S e i t e 11
12 4.2.2 Text einrücken Mit CSS können Sie es sogar bewerkstelligen, dass Ihr Text in der ersten Zeile um einen bestimmten Wert eingerückt wird. p { text-indent: 20px; Mit diesem Beispiel würde jeder Text, der mit dem HTML-Tag <p> beginnt, um 20 Pixel eingerückt werden Texte und Schriftarten formatieren CSS bietet verschiedene Möglichkeiten, Texte hervorzuheben. Dazu gibt es zwei Eigenschaften zur Auswahl: text-decoration, font-style oder font-weight. h1 { font-style: italic; font-weight: bold; text-decoration: overline; Mit diesem Beispiel würde die Überschrift kursiv, fett und überstrichen (ja, man kann Text mit CSS auch überstreichen ) dargestellt werden. Zusammengefasst habe ich eine Liste mit möglichen Textformatierungen zusammengestellt: CSS-Eigenschaft text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink; font-style: italic; font-style: oblique; font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: 100, 200,, 900 font-weight: normal; font-variant: small-caps; font-size: xx-small; font-size: x-small; font-size: small; Erläuterung Unterstrichener Text Überstrichener Text Durchgestrichener Text Blinkender Text Kursiver Schriftstil Schräggesteller Schriftstil Fettgedruckt Extrafettgedruckt Dünngedruckt Druckstil extra dünn (100) bis extra fett (900) in 100er-Schritten normales Schriftgewicht Schriftvariante kapital (kleine Großbuchstaben) winzige Schriftgröße sehr kleine Schriftgröße kleine Schriftgröße Webmasterparadies.de S e i t e 12
13 font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: 1em; word-spacing: 0.5em; letter-spacing: 0.3em; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; mittlere Schriftgröße große Schriftgröße sehr große Schriftgröße riesige Schriftgröße Natürlich sind auch prozentuale, oder andere relative Angaben möglich, wie zum 1em wäre die vom Benutzer im Browser standardmäßig eingestellte Schriftgröße Wortabstand 0.5em Zeichenabstand 0.3em Hier sind auch feste Angaben wie px, oder mm möglich. Wortanfänge sind Großbuchstaben Nur Großbuchstaben Nur Kleinbuchstaben 4.3 Verweise (Links) gestalten Auch Links lassen sich mit CSS relativ einfach gestalten. In der folgenden Liste werden die Eigenschaften, die man verwenden kann, aufgelistet und erläutert. Prinzipiell kann man die Links nach seinen eigenen Vorstellungen mit den bereits bekannten Textformatierungen gestalten. Nach der Liste erhalten Sie ein Anwendungsbeispiel. CSS-Eigenschaft a:link a:visited a:focus a:hover a:active Erläuterung Verweis zu noch nicht besuchten Seiten Verweis zu bereits besuchten Seiten Link, der gerade den Fokus hat (z.b. beim Durchspringen der Links mit der Tabulator- Taste) Link, auf dem gerade der Mauszeiger ruht Gerade aktiver Link a:link { text-decoration: none; color: red; a:visited { text-decoration: none; color: red; a:focus { text-decoration: none; color: red; a:hover { text-decoration: underline; color: blue; text-transform: uppercase; a:active { text-decoration: underline; color: blue; text-transform: uppercase; Mit diesem Beispiel würde ein Link auf Ihrer Seite im Standardzustand nicht unterstrichen und in roter Farbe dargestellt werden. Das gilt dabei sowohl für bereits besuchte, als auch für noch nicht besuchte Seiten. Webmasterparadies.de S e i t e 13
14 Fährt der Benutzer jetzt aber mit dem Mauszeiger über den Link oder klickt ihn an, wird der Link unterstrichen und in blauer Farbe dargestellt. Dazu kommt, dass alle Buchstaben des Verweises in Großbuchstaben dargestellt werden. Wie Sie sehen, lassen sich links so prinzipiell sehr frei formatieren. Das funktioniert übrigens mit so manchen Eigenschaften auch für andere selectoren. Beispielsweise könnten Sie Tabellenzellen beim Überfahren des Mauszeigers mit der Eigenschaft td:hover mit einer anderen Hintergrundfarbe versehen. Ihrer Fantasie sind dabei keine Grenzen gesetzt. Webmasterparadies.de S e i t e 14
15 5. Gruppierung von Elementen Sie wollen bestimmte Textabschnitte besonders hervorheben? Sie wollen in Aufzählungslisten bestimmte Elemente extra kenntlich machen? Das ist mit CSS überhaupt kein Problem. Extra für solche Wünsche kann man mit CSS seine verschiedenen Elemente gruppieren. Dazu stehen die Eigenschaften class und id zur Verfügung. 5.1 Gruppieren von Elementen in Klassen Nehmen wir für dieses Beispiel an, dass Sie ein Fußball-Fan sein. Auf Ihrer Homepage erstellen Sie eine Liste mit verschiedenen Verweisen zu verschiedenen Vereinen. Jetzt möchten Sie, dass alle Links, die zum Verein Bayern-München verweisen, in rot dargestellt werden und alle Links, die zum Verein Schalke 04 verweisen, in blau dargestellt werden. Mit einer Klassendefinition ist dies überhaupt kein Problem. <p>bayern München</p> <ul> <li><a href= kader.htm class= bayern >Kader von Bayern München</a></li> <li><a href= statistik.htm class= bayern >Statistik des Clubs</a></li> <li><a href= tabelle.htm class= bayern >Tabellenplatzentwicklung</a></li> </ul> <p>schalke 04</p> <ul> <li><a href= kader.htm class= schalke >Kader von Schalke</a></li> <li><a href= statistik.htm class= schalke >Statistik des Clubs</a></li> <li><a href= tabelle.htm class= schalke >Tabellenplatzentwicklung</a></li> </ul> In unserer CSS-Datei müssen wir den Klassen nun noch die entsprechenden Eigenschaften zuweisen. a.bayern { color: red; a.schalke { color: blue; a { color: green; Mit diesem Beispiel würden alle Links, die die Klasse bayern enthalten, rot angezeigt werden, während alle Links, die die Klasse schalke enthalten, blau angezeigt würden. Da Sie in diesem Beispiel Werder Bremen-Fan sind, werden alle normalen Links natürlich grün angezeigt. 5.2 Einzelne Elemente hervorheben Wenn Sie hingegen auf Ihrer Seite nur ein einzelnes Element hervorheben möchten, müssen Sie die Eigenschaft id nutzen. Webmasterparadies.de S e i t e 15
16 <h1 id= css >CSS-Tutorial</h1> <h2 id= k1 >Kapitel 1</h2> <h2 id= k2 >Kapitel 2</h2> In der CSS-Datei müssen wir nun die ID entsprechend formatieren. #css { color: darkred; text-transform: uppercase; #k1 { color: darkblue; text-transform: lowercase; #k2 { color: yellow; text-transform: lowercase; Mit id ist es möglich, einzelne Elemente innerhalb Ihrer Webseite zu gestalten. Dabei kann jedes ID- Element nur einmal vorkommen. Der Einsatz dieser Eigenschaft ist dann sinnvoll, wenn Sie vereinzelt ein bestimmtes Element auf Ihrer Seite hervorheben oder anders gestalten möchten. 5.3 Weitere Gruppierungsmöglichkeiten Um nicht bestimmte Elemente von vornherein klassifizieren zu müssen, ist auch der Einsatz von <span> und <div> hilfreich. Diese beiden HTML-Tags fügen der Webseite nichts hinzu. So lassen sich einzelne Textpassagen oder ganze Listen einfach formatieren, ohne dass man dazu in der Webseite ein extra Element, wie z.b. eine Aufzählungsliste, anlegen müsste. <p><span class= red >Hervorhebungen</span> sind eine feine Sache, um dem Leser etwas <span class= red >deutlich</span> zu machen.</p> <div id= linksbuendig > <p>jedoch ist es natürlich auch möglich, komplette Bereiche, mit allem was dazugehört, auf einmal zu formatieren.</p> </div> <div id= rechtsbuendig > <p>oder man macht es halt ganz anders. Das ist einem völlig selbst überlassen.</p> </div> Die CSS-Datei sieht dabei dann wie folgt aus: span.red { color: red; font-weight: bold; #linksbuendig { text-align: left; #rechtsbuendig { text-align: right; <span> wird meistens dann eingesetzt, wenn es einzelne Dinge innerhalb eines Elementes zum Hervorheben gibt. <div> hingegen gebraucht man dann, wenn es komplette Elemente zum formatieren gibt. Mit Hilfe dieser beiden Tags lassen sich jedoch noch viel mehr Dinge anstellen. Doch dazu mehr in den kommenden Lektionen. Webmasterparadies.de S e i t e 16
17 6. Kästchenmodell CSS definiert ein Kästchenmodell, oder auch Box-Modell genannt, um die einzelnen HTML-Elemente herum. Dieses Modell besteht dabei aus mehreren Elementen, die ich nun näher erläutern möchte. Anzeigebeispiel: margin border padding Inhalt Diese Abbildung zeigt, dass jedes HTML-Element (hier als Inhalt gekennzeichnet) von verschiedenen Kästchen umgeben ist. CSS kann dabei jedes dieser Kästchen ansteuern und verändern, so dass sich individuelle und vielfältige Gestaltungsmöglichkeiten ergeben. Dabei ist es egal, was Sie verändern möchten. Sie können den Außenabstand (margin), die Ränder (border), Innenabstände (padding) und den Inhalt (content) frei gestalten. 6.1 Außenabstand verändern Der Außenabstand eines HTML-Elementes lässt sich mit dem Wert margin verändern. body { margin-top: 200px; margin-right: 100px; margin-left: 100px; margin-bottom: 200px; Wie Sie sehen können, besteht der Außenabstand aus vier Teilen: Oben, Unten, Links und Rechts. Jeder diese Werte lässt sich verändern. In diesem Beispiel würde die Webseite erst bei 200 Pixeln Webmasterparadies.de S e i t e 17
18 unter dem oberen Bildschirmrand beginnen, dabei zum linken und zum rechten Seitenrand jeweils 100 Pixel Abstand halten und nach unten noch einmal 200 Pixel Abstand haben. 6.2 Innenabstand verändern Auch die Innenabstände der Elemente lassen sich verändern. Dazu dient der Wert padding. td { background: lightblue; padding-top: 10px; padding-right: 120px; padding-left: 100px; padding-bottom: 10px; In diesem Beispiel würde alles, was in eine Tabellenzelle hineingeschrieben wird, 10 Pixel Abstand zum oberen Rand der Zelle haben, 120 Pixel Abstand zum rechten Rand, 100 Pixel zum linken Rand und noch einmal 10 Pixel zum unteren Rand halten. Dazu kommt, dass der Tabellenzellen- Hintergrund in hellblau dargestellt wird. 6.3 Rahmen erstellen und verändern Mit CSS ist es ein Leichtes, verschiedene Rahmen um einzelne HTML-Elemente herum zu bauen. h1 { border-style: dotted; border-color: red; border-width: thick; Mit diesem Beispiel werden alle Überschriften mit einem gepunkteten, dicken Rahmen versehen. Der Rahmen hat dabei eine rote Farbe. Weitere Anzeigemerkmale finden Sie in der folgenden Referenzliste: CSS-Eigenschaft border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; border-width: thin; Erläuterung Gepunkteter Rahmen Gestrichelter Rahmen Durchgezogener Rahmen Doppelter, durchgezogener Rahmen Schattenwurf nach oben 3D-Effekt Äußerer Schatten Innerer Schatten Dünner Rahmen Webmasterparadies.de S e i t e 18
19 border-width: medium; border-width: thick; border-top-color: blue; border-right-color: blue; border-left-color: blue; border-bottom-color; border-color: red blue green black; Mittelstarker Rahmen Dicker Rahmen Die Rahmenstärke lässt sich auch mit einer px- Angabe definieren. Obere Rahmenlinie ist blau Rechte Rahmenlinie ist blau Linke Rahmenlinie ist blau Untere Rahmenlinie ist blau Verkürzte Version der eben genannten Gestaltungsmöglichkeiten* Tipp: Ähnlich wie bei der border-color lässt sich auch für border-width und border-style die Angaben für die oberen, unteren, linken und rechten Rahmen separat definieren. So stehen einem viele verschiedene Gestaltungsmöglichkeiten zur Auswahl. * folgende Regeln sind bei dieser verkürzten Version zu beachten: Zwei Angaben: Drei Angaben: Vier Angaben: Die erste Angabe bestimmt den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für links und rechts. Die erste Angabe bestimmt den Rahmentyp für oben, die zweite den Rahmentyp für links und rechts und die dritte Angabe den Rahmentyp für unten. Die erste Angabe bestimmt den Rahmentyp für oben, die zweite für rechts, die dritte für unten und die vierte den Rahmentyp für links. Webmasterparadies.de S e i t e 19
20 7. Das Floating-Modell Sie kennen das aus einer Zeitung: Links oben im Artikel ist ein Bild abgedruckt. Rechts daneben beginnt der Text. Ist der Text länger, als das Bild hoch ist, wird der Text unter dem Bild fortgesetzt. Sie möchten ein solches Erscheinungsbild auch für Ihre Seiten einrichten? Mit CSS kein Problem. Die Eigenschaft float sorgt für einen Effekt, der genau so ist. 7.1 Ein float-element definieren <div id= floating > <img src= bild.jpg alt= Ein Bild > </div> In unserer CSS-Datei definieren wir nun die floating-box: #floating { float:left; width: 200px; Wenn wir dieses Beispiel benutzen, um den Text um unser Bild herum floaten zu lassen, ergibt sich dabei der Effekt, dass der Text sich rechts vom Bild befindet. Das hängt damit zusammen, dass wir das Bild als links floatend eingestuft haben, oder anders ausgedrückt: Das Bild befindet sich durch die Angabe float:left; auf der linken Bildschirmseite. Die Eigenschaft float kann entweder den Wert left oder den Wert right haben. 7.2 float stoppen Manchmal ist es auch sinnvoll, nur eine Überschrift neben einem floatenden Bild zu positionieren, den Text aber wieder unter das Bild zu stellen. Dazu muss die Eigenschaft clear benutzt werden. <div id= floating > <img src= bild.jpg alt= Ein Bild > </div> <h1>dies ist ein Beispielbild</h1> <p class= floatingstopp >Dieser Text wird wieder unter dem Bild dargestellt.</p> Unsere CSS-Datei ist dabei wie folgt aufgebaut: Webmasterparadies.de S e i t e 20
21 #floating { float: left; width: 200px;.floatingstopp { clear: both; Mit diesem Beispiel würde neben unserem Bild die Überschrift Dies ist ein Beispielbild erscheinen. Der Text hingegen wird nicht mehr neben dem Bild dargestellt, sondern unter dem Bild fortgesetzt. Die Eigenschaft clear kann folgende Werte haben: both, left oder right. Webmasterparadies.de S e i t e 21
22 8. Elemente auf der Webseite positionieren Ein weiterer, designtechnisch sehr nützlicher Vorteil von CSS ist, dass man Elemente frei auf der Webseite positionieren kann. Und das ist dabei noch nicht einmal schwer. Dabei kann man entweder eine absolute oder eine relative Positionierung wählen. Der Unterschied zwischen den beiden Möglichkeiten ist folgender: Die relative Positionierung wird von der eigentlichen Stelle des Elementes aus berechnet, an dem es auf die Seite gesetzt wurde. Das heißt, wenn Sie beispielsweise ein Bild links oben in die Ecke setzen und dann die Position des Bildes relativ bestimmen, bewegen Sie dieses Bild von seiner ursprünglichen Koordinate aus nach oben, unten, links oder rechts. Dabei wird ein kleiner Freiraum hinterlassen. Die Positionierung orientiert sich an der ursprünglichen Position des Elementes. Bei der absoluten Positionierung würde das Bild quasi auf die Seite drauf geworfen. Sie können es frei positionieren, ohne dass dabei eine Lücke hinterlassen wird. Die Positionierung orientiert sich also am Browserfenster. In beiden Versionen können dabei andere Webseiten-Elemente überlagert werden. 8.1 Absolute und relative Positionierung Beispiel absolute Positionierung: #bsp1 { position: absolute; top: 50px; left: 50px; #bsp2 { #bsp3 { #bsp4 { position: absolute; top: 50px; right: 50px; position: absolute; bottom: 50px; left: 50px; position: absolute; bottom: 50px; right: 50px; Unsere HTML-Datei könnte dann wie folgt aussehen: <div id="bsp1"><p>hallo von links oben</p></div> <div id="bsp2"><p>hallo von rechts oben</p></div> <div id="bsp3"><p>hallo links unten</p></div> <div id="bsp4"><p>hallo von rechts unten</p></div> Webmasterparadies.de S e i t e 22
23 Wenn wir dieses Beispiel so in unsere Webseite kopieren, erscheint in jeder Ecke der Webseite und zwar mit einem Abstand von 50 Pixeln zum jeweiligen Rand der im Beispiel genannte Text. Dieser Text überlagert dabei auch schon eventuell bereits vorhandene Elemente. Beispiel relative Positionierung: #bsp1 { position: relative; top: 50px; left: 50px; #bsp2 { #bsp3 { #bsp4 { position: relative; top: 50px; right: 50px; position: relative; bottom: 50px; left: 50px; position: relative; bottom: 50px; right: 50px; Benutzen wir nun eine relative Positionierung der Elemente, so würde sich, wenn wir das Beispiel von vorhin nehmen, der genannte Text um die angegebenen Werte von seiner ursprünglichen Position entfernen und dabei eine Lücke hinterlassen. Nehmen wir also an, der Text wäre Teil eines längeren Abschnittes. Verwenden wir nun dieses Beispiel, wird dabei der Text aus dem Beispiel vorhin aus dem Abschnitt herausgeschnitten und an die entsprechende andere Position wieder drauf geschmissen berechnet von seiner ursprünglichen Position aus. 8.2 Ebenen definieren Mit CSS kann man sogar in die dritte Dimension arbeiten: Die Tiefe. CSS beherrscht eine Ebenen- Funktion mit der sich die verschiedenen Elemente einer Webseite überlappen lassen können. Dabei ist es völlig egal, ob es sich um ein Bild, einen Text, eine Tabelle oder sonst irgendwas handelt. Webmasterparadies.de S e i t e 23
24 #ebene1 { position: absolute; left: 100px; top: 100px; z-index: 1; #ebene2 { position: absolute; left: 150px; top: 150px; z-index: 2; #ebene3 { position: absolute; left: 200px; top: 200px; z-index: 3; Unsere HTML-Datei sieht wie folgt aus: <div id="ebene1"><img src="04.jpg"></div> <div id="ebene2"><img src="04.jpg"></div> <div id="ebene3"><img src="04.jpg"></div> Das Bild 04.jpg wird in diesem Beispiel dreimal überlappt mit jeweils 50px Abstand mehr zur vorigen Ebene. Dabei zu beachten wäre, dass die Ebene mit dem höheren z-index-wert die Ebene mit dem niedrigeren z-index-wert überlappt. Webmasterparadies.de S e i t e 24
25 9. Anhang 9.1 Wo sind die Bilder hin? Wo sind die Bilder hin?, wird sich mit Sicherheit der ein oder andere Leser dieses Tutorials fragen. Die Antwort auf diese Frage ist relativ einfach: Es gibt keine. In diesem Tutorial wurde bewusst auf den Einsatz von Bildern verzichtet. Der Grund ist, dass es meiner Meinung nach mehr Spaß macht, die Codebeispiele selbst auszuprobieren, als alles vorgekaut zu bekommen. Außerdem kann man Anhand von Veränderungen in den Beispielen selbst schnell die Unterschiede feststellen. Das fördert den Aha -Effekt und regt zum Experimentieren an. Und experimentieren ist etwas, was man gerade beim Einstieg in CSS sehr häufig tun sollte. Dieses Tutorial soll kein Werk darstellen, dass Ihnen vorschreibt, was Sie zu tun und zu lassen haben. Ich möchte dazu anregen, selbst kreativ zu werden. Daher wurde auf den Einsatz von Bildern zur Veranschaulichung der Codebeispiele weitestgehend verzichtet. 9.2 Urheberrechtshinweis Dieses Tutorial unterliegt dem deutschen Urheberrecht. Die Vervielfältigung und Verbreitung dieses Tutorials ist ausdrücklich erwünscht. Eine Bearbeitung und/oder Änderung des Inhaltes hingegen, egal in welcher Form, bedarf der schriftlichen Zustimmung des Autors. So lange Satz, Layout und Inhalt nicht bearbeitet wurden, darf dieses Tutorial zu privaten, nichtkommerziellen Zwecken verbreitet und vervielfältigt werden. Ein Vertrieb dieses Tutorials gegen Entgelt ist untersagt. Eine Verbreitung dieses Tutorials als Teil einer kommerziellen Sammlung redaktioneller Inhalte (beispielsweise als Inhalt auf einer CD zu einer Zeitschrift) bedarf des schriftlichen Einverständnisses des Autors. Die Code-Beispiele, die in diesem Tutorial gezeigt werden, unterliegen dieser Regelung nicht. Die Code-Beispiele dürfen frei angewandt und verändert werden. Dies gilt wiederum nicht für beschreibende Texte wie Hinweise, Tipps und Erklärungen zu diesen Code-Beispielen. Wenn Ihnen dieses Tutorial so gut gefällt, dass Sie es anderen zur Verfügung stellen möchten, würden ich mich über eine entsprechende Mitteilung natürlich sehr freuen. Webmasterparadies.de S e i t e 25
Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana'
Die Liste ist keineswegs erschöpfend. Beschreibung Tags Schlüsselwort Werte Schriftart font-family: 'Arial','Helvetica','Tahoma','Verdana' serif = eine Schriftart mit Serifen,
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
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
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
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
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
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
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
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
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
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
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
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...
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
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute
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
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
Einfügen von Bildern innerhalb eines Beitrages
Version 1.2 Einfügen von Bildern innerhalb eines Beitrages Um eigene Bilder ins Forum einzufügen, gibt es zwei Möglichkeiten. 1.) Ein Bild vom eigenem PC wird auf den Webspace von Baue-die-Bismarck.de
Der Kalender im ipad
Der Kalender im ipad Wir haben im ipad, dem ipod Touch und dem iphone, sowie auf dem PC in der Cloud einen Kalender. Die App ist voreingestellt, man braucht sie nicht laden. So macht es das ipad leicht,
Erstellen einer Collage. Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu])
![Erstellen einer Collage. Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu])](/thumbs/29/13170670.jpg "Erstellen einer Collage. Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu])")
3.7 Erstellen einer Collage Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu]) Dann Größe des Dokuments festlegen beispielsweise A4 (weitere
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
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
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,
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
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung
Farb-, Text- und Schriftgestaltung mit CSS3
CT» LPE 05» 03 Textgestaltung» Hintergrundgestaltung Farb-, Text- und Schriftgestaltung mit CSS3 Eine HTML5-Datei ist reine Textdatei. In dieser Datei wird lediglich der Inhalt und die Stuktur einer Webseite
Herstellen von Symbolen mit Corel Draw ab Version 9
Herstellen von Symbolen mit Corel Draw ab Version 9 Einleitung : Icon Design-Überblick: 1) Gestalten in Corel Draw 10.0 3) Vorlage für Photopaint für Import von Corel 4) Einfügen in die PSD-Datei und Bearbeiten
Fotos verkleinern mit Paint
Fotos verkleinern mit Paint Warum Paint? Sicher, es gibt eine Menge kostenloser guter Programme und Möglichkeiten im Netz zum Verkleinern von Fotos. Letztendlich ist es Geschmackssache, aber meine Erfahrungen
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.
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
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
Erstellen einer GoTalk-Auflage
Erstellen einer GoTalk-Auflage 1. Bei dem Startbild Vorlage öffnen wählen 2. In dem folgenden Fenster Geräte Schablonen doppelt anklicken. - und schon öffnet sich der gesamte Katalog der verfügbaren Talker-Auflagen...eigentlich
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
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
Ein Bild in den Text einfügen
Bild in einen Artikel einfügen Ein Bild in den Text einfügen Positioniert den Cursor an der Stelle im Text, egal ob bei einem Artikel oder einer WordPress-Seite, wo das Bild eingefügt werden soll. Hinter
In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können.
Eine HTML-Seite mit blinden Tabellen strukturieren In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Legen Sie in ihrem
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
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
Lineargleichungssysteme: Additions-/ Subtraktionsverfahren
Lineargleichungssysteme: Additions-/ Subtraktionsverfahren W. Kippels 22. Februar 2014 Inhaltsverzeichnis 1 Einleitung 2 2 Lineargleichungssysteme zweiten Grades 2 3 Lineargleichungssysteme höheren als
Leichte-Sprache-Bilder
Leichte-Sprache-Bilder Reinhild Kassing Information - So geht es 1. Bilder gucken 2. anmelden für Probe-Bilder 3. Bilder bestellen 4. Rechnung bezahlen 5. Bilder runterladen 6. neue Bilder vorschlagen
Textverarbeitungsprogramm WORD
Textverarbeitungsprogramm WORD Es gibt verschiedene Textverarbeitungsprogramme, z. B. von Microsoft, von IBM, von Star und anderen Softwareherstellern, die alle mehr oder weniger dieselben Funktionen anbieten!
Satzhilfen Publisher Seite Einrichten
Satzhilfen Publisher Seite Einrichten Es gibt verschiedene Möglichkeiten die Seite einzurichten, wir fangen mit der normalen Version an, Seite einrichten auf Format A5 Wählen Sie zunächst Datei Seite einrichten,
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
Excel 2010 Kommentare einfügen
EX.015, Version 1.0 25.02.2014 Kurzanleitung Excel 2010 Kommentare einfügen Beim Arbeiten mit Tabellen sind Kommentare ein nützliches Hilfsmittel, sei es, um anderen Personen Hinweise zu Zellinhalten zu
Nicht kopieren. Der neue Report von: Stefan Ploberger. 1. Ausgabe 2003
Nicht kopieren Der neue Report von: Stefan Ploberger 1. Ausgabe 2003 Herausgeber: Verlag Ploberger & Partner 2003 by: Stefan Ploberger Verlag Ploberger & Partner, Postfach 11 46, D-82065 Baierbrunn Tel.
Eigene Formatvorlagen
TIPPS & TRICKS Eigene Formatvorlagen V 1.0 // Stand: Juli 2015 MS Word bietet Ihnen standardmäßig Vorlagen, mit denen Sie Textelemente formatieren können, etwa»überschrift 1«oder»Standard«. Diese Formatvorlagen
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
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...
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
1. So einfach ist der Excel-Bildschirm
1. So einfach ist der Excel-Bildschirm So sieht Excel aus, wenn ich es gestartet habe. Leider ist bei vielen Symbolen in der Menüleiste nicht auf den ersten Blick zu erkennen, welche Funktion sie übernehmen.
10.1 Auflösung, Drucken und Scannen
Um einige technische Erläuterungen kommen wir auch in diesem Buch nicht herum. Für Ihre Bildergebnisse sind diese technischen Zusammenhänge sehr wichtig, nehmen Sie sich also etwas Zeit und lesen Sie dieses
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
Eigenen Farbverlauf erstellen
Diese Serie ist an totale Neulinge gerichtet. Neu bei PhotoLine, evtl. sogar komplett neu, was Bildbearbeitung betrifft. So versuche ich, hier alles einfach zu halten. Ich habe sogar PhotoLine ein zweites
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
Erstellen eines HTML-Templates mit externer CSS-Datei
Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden
EINFACHES HAUSHALT- KASSABUCH
EINFACHES HAUSHALT- KASSABUCH Arbeiten mit Excel Wir erstellen ein einfaches Kassabuch zur Führung einer Haushalts- oder Portokasse Roland Liebing, im November 2012 Eine einfache Haushalt-Buchhaltung (Kassabuch)
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
Anleitung zur Daten zur Datensicherung und Datenrücksicherung. Datensicherung
Anleitung zur Daten zur Datensicherung und Datenrücksicherung Datensicherung Es gibt drei Möglichkeiten der Datensicherung. Zwei davon sind in Ges eingebaut, die dritte ist eine manuelle Möglichkeit. In
Installationsanleitung jk-ma011-1-hotel
Installationsanleitung jk-ma011-1-hotel Vielen Dank für den Kauf des Contao-Templates jk-ma011-1-hotel. Hier ein paar Hinweise, die Ihnen bei der Installation des themes helfen sollen. Ganz WICHTIG: Installieren
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
Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst.
Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst. Bevor es losgeht Wenn du mal etwas falsch machst ist das in Word eigentlich kein Problem! Den Rückgängig-Pfeil (siehe
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
Eine kleine Anleitung zum Kurs Homepage selbst erstellen
Eine kleine Anleitung zum Kurs Homepage selbst erstellen Mag. Erwin Atzl www.mobiler-edvtrainer.at gültig für Windows XP, (nicht für Vista und Windows7) Den NVU-HTML- Editor habe ich mir kostenlos von
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) CSS sind eine unmittelbare Ergänzung zu HTML. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Es ist eine Sprache zur Formatierung
Erklärung zu den Internet-Seiten von www.bmas.de
Erklärung zu den Internet-Seiten von www.bmas.de Herzlich willkommen! Sie sind auf der Internet-Seite vom Bundes-Ministerium für Arbeit und Soziales. Die Abkürzung ist: BMAS. Darum heißt die Seite auch
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
Flyer, Sharepics usw. mit LibreOffice oder OpenOffice erstellen
Flyer, Sharepics usw. mit LibreOffice oder OpenOffice erstellen Wir wollen, dass ihr einfach für eure Ideen und Vorschläge werben könnt. Egal ob in ausgedruckten Flyern, oder in sozialen Netzwerken und
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
Das TYPOlight CSS-Framework
Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung
Allgemeiner Leitfaden zum Einfügen suchmaschinenoptimierter Texte
Allgemeiner Leitfaden zum Einfügen suchmaschinenoptimierter Texte Wir von Textprovider, Anbieter von produktbeschreibung.eu möchten Ihnen mit diesem Infoblatt Basisinformationen an die Hand geben, wie
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.
Fusszeile mit Datumsfeld und Dateiname
Fusszeile mit Datumsfeld und Dateiname Für innerbetriebliche Rundschreiben kann es nützlich sein, in der Fusszeile den Namen der Autorin bzw. des Autors und das Datum mit der Uhrzeit als Feld einzufügen.
Serienbrieferstellung in Word mit Kunden-Datenimport aus Excel
Sehr vielen Mitarbeitern fällt es schwer, Serienbriefe an Kunden zu verschicken, wenn sie die Serienbrieffunktion von Word nicht beherrschen. Wenn die Kunden mit Excel verwaltet werden, genügen nur ein
geben. Die Wahrscheinlichkeit von 100% ist hier demnach nur der Gehen wir einmal davon aus, dass die von uns angenommenen
geben. Die Wahrscheinlichkeit von 100% ist hier demnach nur der Vollständigkeit halber aufgeführt. Gehen wir einmal davon aus, dass die von uns angenommenen 70% im Beispiel exakt berechnet sind. Was würde
Sich einen eigenen Blog anzulegen, ist gar nicht so schwer. Es gibt verschiedene Anbieter. www.blogger.com ist einer davon.
www.blogger.com Sich einen eigenen Blog anzulegen, ist gar nicht so schwer. Es gibt verschiedene Anbieter. www.blogger.com ist einer davon. Sie müssen sich dort nur ein Konto anlegen. Dafür gehen Sie auf
Webdesign mit (X)HTML und CSS
Webdesign mit (X)HTML und CSS Das Praxisbuch zum Einsteigen, Auffrischen und Vertiefen Deutsche Ausgabe der 3. englischen Auflage Jennifer Niederst Robbins Übersetzung von Kathrin Lichtenberg O'REILLY*
Tutorial Speichern. Jacqueline Roos - Riedstrasse 14, 8908 Hedingen, 044 760 22 41 jroos@hispeed.ch - www.forums9.ch
Jacqueline Roos - Riedstrasse 14, 8908 Hedingen, 044 760 22 41 jroos@hispeed.ch - www.forums9.ch Tutorial Speichern Wer ein Fotobuch zusammenstellen möchte, der sucht oft auf dem ganzen Computer und diversen
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
Dossier: Rechnungen und Lieferscheine in Word
www.sekretaerinnen-service.de Dossier: Rechnungen und Lieferscheine in Word Es muss nicht immer Excel sein Wenn Sie eine Vorlage für eine Rechnung oder einen Lieferschein erstellen möchten, brauchen Sie
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
.htaccess HOWTO. zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage
.htaccess HOWTO zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage Stand: 21.06.2015 Inhaltsverzeichnis 1. Vorwort...3 2. Verwendung...4 2.1 Allgemeines...4 2.1 Das Aussehen der.htaccess
In dieser Anleitung möchten wir Ihnen einen kurzen Überblick über die grundlegenden Funktionen und Möglichkeiten des Wiki in Stud.IP bieten.
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 Veranstaltung
Wir lernen PowerPoint - Grundkurs Grußkarten erstellen
Wir lernen PowerPoint - Grundkurs Grußkarten erstellen Inhalt der Anleitung Seite 1. Geburtstagskarte erstellen 2 6 2. Einladung erstellen 7 1 1. Geburtstagskarte erstellen a) Wir öffnen PowerPoint und
Beschreibung E-Mail Regeln z.b. Abwesenheitsmeldung und Weiterleitung
Outlook Weiterleitungen & Abwesenheitsmeldungen Seite 1 von 6 Beschreibung E-Mail Regeln z.b. Abwesenheitsmeldung und Weiterleitung Erstellt: Quelle: 3.12.09/MM \\rsiag-s3aad\install\vnc\email Weiterleitung
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
Kapitel 16 Seite 1. Mit Wikispaces eine Homepage erstellen. Die eigene Homepage mit Wikispaces. http://www.wikispaces.com
Kapitel 16 Seite 1 Die eigene Homepage mit Wikispaces Hinweise zum Einsatz von Wikis im Unterricht finden Sie im Buch: Mit Web 2.0 das Internet aktiv mitgestalten Wikis im Berufsalltag 32 Ein Wiki im beruflichen
Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte
Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13
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
Word 2010 Grafiken exakt positionieren
WO.009, Version 1.2 10.11.2014 Kurzanleitung Word 2010 Grafiken exakt positionieren Wenn Sie eine Grafik in ein Word-Dokument einfügen, wird sie in die Textebene gesetzt, sie verhält sich also wie ein
Was man mit dem Computer alles machen kann
Was man mit dem Computer alles machen kann Wie komme ich ins Internet? Wenn Sie einen Computer zu Hause haben. Wenn Sie das Internet benutzen möchten, dann brauchen Sie ein eigenes Programm dafür. Dieses
Microsoft Access 2010 Navigationsformular (Musterlösung)
Hochschulrechenzentrum Justus-Liebig-Universität Gießen Microsoft Access 2010 Navigationsformular (Musterlösung) Musterlösung zum Navigationsformular (Access 2010) Seite 1 von 5 Inhaltsverzeichnis Vorbemerkung...
Berechnungen in Access Teil I
in Access Teil I Viele Daten müssen in eine Datenbank nicht eingetragen werden, weil sie sich aus anderen Daten berechnen lassen. Zum Beispiel lässt sich die Mehrwertsteuer oder der Bruttopreis in einer
Schrittweise Anleitung zur Erstellung einer Angebotseite 1. In Ihrem Dashboard klicken Sie auf Neu anlegen, um eine neue Seite zu erstellen.
Schrittweise Anleitung zur Erstellung einer Angebotseite 1. In Ihrem Dashboard klicken Sie auf Neu anlegen, um eine neue Seite zu erstellen. Klicken Sie auf Neu anlegen, um Ihre neue Angebotseite zu erstellen..
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
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...
Die Beschreibung bezieht sich auf die Version Dreamweaver 4.0. In der Version MX ist die Sitedefinition leicht geändert worden.
In einer Website haben Seiten oft das gleiche Layout. Speziell beim Einsatz von Tabellen, in denen die Navigation auf der linken oder rechten Seite, oben oder unten eingesetzt wird. Diese Anteile der Website
Informationen zu den regionalen Startseiten
Informationen zu den regionalen Startseiten Inhaltsverzeichnis Informationen zu den regionalen Startseiten 1 1. Grundlegende Regeln 2 1.1. Was wird angezeigt? 2 1.2. Generelle Anzeigeregeln 2 2. Anpassbare
Handbuch Fischertechnik-Einzelteiltabelle V3.7.3
Handbuch Fischertechnik-Einzelteiltabelle V3.7.3 von Markus Mack Stand: Samstag, 17. April 2004 Inhaltsverzeichnis 1. Systemvorraussetzungen...3 2. Installation und Start...3 3. Anpassen der Tabelle...3
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