Einführungskurs HTML-CSS mit Buch

Größe: px
Ab Seite anzeigen:

Download "Einführungskurs HTML-CSS mit Buch"

Transkript

1 Einführungskurs HTML-CSS mit Buch Von Stand: Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige CSS-Attribute Blatt6: Übung3: Webseite nach Vorgabe Blatt7: Provider & Co. Blatt8: Randgebiete Blatt9: Übung5: Einfache Website nach Vorgabe Legende o Im Skript werden Datei- und Verzeichnisnamen klein, ohne Leerzeichen und ohne Umlaute geschrieben. o Im Skript werden Menüführungen und Bedienungsabläufe mit Schrägstrich (Slash) dargestellt. Auswahlmöglichkeiten werden kleingeschrieben. Beispiel: Datei/ Öffnen/ datei auswählen o Windows-Pfade müssen mit Backslash geschrieben werden. Beispiel: c:\uebung1\bilder\2013 o Pfade in HTML und CSS oder beim Provider müssen mit Slash geschrieben werden. Beispiel: img src= bilder/2010/foto.jpg

2

3 Blatt1 Grundlegendes Webseiten: HTML: CSS: Editor: Browser: Website, Webseiten, Homepage Hypertext Markup Language besteht aus HTML-Elementen, HTML-Attributen, Sonderzeichen Cascading Style Sheets besteht aus CSS-Attributen z.b. Phase5 z.b. Internet Explorer Wichtige HMTL-Elemente (gruppiert) Textobjekt HTML-Elemente Technische Elemente html, head, body, link, style Dokument-Titel title Text h1-h6, p, br, strong, em, hr Bild img Link a Liste ul, ol, li Tabelle table, tr, td Sonderzeichen... Wichtige CSS-Attribute (gruppiert) Eigenschaften zu CSS-Attribute Hintergrund background-image, background-repeat, background-attachment Schrift font-family, font-size Farbe color, background-color Text text-align, font-weight, font-style, text-decoration Abstände, Rahmen, Höhe, Breite margin, padding, border height, width Liste list-style-type, list-style-image, list-style-position Link a:link, a:visited, a:hover

4 Software einrichten Kursdateien Das Kursverzeichnis auf den Teilnehmer-PC z.b. unter Eigene Dateien kopieren. Phase5 (Version5.6) Popup-Windows ausschalten: Projekt/ Einstellungen/ Optionen HTML/ Haken entfernen bei Benutzer-Tags, Attribute nach, End-Tag Zeilenumbruch erzwingen: Einstellungen/ Editor Einstellungen/ Editor / Haken setzen bei Zeilenumbruch, Zeilenumbruch am rechten Rand Keine Dateien bei Programmstart: Einstellungen/ Phase5 Programmstart/ Keine Datei laden Dateimanager ausblenden: Ansicht/ Dateimanager automatisch ausblenden Farbpalette anzeigen: Ansicht/ Farbpalette anzeigen Internet Explorer Anzeige aktualisieren: F5-Taste Menüleiste anzeigen: im Menübereich rechte Maustaste klicken/ Menüleiste Schriftgröße ändern: STRG-Taste und Mausrad bewegen Quelltext einsehen: Ansicht/ Quelle Zwei Arten eine Datei zu öffnen Innerhalb der Anwendung: Datei/ Öffnen/ datei auswählen/ Öffnen Im Windows-Explorer: datei markieren/ Rechte Maustaste klicken/ Öffnen mit/ programm auswählen, wenn Programm nicht in Liste: Durchsuchen/ ok

5 Blatt2 Link-Arten 1. Externer Link auf andere Website <a href= > linktext <a> 2. Link in neuem Browserfenster öffnen <a href= target= _blank > linktext <a> 3. Link auf Datei <a href= dokument.pdf > linktext <a> 4. Bild verlinken <a href= > <img src= foto.jpg /> <a> 5. Interner Link innerhalb der Webseite Beispiel1: Sprung zum Seitenanfang Anker am Seitenanfang: <a name= anker1 ></a> Link am Seitenende: <a href= #anker1 > zum Seitenanfang </a> Beispiel2: Inhaltsverzeichnis <a href= #anker1 > Punkt1 </a> <a href= #anker2 > Punkt2 </a> <a href= #anker3 > Punkt3 </a> <a name= anker1 ></a> lorem ipsum <a name= anker2 ></a> lorem ipsum <a name= anker3 ></a> lorem ipsum 6. Interner Link auf eigene Website <a href= vita.html > linktext <a> 7. Link ohne Auswirkung <a href= # > linktext </a>

6

7 Blatt3 Wichtige HTML-Elemente Objekt HTML-Element HTML-Attribute/ Bemerkungen Gesamtdokument <html> </html> Dokument-Kopf <head> </head> Dokument-Titel <title> </title> Titel wird in Browser-Lasche angezeigt Dokument-Körper <body> </body> Technische Objekte <meta /> <link /> <style> </style> Meta: Metadaten für Suchmaschinen Link: Link zu externer CSS-Datei Style: interne CSS-Attribute Überschrift <h1> </h1> bis h steht für header <h6> </h6> Absatz <p> </p> p steht für paragraph Zeilenumbruch <br /> Inline-Element br steht für break Fett <strong> </strong> unterschiedliche Darstellung in Ausgabemedien Inline-Element Kursiv <em> </em> unterschiedliche Darstellung in Ausgabemedien Inline-Element em steht für emphasize Linie <hr /> hr steht für horizontal rule Bild <img /> src für Pfad und Bildname alt für Alternativtext title für Tooltipp-Text width für Breite in Pixel height für Höhe in Pixel Inline-Element img steht für image Link <a> </a> href für Verweis auf Internetadresse oder Datei target= _blank für neues Browserfenster title für Tooltipp-Text name für Ankername bei Skiplink Anker: <a name= anker1 > </a> Link: <a href= #anker1 > linktext </a> Link ohne Auswirkung: <a href= # > linktext </a> Inline-Element a steht für anchor ungeordnete Liste <ul> </ul> <li> </li> ul steht für unordered list li steht für listelement geordnete Liste <ol> </ol> <li> </li> start für numerischen Startwert ol steht für ordered list li steht für listelement Tabelle Tabellen-Zeile Tabellen-Zelle <table> </table> <tr> </tr> <td> </td> tr steht für table row td steht für table definition <span> </span> Inline-Element ohne vordefinierte Eigenschaften <div> </div> Block-Element ohne vordefinierte Eigenschaften Sonderzeichen " geschütztes Leerzeichen (non breakable space) Anführungszeichen Eurozeichen Copyrightzeichen Kommentar <!-- --> Kommentare werden nicht angezeigt

8

9 Blatt4 Einführung CSS Wo kann CSS definiert werden? Am HTML-Element.... <p style= color: red; > text </p> Im Head der HTML-Datei..... <style type= text/css > p {color: red;} </style> In externer CSS-Datei.. Link im Head der HTML-Datei notwendig <link href= datei.css rel= stylesheet type= text/css /> Regel: je näher am HTML-Element definiert, desto relevanter Mögliche Selektoren Selektor Anwendungsbeispiel Einfache Selektoren CSS: h1 {color: green;} HTML: <h1> überschrift </h1> Klassenselektoren Benutzt für die unterschiedliche Darstellung eines HTML-Elements. Beispiel: h1-überschrift soll grün und blau dargestellt werden. gebundene Klasse CSS: h1.blau {color: blue;} HTML: <h1 class= blau > überschrift </h1> ungebundene Klasse CSS:.blau {color: blue;} HTML: <h1 class= blau > überschrift </h1> <p class= blau > absatz </p> Pseudoklassen-Selektoren Benutzt bei HTML-Element A. Besonderheiten: o vorgegebene Klassennamen o Doppelpunkt bei Definition o Im HTML-Element nicht erwähnt o Reihenfolge wichtig ID-Selektoren Dürfen nur einmal auf einer Webseite verwendet werden. Oft benutzt für Container im Seitenlayout. CSS: HTML: CSS: HTML: a:link {color: red;} a:visited {color: blue;} a:hover {color: yellow;} a:active {color: silver;} <a href= > linktext </a> #header {background-color: yellow;} <div id= header > </div> Universal-Selektor Wirkt auf alle HTML-Elemente. Wird oft für das Zurücksetzen von Abständen benutzt. CSS: * {margin: 0; padding: 0;}

10

11 Blatt5 Wichtige CSS-Attribute Eigenschaft CSS-Attribut Wert/ Einheit/ Beispiel Bedeutung Schriftart font-family Wert: arial, helvetica, sans-serif, serif Empfehlung: serifenlose Schrift Schriftgröße font-size Einheit: pt, px, %, em, px Empfehlung: pt Vordergrundfarbe color Wert: englisch oder hexadecimal. Bsp: red oder #ff0000 Hintergrundfarbe background-color Wert: englisch oder hexadecimal. Bsp: red oder #ff0000 pt = point (fixe Größe) px = Pixel (fixe Größe) % = % des Eltern-Elements em = em mal des Eltern-Elements Ausrichtung text-align Wert: left, right, center, justify links, rechts, zentriert, Blocksatz Fett font-weight Wert: bold, normal fett, nicht fett Kursiv font-style Wert: italic, oblique, normal kursiv, schräggestellt, nicht kursiv Unterstreichung text-decoration Wert: underline, none unterstrichen, nicht unterstrichen Hintergrundbild- Einbindung Hintergrundbild- Wiederholung Hintergrundbild- Fixierung Hintergrundbild- Positionierung backgroundimage backgroundrepeat backgroundattachment backgroundposition Wert: url Bsp: background-image: url(bild.gif); repeat, no-repeat, repeat-x, repeat-y Wert: fixed, scroll Wert: left, right, top, bottom, center, px Bsp: background-position: 100px 10px; Wiederholung, keine, horizontale, vertikale fixiert, Bildlauf links, rechts, oben, unten, zentriert, in Pixel Bsp: 100 Pixel von links, 10 Pixel von oben Außenabstand Innenabstand Rahmen margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-width border-style border-color Breite width Einheit: px, % Höhe height Einheit: px, % Einheit: px Kurzschreibweisen: margin: 10px 20px 30px 40px; margin: 10px 20px; margin: 10px; Wert: auto Bsp: margin: 10px auto; Einheit: px Kurzschreibweisen: padding: 10px 20px 30px 40px; padding: 10px 20px; padding: 10px; Einheit: px Einheit: px Wert: solid, dotted, none s.o. Kurzschreibweise: border: 1px solid black; top, right, bottom, left top+bottom, left+right top+right+bottom+left auto für horizontales Zentrieren top, right, bottom, left top+bottom, left+right top+right+bottom+left durchgezogen, gepunktet, kein Rahmen Aufzählzeichen ul list-style-type Wert: disc, circle, square, none Punkt, Kreis, Quadrat, nichts Aufzählzeichen ol list-style-type Wert: decimal, lower-alpha, upperalpha, lower-roman, upper-roman Zahl, Kleinbst, Großbst, kleine röm. Zahl, große röm. Zahl Aufzählzeichen list-style-image Wert: url

12 ist Grafik Bsp: list-style-image: url(bild.jpg); Texteinzug in Listen list-style-position Wert: outside, inside Aufzählzeichen außerhalb, innerhalb Textausrichtung in Tabellenzelle vertical-align Wert: top, middle, bottom Bsp: td {vertical-align: top;} oben, mittig, unten Link-Eigenschaften a:link a:visited a:hover a:active normaler Link besuchter Link mit Maus überfahrener Link gerade aktivierter Link Objektfluss des HTML-Elements float Wert: left, right Flussrichtung links, rechts. U.a. für Ausrichtung von Bildern. Objektfluss abbrechen clear Wert: both erzwingt Fortsetzung unterhalb des vorherigen Objekts Blockeigenschaft display Wert: block, inline Absatz, Fließtext HTML-Element Kommentar /* */ Kommentare nicht angezeigt

13 Blatt6 Übung3: Webseite nach Vorgabe Idee Berufsbeschreibung einer Floristin auf einer Webseite im Internet. Gestaltung mit HTML und internem CSS. Alle benötigten Dateien liegen unstrukturiert vor: o floristin.jpg o blindtext.pdf o html-gerüst-klein.html o weitere-infos.pdf Vorgehen Stammverzeichnis organisieren. html-gerüst-klein.html in index.html umbenennen. Je Abschnitt HTML-Elemente und dann CSS-Attribute erfassen. Vorgaben Die ganze Seite linksbündig ausrichten. Schriftgröße: 13pt. Hintergrundfarbe der Seite ist gelb. Einrückungen rechts, links vornehmen. Optional: H1-Überschriften in unterschiedlichen Farben. Seiteninhalt: Überschrift1: Was macht man in diesem Beruf? Überschrift2: Wo arbeitet man? Überschrift3: Was verdient man? Überschrift4: Weitere Informationen Link: zum Seitenanfang Ergebnis Überschrift1 Überschrift2 Überschrift3 Überschrift4

14

15 Blatt7 Provider & Co. Erläuterungen o Begriffe: Domain, Subdomain, Stammverzeichnis o Providersuche: googlen, allinkl-startseite o Login-Bereich beim Provider: Bereiche Domain, Subdomain, FTP o Filezilla: Funktionsweise und Dateien beim Provider anschauen Empfehlung: Bei mehreren Webseiten mit Subdomains arbeiten Übung4: Website online stellen o Einfache Website mit Filezilla hochladen o Subdomain beim Provider anlegen und mit Stammverzeichnis verbinden o Website mit Subdomain aufrufen

16

17 Blatt8 Randgebiete Bildbearbeitung JPEG o Geeignet für Fotos und Farbverläufe o 16 Mio Farben o Komprimierung mit Verlusten GIF o Geeignet für Grafiken, Text, wenigfarbige Bilder o 256 Farben o Verlustfreie Komprimierung o Transparenz möglich o Animation möglich Gebräuchliche Funktionen o Bilder komprimieren bzw. fürs Web speichern o Bildgröße anpassen o Bilder ausschneiden o Objekte freistellen o Farbermittlung o Farbverläufe o Hintergrund transparent machen SEO (Search Engine Optimization) Ziel: Website soll weit vorne bei Suchergebnissen platziert werden. Wichtige Begriffe: Suchwörter, Pagerank, Metatags, Backlinks, Linkkampagne Vorgehen bei Website-Erstellung o SEO von Anfang an berücksichtigen o Suchwörter finden o Konkurrenzseiten anschauen o Suchwörter verwenden in: Domain, Startseite, Head-Title, H1-Überschriften, Navigation, im Title-Attribut bei href, img o 4% des Seiteninhalts sollen Suchwörter sein Was wertet eine Website auf? o Die Startseite ist die wichtigste Seite für SEO o Backlinks auf anderen Seiten setzen: Stadtwiki, Linktausch, Foren, Blogs o Website regelmäßig aktualisieren o SEO ist ein langfristiger Prozess

18 o Metatags haben keine Bedeutung mehr (außer description) o SEO Cheat-Sheet: o Anmeldung der Website bei Google: Wichtige Adressen o HTML-Referenz auf deutsch: o CSS-Referenz auf deutsch: o HTML-Validator: o CSS-Validator: o Beispiele für CSS-Gestaltung: Nützliche Tools o Farbwähler: o Browsershots: o Impressumsassistent: Kostenloses Gästebuch: o Kostenloser Counter: o Slimbox für Fotogalerie: o Kostenloses Fotoarchiv: Empfohlene Literatur o Little Boxes 0, I und II, Peter Müller, Markt+Technik o Der CSS-Problemlöser, Rachel Andrew, dpunkt o Gelungenes Webdesign, Jason Beaird, dpunkt o Homepages mit HTML und CSS, Johann-Christian Hanke, Knowware o HTML Spielend gelingt die Website, Tobias Hauser, Markt+Technik

19 Blatt9 Übung5: Einfache Website nach Vorgabe Idee Es soll eine Website bestehend aus 3 Webseiten erstellt werden (siehe Grafik). Titel und Menüpunkte: Meine Homepage, Meine Familie, Meine Hobbies. Eine Verzeichnisstruktur mit Bildern liegt vor. Es soll eine externe CSS-Datei verwendet werden. index.html familie.html hobbies.html Vorgehen Schritt1: 3 HTML-Dateien und 1 CSS-Datei erstellen und mit Link-Element verbinden Schritt2: allgemeingültige Attribute in CSS-Datei definieren Schritt3: Menü in index.html erstellen. In restliche HTML-Dateien kopieren und testen Schritt4: Inhalt der index.html erstellen. Layout in CSS-Datei definieren. Schritt5: Inhalt der familie.html erstellen. Layout in CSS-Datei definieren. Schritt6: Inhalt der hobbies.html erstellen. Layout in CSS-Datei definieren. Für Schritt2 bis 6 gilt: Kommentare aus Vorgabe in HTML- und CSS-Datei kopieren und anschließend codieren. Vorgaben Schritt1: Dateien erstellen index.html, familie.html, hobbies.html, attribute.css Im link-element der HTML-Dateien den CSS-Dateinamen aktualisieren. Im title-element der HTML-Dateien einen Titel eintragen.

20 Schritt2: allgemeingültige Attribute definieren Attribute in CSS-Datei erfassen: /* Attribute im Body-Selektor: - Außenabstand links, rechts: 300 Pixel - Schriftgröße: 14 Point - Hintergrundbild mit Wiederholung: verlauf.jpg */ Schritt3: Menü erstellen Inhalt in index.html erfassen: <!-- Absatz mit den Links Meine Homepage, Meine Familie, Meine Hobbies --> <!-- Horizontale Linie --> Attribute in CSS-Datei erfassen: /* Attribute für Absatz Menü: - zentriert - Schriftgröße: 16 Point - fette Schrift - Innenabstand oben, unten: 20 Pixel */ /* Linkverhalten: - Link: grün, nicht unterstrichen - Besuchter Link: grün, nicht unterstrichen - Hover: unterstrichen */ /* Abstand zwischen Menüpunkten: - Innenabstand links, rechts: 10px */ /* Optional: aktuellen Menüpunkt hervorheben: - Farbe: weiß - Hintergrundfarbe: grün - Innenabstand links, rechts: 10px */ Danach: Klasse in Absatz einfügen. Menü in index.html testen. Danach in restliche HTML-Dateien kopieren und testen. Schritt4: Seite Meine Homepage erstellen Inhalt in index.html erfassen: <!-- h1-überschrift --> <!-- Absatz mit Bild --> <!-- Absatz mit Zeilenumbrüchen --> <!-- Horizontale Linie --> <!-- Absatz für Fußzeilentext. Mit Sonderzeichen für Copyright -->

21 Attribute in CSS-Datei erfassen: /* Ungebundene Klasse mit Attribut zentriert */ /* Attribute für Absatz Fußzeile: - zentriert - Schriftgröße: 9 Point - Innenabstand oben: 20 Pixel */ Danach: Zentriert-Klasse in Überschrift und Absätze einfügen. Schritt5: Seite Meine Familie erstellen Inhalt in familie.html erfassen: <!-- Absatz mit Blindtext und Bild ich.jpg --> <!-- Absatz mit Blindtext und Bild mama.jpg --> <!-- Absatz mit Blindtext und Bild papa.jpg --> Horizontale Linie und Absatz für Fußzeilentext aus index.html kopieren Attribute in CSS-Datei erfassen: /* Ungebundene Klasse mit Attribut rechtsbündig */ /* Attribute für linksbündiges Bild: - Außenabstand rechts: 20 Pixel - Außenabstand unten: 10 Pixel - Ausrichtung mit Attribut float */ /* Attribute für rechtsbündiges Bild: - Außenabstand links: 20 Pixel - Außenabstand unten: 10 Pixel - Ausrichtung mit Attribut float */ Danach: Linksbündig-Bildklasse in Bild in Absatz1 einfügen. Rechtsbündig-Klasse in Absatz2 einfügen. Rechtsbündig-Bildklasse in Bild in Absatz2 einfügen. Linksbündig-Bildklasse in Bild in Absatz3 einfügen. Schritt6: Seite Meine Hobbies erstellen Inhalt in hobbies.html erfassen: Je Hobby: <!-- h2-überschrift --> <!-- Absatz mit Hobby-Bild --> <!-- Absatz mit Blindtext --> <!-- Optional: Link zum Seitenanfang einfügen --> Horizontale Linie und Absatz für Fußzeilentext aus index.html kopieren

22 Attribute in CSS-Datei erfassen: /* Attribute für h2-überschrift: - Schriftgröße: 20 Point - Innenabstand alle Seiten: 10 Pixel - normale Schrift dh. nicht fett */ Danach: Rechtsbündig-Klasse in Überschrift und Absätze einfügen.

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

Information und ihre Darstellung: XHTML & CSS

Information und ihre Darstellung: XHTML & CSS Information und ihre Darstellung: XHTML & CSS IFB Speyer Daniel Jonietz 2009 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. 1 Was ist XHTML? Textbasierte Auszeichnungssprache

Mehr

11 Publizieren im Web

11 Publizieren im Web 11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten

Mehr

Die wichtigsten HyperTextMarkupLanguage tags 1(6)

Die wichtigsten HyperTextMarkupLanguage tags 1(6) Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser

Mehr

Tab. Seitenverwaltung Dokumentansichten

Tab. Seitenverwaltung Dokumentansichten Einstieg Hauptbildschirm Menuleiste Symbolleiste Bearbeiten Symbolleisten Format Tab Tab schliessen Tab, nicht gespeichert Seitenverwaltung Dokumentansichten Bearbeitungsfenster Pfad zum aktuellen HTML-Tag

Mehr

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,

Mehr

Inhalt. Einleitung... 13

Inhalt. Einleitung... 13 Inhalt Einleitung... 13 1. Der Einstieg in CSS... 17 1.1 Die Grundlagen von (X)HTML... 18 Anatomie eines (X)HTML-Elements... 19 Der Unterschied zwischen XHTML und HTML... 19 1.2 Was ist CSS, und was kann

Mehr

Informatik und Programmiersprachen

Informatik und Programmiersprachen Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes.

Mehr

Cascading Style Sheets

Cascading Style Sheets CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text

Mehr

Grundlegende Webtechnologien

Grundlegende Webtechnologien Stefan Rothe 5. April 2011 Dieses Werk steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License (CC BY-NC-SA). Inhaltsverzeichnis 1 Grundlagen 1 1.1 Webtechnologien... 1 1.1.1 Einleitung... 1

Mehr

Leseprobe. »HTML und CSS im SchnelldurchlaufDas Box-ModellMedia Queries« Inhaltsverzeichnis. Index. Der Autor. www.galileocomputing.

Leseprobe. »HTML und CSS im SchnelldurchlaufDas Box-ModellMedia Queries« Inhaltsverzeichnis. Index. Der Autor. www.galileocomputing. Know-how Wissen, wie s für geht. Kreative. Leseprobe Erfahren Sie zu Beginn in Kürze das Zusammenspiel von HTML und CSS. Anschließend lernen Sie das Box-Modell von CSS kennen, und wie Sie Media Queries

Mehr

Der Editor und seine Funktionen

Der Editor und seine Funktionen Der Editor und seine Funktionen Für die Eingabe und Änderung von Texten steht Ihnen im Pflegemodus ein kleiner WYSIWYG-Editor zur Verfügung. Tinymce 1 ist ein Open Source Javascript-Editor, der mittlerweile

Mehr

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie

Mehr

VideoPlus. Shopware Video-Plugin. Handbuch

VideoPlus. Shopware Video-Plugin. Handbuch VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.

Mehr

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug.

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug. Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer Thema Grundlagen der Erstellung von Webseiten Maximalplan 1 Was man wissen sollten 2 Die erste Webseite mit HTML erstellen

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren.

-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren. HowTo: Personalisierte Serienemails aus Selektion (ggf. mit Anhang) Versionen: CRM 5, CRM SIX I. Vorbereitung a) Erstellen einer Selektion -Grundlage für alle Serienbriefe oder Serienemails mit SuperOffice

Mehr

ISBN 978-3-8273-3164-9 (Buch) ; 978-3-86324-512-2 (pdf) ; 978-3-86324-189-6 (epub)

ISBN 978-3-8273-3164-9 (Buch) ; 978-3-86324-512-2 (pdf) ; 978-3-86324-189-6 (epub) PHP 5.4 & MySQL 5.5 Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische

Mehr

Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren

Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Sie möchten die Positionierung Ihrer Internetseiten verbessern? Dann sollten Sie

Mehr

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3 Inhaltsverzeichnis Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2 Schritt 1: Design auswählen...3 Schritt 2: Umfang und Struktur der Seiten bestimmen...7 Schritt 3: Inhalte bearbeiten...9 Grafik

Mehr

Inhalte mit DNN Modul HTML bearbeiten

Inhalte mit DNN Modul HTML bearbeiten Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DNN Version ab 5.0 w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 22.08.2011

Mehr

Der Editor Abbildung 1 Der Editor

Der Editor Abbildung 1 Der Editor Der Editor Der Editor ist das wichtigste Werkzeug für den Administrator. Er dient zur Gestaltung sämtlicher Inhalte, gleich ob Inhalte der Website, Termine, Einladungen.. Wer sich hier ein wenig einarbeitet

Mehr

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr

HTML- Editor Phase5. Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML kennen.

HTML- Editor Phase5. Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML kennen. Quelle: http://www.clairette.de/tutorial/index.html http://www.meybohm.de Phase5 Editor Der Einstieg Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML

Mehr

Schulung Open CMS Editor

Schulung Open CMS Editor Schulung Open CMS Editor Um Ihr Projekt im OpenCMS zu bearbeiten brauchen Sie lediglich einen Webbrowser, am besten Firefox. Vorgehensweise beim Einrichten Ihrer Site im OpenCMS Erste Schritte Wenn Sie

Mehr

ECDL Web Editing Syllabus Version 2.0. Schon im World Wide Web vertreten?

ECDL Web Editing Syllabus Version 2.0. Schon im World Wide Web vertreten? ECDL Web Editing ECDL Web Editing Syllabus Version 2.0 Schon im World Wide Web vertreten? Der Europäische Computer Führerschein ist eine Initiative von ECDL Foundation und Österreichischer Computer Gesellschaft.

Mehr

Dreamweaver 8 Homepage erstellen Teil 2

Dreamweaver 8 Homepage erstellen Teil 2 Dreamweaver 8 Homepage erstellen Teil 2 Voraussetzungen Das vorliegende Skriptum knüpft an folgende Skripten an und setzt voraus, dass du diese bereits durchgearbeitet hast. Dreamweaver_Einführung.pdf

Mehr

Content Management System (CMS) Manual

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

Mehr

Eine Mini-Website an einem Nachmittag

Eine Mini-Website an einem Nachmittag Erforderliche Grundausstattung Ein Computer, der mit einer Software zum Erstellen einfacher Textdateien ausgestattet ist (SimpleText, Text-Editor...) Ein Internetanschluss Eine Software mit der man im

Mehr

E-Mail Editor Vorlagen Programmier-Richtlinien

E-Mail Editor Vorlagen Programmier-Richtlinien E-Mail Editor Vorlagen Programmier-Richtlinien 1 Inhaltsverzeichnis 1. Einleitung... 3 2. Code erstellen für Vorlagen... 4 3. Code für mobile Vorlagen (Responsive Design)... 5 4. Editor Klassen (Tags)

Mehr

Das TYPOlight CSS-Framework

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

Mehr

Einstieg. Über mich. Über Sie/dich. Lernziele. verheiratet, Aargau Trainer bei switchplus. Christian.Zumbrunnen @switchplus.ch. Ziele.

Einstieg. Über mich. Über Sie/dich. Lernziele. verheiratet, Aargau Trainer bei switchplus. Christian.Zumbrunnen @switchplus.ch. Ziele. Über mich verheiratet, Aargau Trainer bei switchplus Im Web unterwegs seit 1995 Christian.Zumbrunnen @switchplus.ch Einstieg Wie komme ich zu meinem eigenen Internet-Auftritt? begeistert von Yola, Wordpress,

Mehr

Webshop Tutorial. E-Commerce ECM ERP SFA EDI. Backup. Aussehen des Webshops anpassen Vorlagen verwenden und ändern. www.comarch-cloud.

Webshop Tutorial. E-Commerce ECM ERP SFA EDI. Backup. Aussehen des Webshops anpassen Vorlagen verwenden und ändern. www.comarch-cloud. Webshop SFA ECM Backup E-Commerce ERP EDI Aussehen des Webshops anpassen Vorlagen verwenden und ändern www.comarch-cloud.de Inhaltsverzeichnis 1 EINLEITUNG 3 1.1 EINFÜHRUNG 3 1.2 BEISPIELE FÜR DESIGNVORLAGEN

Mehr

1... Ein Platz im Internet... 24 2... Die Sprachen des Web... 36 3... Dreamweaver im Vergleich... 50

1... Ein Platz im Internet... 24 2... Die Sprachen des Web... 36 3... Dreamweaver im Vergleich... 50 1... Ein Platz im Internet... 24 1.1... Wie kommt meine Site ins Internet... 24 1.1.1... Was ist eine Website... 24 1.1.2... Ein Platz im WWW... 25 1.2... Die eigene Domain... 25 1.2.1... Was ist eine

Mehr

2 HTML & CSS der Schnelleinstieg *

2 HTML & CSS der Schnelleinstieg * 5 2 HTML & CSS der Schnelleinstieg * Diese Einführung ist für Leser gedacht, die noch keinerlei Kenntnisse in HTML oder CSS besitzen. Wenn Sie bereits Grundkenntnisse besitzen, dann können Sie mit dem

Mehr

CSS für Einsteiger... Seite

CSS für Einsteiger... Seite Inhaltsverzeichnis CSS für Einsteiger... Seite Vorwort von Friedel...1 Vorwort von Sejuma...1 Dankadresse...2 1. Grundsätzliches...3 1.1 Was ist CSS und warum man es verwenden sollte...3 1.2 Vorbereitende

Mehr

Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de

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

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

Mehr

HTML. Webdesign 2015/16. NaReM 3.Semester. Teil 1: HTML Grundlagen. Dozentin: Karin Maier. Einführung. Grundlagen. HTML Hyper Text Markup Language

HTML. Webdesign 2015/16. NaReM 3.Semester. Teil 1: HTML Grundlagen. Dozentin: Karin Maier. Einführung. Grundlagen. HTML Hyper Text Markup Language Webdesign 201/16 NaReM 3.Semester Karin Maier Teil 1: HTML Grundlagen 1 HTML Dozentin: Karin Maier Karin Maier Einführung 1 Grundlagen HTML Hyper Text Markup Language Jeder Webseite liegt HTML-Quelltext,

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

Primarschule Birmensdorf PIA Anleitungen Word. Bevor du mit Schreiben beginnen kannst, musst du dein Word- Dokument einrichten.

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

Mehr

Erstellung einer Homepage mit dem KompoZer. und. Filezilla

Erstellung einer Homepage mit dem KompoZer. und. Filezilla Erstellung einer Homepage mit dem KompoZer und Filezilla Thomas Gaier, 2007 Inhalt 1 Gliederung einer Webseite...1 2 Der KompoZer...2 3 Aufbau...2 4 Farben...2 5 Erstellung des Layouts...3 6 Navigation...4

Mehr

GUIDELINE. Variante 1 auf Basis des VMI-Template Baukastens 2

GUIDELINE. Variante 1 auf Basis des VMI-Template Baukastens 2 Standalone- E-Mail-Marketing mit VMI 2 Anlieferung 5 Variante 1 auf Basis des VMI-Template Baukastens 2 Ihre Vorteile 3 Anlieferung 3 Abstimmung / Vorlaufzeit 3 Unsere Leistung 3 Variante 2 auf Basis eines

Mehr

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe?

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? Inhalt: 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? 1.Installation Um das Electronics Theme zu installieren, gehen Sie in der Rubrik Design zum Template Store. Hier sehen Sie

Mehr

TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen

TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch Joomla Templates Kursunterlagen Ordnerstruktur in Joomla Inhaltsverzeichnis Ordnerstruktur in Joomla... 3

Mehr

Webdesign, Aufgabestellung 1

Webdesign, Aufgabestellung 1 , Aufgabestellung 1 1. Teamarbeit Die Website wird in Teamarbeit gemacht (2er-Teams). Innerhalb des Teams werden Konzept, Design, Inhalt und Arbeitsverteilung besprochen und bestimmt. 2. Inhalte Es wird

Mehr

CMSimple Kurzanleitung

CMSimple Kurzanleitung CMSimple Kurzanleitung für Redakteure Stand: 28.11.2010 CMSimple Kurzanleitung Seite: 1 Inhalt CMSIMPLE KURZANLEITUNG... 1 INHALT... 1 WICHTIGE DATEN... 2 EINFÜHRUNG... 2 ANMELDEN... 3 LOGIN... 3 LOGOUT...

Mehr

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

Mehr

Fraunhofer ITWM Typo3 Schulung für Webbeauftragte

Fraunhofer ITWM Typo3 Schulung für Webbeauftragte Fraunhofer ITWM Typo3 Schulung für Webbeauftragte Die typo3 Schulung besteht aus zwei Blöcken: Einer Präsentation und einem Übungsteil. Während der Präsentation lernen Sie Anhand von konkreten Beispielen

Mehr

Hilfe zur Bedienung des DynaLex CMS für Redakteure und Editoren am Beispiel "Profilthemenerstellung"

Hilfe zur Bedienung des DynaLex CMS für Redakteure und Editoren am Beispiel Profilthemenerstellung Hilfe zur Bedienung des DynaLex CMS für Redakteure und Editoren am Beispiel "Profilthemenerstellung" A. Profilthemen vorbereiten Text vorbereiten 1. Erstellen Sie zu jedem Profilthema einen völlig unformatierten

Mehr

Endanwender Handbuch

Endanwender Handbuch Endanwender Handbuch INHALTSVERZEICHNIS Vorwort...3 Frontend und Backend...3 Das Dashboard...4 Profil Bearbeiten...6 Inhalte Verwalten...6 Seiten...6 Seite verfassen...7 Papierkorb...11 Werbebanner...11

Mehr

TYPO3-Kurzreferenz für Redakteure

TYPO3-Kurzreferenz für Redakteure TYPO3-Kurzreferenz für Redakteure Die Kurzreferenz orientiert sich weitgehend an den TYPO3 v4 Schulungsvideos. Es kann jedoch geringfügige Abweichungen geben, da in den Videos auf didaktisch sinnvolles

Mehr

Erste Schritte in NVU

Erste Schritte in NVU NVU (http://www.nvu-composer.de/) ist ein leicht zu bedienender HTML-Editor. Nach dem Start von NVU sieht der Bildschirm wie folgt aus: Lasse dich von dieser Anzeige nicht irritieren, es ist alles halb

Mehr

Dreamweaver 8 Homepage erstellen Teil 1

Dreamweaver 8 Homepage erstellen Teil 1 Dreamweaver 8 Homepage erstellen Teil 1 Voraussetzungen Das vorliegende Skriptum knüpft an das Skriptum Dreamweaver_Einführung an und setzt voraus, dass du dieses bereits durchgearbeitet hast. Planung

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Redakteursguide Typo3 Gesamtschule Hattingen

Redakteursguide Typo3 Gesamtschule Hattingen Redakteursguide Typo3 Gesamtschule Hattingen Handhabung und Richtlinien zur Arbeit mit der Typo3-Homepage Internet-Explorer Sie sollten den Internet-Explorer ab 6.0 oder Firefox Version 1.5, besser die

Mehr

Anleitung zur Verwendung von Silverstripe 3.x

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

Mehr

Homepage erstellen 2002 Seite 1

Homepage erstellen 2002 Seite 1 Homepage erstellen 2002 Seite 1 1 Warum ein Internet-Auftritt?... 2 1.1 Gründe... 2 1.2 Einige Grundregeln für den Web-Auftritt... 2 1.3 Vorteile von HTML... 2 1.4 Nachteile von HTML... 2 2 Grundlagen

Mehr

Bedienungsanleitung. Content-Management-System GORILLA

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

Mehr

Facebook iframe-tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen

Facebook iframe-tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen Facebook iframe-tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen Anfang März 2011 hat Facebook das Erstellen von sogenannten iframe-tabs als individuelle Gestaltungsmöglichkeit von Fanseiten

Mehr

Cmsbox Kurzanleitung. Das Wichtigste in Kürze

Cmsbox Kurzanleitung. Das Wichtigste in Kürze Cmsbox Kurzanleitung Cmsbox Kurzanleitung Das Wichtigste in Kürze Die Benutzeroberfläche der cmsbox ist nahtlos in die Webseite integriert. Elemente wie Texte, Links oder Bilder werden direkt an Ort und

Mehr

Web Technologien HTML & CSS

Web Technologien HTML & CSS Web Technologien HTML & CSS Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Wednesdays, 8:00 10:00 a.m. Room HS 021, B4 1 Themen

Mehr

Erstellen eigener HTML Templates für die Clanplanet Webseite. www.clanplanet.de

Erstellen eigener HTML Templates für die Clanplanet Webseite. www.clanplanet.de Erstellen eigener HTML Templates für die Clanplanet Webseite Version 2 vom 12.11.2012 Copyright by Clanplanet www.clanplanet.de Teil 1: Einführung in die CP Templates Teil 2: Template des Newsbeitrages

Mehr

Quickstart IMS Custom-Player Pro

Quickstart IMS Custom-Player Pro Quickstart IMS Custom-Player Pro Jedes IMS-MDN (Media Delivery Network) Konto bietet zum Abspielen von Flash Videos den Standard IMS Custom Player. Dieser Player wird von uns auf einem hoch performanten

Mehr

Anleitung für Autoren

Anleitung für Autoren Verwaltung.modern@Kehl Anleitung für Autoren Im folgenden Text werden Sie/wirst du geduzt. Bitte Sehen Sie/sieh uns diese Vereinfachung nach. Wenn du bei Verwaltung.modern@Kehl mitbloggen willst, legen

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Anleitung für den Web-Builder

Anleitung für den Web-Builder Anleitung für den Web-Builder Der Web-Builder ist erstellt worden, um auf einfacher Weise eine Homepage erstellen zu können, ohne Programmierkenntnisse in HMTL haben zu müssen. Seite 1 Wenn man den Web-Builder

Mehr

Kurzanleitung CMS. Diese Kurzanleitung bietet Ihnen einen Einstieg in die Homepage Verwaltung mit dem Silverstripe CMS. Inhaltsverzeichnis

Kurzanleitung CMS. Diese Kurzanleitung bietet Ihnen einen Einstieg in die Homepage Verwaltung mit dem Silverstripe CMS. Inhaltsverzeichnis Diese Kurzanleitung bietet Ihnen einen Einstieg in die Homepage Verwaltung mit dem Silverstripe CMS Verfasser: Michael Bogucki Erstellt: 24. September 2008 Letzte Änderung: 16. Juni 2009 Inhaltsverzeichnis

Mehr

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner.

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. Kapitel 1 Grundlagen von Phase 5 Seite 1 1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. 1.1 Projekt anlegen Bevor du das Programm Phase 5 startest, musst du einen Ordner anlegen,

Mehr

Dokumentation. Dokumentation Schnell-Einstieg für webedition User. PROLINK internet communications GmbH Merzhauser Str. 4 D-79100 Freiburg

Dokumentation. Dokumentation Schnell-Einstieg für webedition User. PROLINK internet communications GmbH Merzhauser Str. 4 D-79100 Freiburg Dokumentation Dokumentation Schnell-Einstieg für webedition User PROLINK internet communications GmbH Merzhauser Str. 4 D-79100 Freiburg fon: +49 (0)761-456 989 0 fax: +49 (0)761-456 989 99 mail: info@prolink.de

Mehr

Schriftbild. STRG + UMSCHALT + * Nichdruckbare Zeichen anzeigen

Schriftbild. STRG + UMSCHALT + * Nichdruckbare Zeichen anzeigen Tastenkombination Beschreibung Befehlsrubrik Tastenkombinationen zum Arbeiten mit Dokumenten STRG + N Neues Dokument erstellen Dokument STRG + O Dokument öffnen Dokument STRG + W Dokument schließen Dokument

Mehr

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo Mit Jimdo ist das Erstellen einer eigenen Homepage ganz besonders einfach. Auch ohne Vorkenntnisse gelingt es in kurzer Zeit, mit einer grafisch sehr ansprechenden

Mehr

Inhalt. Installation. Funktionen

Inhalt. Installation. Funktionen Inhalt Installation Funktionen Einstellungen Hintergrund Balken, Button Rabatt Fußzeile Kopfteil, linke Spalte Hauptnavigation Module Preiskategorien, Produkte Text Kontakt 3 4 5 5 6 7 8 9 10 11 12 13

Mehr

Contao für Redakteure

Contao für Redakteure Nina Gerling Contao für Redakteure Inhalte editieren und verwalten mit dem Open-Source-CMS ADDISON-WESLEY An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

Erstellung einer Homepage

Erstellung einer Homepage Erstellung einer Homepage 1) Woher bekomme ich eine Homepage? Vielfach haben Sie schon jetzt die Möglichkeit, kostenlos Webspace für die eigene Homepage zu nutzen. Die meisten Internet-Provider bieten

Mehr

Eine eigene Website mit Jimdo erstellen

Eine eigene Website mit Jimdo erstellen Eine eigene Website mit Jimdo erstellen Die schnellste und kostengünstigste Art, zu einem Internetauftritt zu gelangen, ist der Weg über vorkonfigurierte und oftmals kostenfreie Internetbaukästen. Diese

Mehr

SEO SEARCH ENGINE OPTIMIZATION

SEO SEARCH ENGINE OPTIMIZATION SEO SEARCH ENGINE OPTIMIZATION Warum Suchmaschinenoptimierung? Mehr als 80% der Nutzer kommen über Suchmaschinen und Web-Verzeichnisse zu neuen Websites 33% aller Suchmaschinen User glauben, dass die zuerst

Mehr

Webseiten mit HTML und CSS

Webseiten mit HTML und CSS Kurze Einführung Im Internet gibt es viele gute Einführungen zu HTML und CSS (Webseiten, Videos, interaktive Seiten). Diese Seiten sollen also nur einen einfachen Überblick und einige Aufgaben bieten.

Mehr

Cross-Platform Mobile Apps

Cross-Platform Mobile Apps Cross-Platform Mobile Apps 05. Juni 2013 Martin Wittemann Master of Science (2009) Arbeitet bei 1&1 Internet AG Head of Frameworks & Tooling Tech Lead von qooxdoo Plattformen Java ME 12 % Rest 7 % Android

Mehr

Kanton St.Gallen Design Guidelines Web-Auftritt des Kantons St.Gallen

Kanton St.Gallen Design Guidelines Web-Auftritt des Kantons St.Gallen Design Guidelines Web-Auftritt des Kantons St.Gallen Version 8.0 - CQ5-Redesign Juli 2011 Inhalt 1. Geltung und Reichweite der Guidelines 2. Visual Design Basics 3. Style Guide Internet «sg.ch» 4. Style

Mehr

Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar

Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Viele Betreiber von Webseiten sind sich unsicher, wie sie die Barrierefreiheit ihrer Webseite evaluieren können. Der Vortrag soll praktikable

Mehr

Login. Login: Excel für Aufsteiger. Passwort: Voraussetzungen. Unterlagen, Literatur. xx = Platznummer 2-stellig

Login. Login: Excel für Aufsteiger. Passwort: Voraussetzungen. Unterlagen, Literatur. xx = Platznummer 2-stellig Login Excel für Aufsteiger Login: xx = Platznummer 2-stellig Voraussetzungen: Grundkenntnisse in Windows Grundkenntnisse in Excel oder Teilnahme am Excel Kurs für Einsteiger Passwort: - RHRK Schulung -

Mehr

Grundlagen TYPO3 / Maud Mergard/ SK / 24.06.2015

Grundlagen TYPO3 / Maud Mergard/ SK / 24.06.2015 Grundlagen TYPO3 / Maud Mergard/ SK / 1 / TYPO3 für Redakteure 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

Mehr

Von: Sven Weltring, Viola Berlage, Pascal Küterlucks, Maik Merscher

Von: Sven Weltring, Viola Berlage, Pascal Küterlucks, Maik Merscher Von: Sven Weltring, Viola Berlage, Pascal Küterlucks, Maik Merscher Inhaltsverzeichnis 1. Desktop 2. Erklärung von Tastatur und Maus 3. Computer ausschalten 4. Neuer Ordner erstellen 5. Microsoft Word

Mehr

Kurzanleitung Drupal. 1. Anmeldung

Kurzanleitung Drupal. 1. Anmeldung Kurzanleitung Drupal 1. Anmeldung Anmeldung erfolgt bis zum Umzug unter http://haut.mjk-design.de/login und nach erfolgreichem Domainumzug unter http://www.haut.net/login mit Benutzername und Passwort.

Mehr

1. Aufrufen des Content Management Systems (CMS)

1. Aufrufen des Content Management Systems (CMS) 1. Aufrufen des Content Management Systems (CMS) Das CMS WebSiteBaker 2.5.2 ist ein kostenloses auf PHP basierendes Inhaltsverwaltungssystem, mit dem es möglich ist Inhalte von Webseiten schnell und einfach

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

Frames oder Rahmen im Browserfenster

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.

Mehr

Kurzanleitung für das CMS Joomla 3.x

Kurzanleitung für das CMS Joomla 3.x Kurzanleitung für das CMS Joomla 3.x 1. Login ins Backend Die Anmeldung ins sogenannte Backend (die Verwaltungsebene) der Website erfolgt über folgenden Link: www.name-der-website.de/administrator. Das

Mehr

JSCMS Dokumentation. (Stand: 27.05.09)

JSCMS Dokumentation. (Stand: 27.05.09) JSCMS Dokumentation (Stand: 27.05.09) Inhalt: CMS Symbole und Funktionen. 2 Verwalten.. ab 3 Seiten Verwalten.. 4 Blöcke Verwalten....6 Templates Verwalten....7 Template Editor...8 Metatags bearbeiten..

Mehr

Crashkurs Jimdo Online eigene kostenlose Webseite einrichten

Crashkurs Jimdo Online eigene kostenlose Webseite einrichten Crashkurs Jimdo Online eigene kostenlose Webseite einrichten Yvonne Seiler Volkshochschule Bern Lernziele Sie wissen was Jimdo ist und kann und wer hinter dieser Firma steckt. Sie haben eine eigene Webseite

Mehr

Version 1.0 Merkblätter

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

Mehr

Anleitung neuen Beitrag unter News auf www.schoellonia.de erstellen

Anleitung neuen Beitrag unter News auf www.schoellonia.de erstellen Anleitung neuen Beitrag unter News auf www.schoellonia.de erstellen BILD: Es ist möglich ein Bild unter den News mit zu veröffentlichen. Achtung: NUR EIN BILD pro Beitrag, und dieses sollte zuvor auf die

Mehr

Der erste Schirm ein Überblick

Der erste Schirm ein Überblick Der erste Schirm ein Überblick Zusatzmodule: Statistik Newsletter Veranstaltungskalender Mediendatenbank: Alle Dateien (Bilder, Videos, Excel-Listen, Word-Dokumente, PDF, ) speichern Sie in der Mediendatenbank

Mehr

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. 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

Mehr