3 - Sie erstellen beispielhaft Seiten per HTML und CSS, um die Präsentation von Inhalten im Webbrowser zu verstehen.

Größe: px
Ab Seite anzeigen:

Download "3 - Sie erstellen beispielhaft Seiten per HTML und CSS, um die Präsentation von Inhalten im Webbrowser zu verstehen."

Transkript

1 S C R E E N D E S I G N Screendesign und Templategestaltung für Online-Journalisten Einführungsveranstaltung für das 1. Semester, WS 2010/2011, Bernd Helfert A) Screendesign - was ist das und wozu ist es gut? B) Gestaltungsprinzipien online-journalistischer Produkte C) Einfache Erstellung von Webpages und Templates D) Trennung von Präsentation und Inhalt E) Umgang mit Content Management Systemen Das Ziel dieser Übungsstunden Sie sollen Ihren Sinn für die Wirkung und die Benutzbarkeit redaktioneller Websites schärfen (sprich: Design und Usability beachten) und Ihre Aufmerksamkeit auf das Layout von Webseiten richten. Sie sollen verstehen, wie redaktionelle Seiten aufgebaut sind, wie ein Layout visuell "funktioniert" und wie Seiten- und Textformatierung per HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) erzeugt wird. Sie lernen das Konzept der Trennung von Inhalt und Präsentation kennen. Folgende Übungen sollen Sie diesem Ziel näherbringen: 1 - Sie setzen sich bewußt mit der Wirkung und der Benutzbarkeit von Websites auseinander. 2 - Sie erstellen und nutzen Accounts bei vorinstallierten Webdiensten (Blogsoftware, Twitter,...) zur Veröffentlichung Ihrer Inhalte und konfigurieren diese für Ihre Zwecke. 3 - Sie erstellen beispielhaft Seiten per HTML und CSS, um die Präsentation von Inhalten im Webbrowser zu verstehen. 4 - Sie lernen das Konzept der Trennung von Inhalt und Präsentation kennen, das in CMS (content management systems)/redaktionssystemen zum Tragen kommt. Ziel dieser Übung ist NICHT aus Ihnen Webdesigner oder Webprogrammierer zu machen, denn das sind eigene Berufsbilder. Allerdings sollen Sie deren grundsätzliche Werkzeuge kennenlernen. Sie sollen lernen, von professionellen Entwicklern erarbeitete Systeme zu nutzen, für Ihre Zwecke zu konfigurieren und ggf. gestalterisch anzupassen. Dieser Kurs soll aus Ihnen keine Hobbywebseitenbastler machen, sondern Ihnen an einfachen Beispielen die grundsätzliche Funktionsweise redaktioneller Websites näherbringen.

2 A) Screendesign - was ist das und wozu ist es gut? Informationsvermittlung & Nutzerfreundlichkeit & Image Bewußte Kontrolle über die Darstellung von Inhalten am Bildschirm. Visuelle Organisation von Inhalten und Zugang dazu (Layout, Navigation) Visuelle Aufbereitung von Inhalten (für Information UND Wirkung) Gestaltung als Mittel der Kommunikation visueller Eindruck, thematische Einordnung, Kontext Inhalte zugänglich machen Aufmerksamkeit erzeugen und leiten Aussagen akzentuieren Information verständlich machen Informationen illustrieren Informationen mit visuellen Assoziationen verbinden Image des Absenders transportieren Konventionen und Erwartungshaltung beachten/brechen Gestaltungsmittel im Screendesign (Bild, Text, Layout, Stil, Kontraste) Bild: Bilder und Bildwirkung, Formate, Bildbearbeitung Text, Schrift am Bildschirm: Lesbarkeit, Wirkung, Formatierung visuell + technisch Layout: Aufteilung funktionaler Bereiche, visuelle Gliederung der Inhalte, Akzente Stil, Visuelle Sprache: Form- und Bildsprache, Metaphern, Klischees, Stereotypen, Symbole, Zeichen, Foto/Illustration/Grafik, Farbe (Palette, Kombinationen, Sättigung, Symbolismus...) Gestalterische Pole und Kontraste: akzentuierte Nutzerführung <=> gleichwertige Auswahl aller Inhalte vertraut <=> neu rational <=> emotional ÜBUNG Eigene Erfahrungen reflektieren, Beispiele finden, darüber austauschen. Was ist gut"?, Was fällt auf? Was gefällt? Was funktioniert? Was nervt? Welche Eigenschaften kamen allgemein gut an, welche weniger?

3 B) Gestaltungsprinzipien online-journalistischer Produkte Design Basics für redaktionelle Inhalte Bildschirm-Wahrnehmung: Leserichtung, Lesegewohnheiten, Text-/Bild-Wahrnehmung, Bildschirm-Konventionen, Aufmerksamkeit, Fokus, Redundanz Vom Umgang mit Text am Bildschirm: Webtext; am Bildschirm Lesen, Leserlichkeit Schriftgrößen, Schriftarten, Kontraste, Satzart, Textgliederung, Textakzentuierung Orientierung die Website als Interface (Bedienoberfläche): Layout der Website; Zusammenspiel der Elemente Ordnung, Struktur, Orientieren, Gewichtung, Akzentuieren Navigation, Nutzerführung, Steuerung des Inhalts Aussehen und Gesamtwirkung visuelle Umsetzung von Inhalten: Layout eines Artikels; visuelle Informationen Gestaltung des Inhalts Verständlichmachen in Bild und Text Usability (Anwenderfreundlichkeit und Nutzerführung): Orientierung (Startseite) Navigation Orientierung in der Website Wege, Erreichbarkeit, Hilfen Sichtbare und (vorerst) unsichtbare Inhalte AKZENTE SETZEN!!! Wenn Sie Inhalte (zb einen bestimmten Text auf der Startseite, oder Hinweise..) besonders hervorheben wollen, um die Aufmerksamkeit zu lenken, müssen Sie dies auffallend gestalten. Dazu hilft es, wenn der Rest der Seite ruhig wirkt. Störer/Blickfänge (wie farbiges Label Eilmeldung u.ä.) Farbflächen, Rahmen, Linien, grafische Elemente Andere Schriftart, -größe, fett, kursiv, Großbuchstaben, Schriftfarbe Absätze, Einzüge, Abstände (Leerraum trennnt Grüppchen, leitet das Auge) Artikel auf Übersichtseiten mit/ohne Bilder, mit/ohne Teasertext Position und Größe (oben und groß = wichtig, unten Rand = Zusätzliches) ÜBUNG Eine Auswahl redaktioneller Websites unter diesen gestalterischen Gesichtspunkten analysieren Gestaltung und Wirkung, Funktionsweisen und Navigation, Inhaltsvermittlung, Usability

4 C) Einfache Erstellung von Webpages und Templates Online-Kommunikation mit den verfügbaren technischen Möglichkeiten Angesprochen: Informationswege, wenn Sie Inhalte online kommunizieren (oder erhalten) veröffentlicht Blog-Baukasten Website-Baukasten (Broadcasting: Audio, Video, streaming, podcast) abonniert Mailingliste, Twitter, rss-feeds empfohlen/zusammengestellt google news/rivva, social bookmarks, Links, Interaktion und Feedbackmöglichkeiten Kommentare, Foren, Chat, Twitter, Messaging/Conferencing kooperativ Wiki, Foren, Social Networks ÜBUNG Benutzen: Blog anlegen (Baukasten, visuell anpassen) Website anlegen (Baukasten, visuell anpassen) Wiki benutzen Twitteraccount anlegen Social media-erfahrungen besprechen Vergleichen: Was paßt wofür? Zweck und Art der Kommunikation. Möglichkeiten der Zusammenarbeit. Was ergänzt sich? Die Besonderheiten redaktioneller Websites.

5 D) Trennung von Präsentation und Inhalt Einführung in Seitenbeschreibung und Stilvorlagen mit Hypertext Markup Language und Cascading Style Sheets Angesprochen: Ein Inhalt für verschiedene Kanäle? (Stichworte: Hypertext, Internet, HTML, Browser, reader, mobile Geräte, messaging... Browsertypen, Barrierefreiheit) HTML - Hypertext Markup Language Strukturieren von Texten, Bildern und Metainformationen HTML als Auszeichnungssprache HTML im Layout Übung HTML Seite anlegen, Text per HTML formatieren, Schriftdarstellung tags, Ausrichtung, Verlinkung, Bilddarstellung CSS - Cascading Style Sheets Auslagern von Format- und Layout-Informationen Format-Deklaration und Vererbung HTML-Ergänzungssprache CSS CSS als Auszeichnungssprache CSS-Layout Website CSS-Stilvorlage ändern Übung CSS Formatierung: Stilvorlagen einer HTML-Seite in CSS auslagern Layout: 1 Seitenlayout Schritt für Schritt in CSS erstellen

6 HTML Hypertext Markup Language HTML steht für HyperText Markup Language HTML dient der Verlinkung von Dokumenten und deren Darstellung in Webbrowsern. Ein HTML-Dokument ist eine einfache.txt-datei... allerdings mit der Kennung.html (oder wahlweise.htm). Diese Endung macht die Textdatei für Webbrowser als.html-datei kenntlich. Das Konzept von HTML HTML dient dazu, einen Text in Elemente gleicher Art (zb Headline, Zitat, Liste, Link,...) zu strukturieren. HTML zielt darauf ab, gleichartige Elemente (Headline, normaler Text) oder Funktionen (Hyperlink) auf erkennbar gleiche Weise darzustellen. Nicht unbedingt, die Inhalte im Sinne eines Design-Layouts exakt zu formatieren. Bevor es bessere Möglichkeiten per CSS gab, nutzten Webdesigner HTML-tags dennoch zur Gestaltung von Websiten (z.b. Tabellen zur Positionierung von Bildern und Texten). <tags> Sogenannte "tags" in eckigen Klammern wie <html>...</html> oder <body>...</body> oder <h1>...</h1> schließen Textstellen ein und sagen dem Webbrowser ob und wie diese Inhalte dargestellt werden sollen. Zum Beispiel bedeutet das tag <h1> für den Webbrowser: "der nun folgende Text soll wie eine große Headline dargestellt werden". Wie ein bestimmter Browser eine große Headline darstellt, ist hier nicht vorgegeben. </h1> beendet diese Zuweisung.

7 Bsp für eine besonders einfache HTML-Seite mit Seitentitel, Überschrift und Text: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>hier steht der Titel der HTML-Seite</title> </head> <body> <h1>dies ist eine Headline</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </body> </html> <html> bedeutet hierbei für einen Webbrowser: dies ist ein HTML-Dokument <head> bedeutet: jetzt kommen Angaben für den Browser und Suchmaschinen zum anzuzeigenden Inhalt <body> bedeutet: jetzt kommt der sichtbare Inhalt dieses Dokumentes selbst Mehrere Tags, die eine Textstelle/Inhalt umschließen, müssen in exakt der umgekehrten Reihenfolge wieder geschlossen werden. Beispiel: <html><head></head><body><h1>eine Headline</h1>Ein Text Text Text Text</body></html> Korrekt:... <h1>headline hier</h1><strong>fetter Text</strong> Text Text Text... Falsch:... <h1>headline hier<strong></h1>fetter Text</strong> Text Text Text...

8 CSS Cascading Style Sheets Was bringen CSS? Die Trennung von Inhalt und Design Das Auslagern von Stilvorlagen in "Cascading Stylesheets" ermöglicht die Trennung von Inhalt und Design einer Webseite. Inhalten und Bereichen werden so Stilvorlagen zugeordnet. Diese Stilvorlagen können dann an einer Stelle, quasi ausgelagert, das Aussehen der Inhalte ändern. (Zum Beispiel für ein neues Design oder ein anderes Ausgabegerät.) Ein HTML-Dokument gliedert sich mit <head> und <body> in 2 Bereiche: <html> <head>... Header-Bereich mit Angaben für den Browser </head> <body>... Body-Bereiches mit dem eigentlichen sichtbaren Seiten-Inhalt </body> </html> ) CSS-Angaben sind Angaben für den Browser und stehen im HEADER <head>... </head> Im Header-Bereich finden sich alle Angaben, die sich an den Browser oder an Suchmaschinen richten, selbst jedoch nicht optisch dargestellt werden (mit Ausnahme Seitentitels). Per CSS kann man dem Browser Stilvorlagen für den Text/Inhalt vorgeben. Diese CSS-Angaben können - direkt im Headerbereich stehen oder - als externe Datei ("irgendeinname.css") in den Header geladen werden.

9 CSS Syntax Beispiel für eine Stilvorlagen-Definition per CSS: Es können existierenden HTML-Tags oder von Ihnen frei definierten Bezeichnern Eigenschaften zugeordnet werden: Also a) ein HTML-TAG {Eigenschaft: Wert} oder b) ein Bezeichner {Eigenschaft: Wert} Bsp zu a) Eigenschaften eines HTML-Tags per CSS definieren Headline-tag <h1>...</h1> Alle <h1>-headlines des HTML-Dokuments sollen automatisch eine bestimmte Schriftgröße und -farbe haben sieht zb so aus: h1 { font-size: 14pt; font-color: blue} Bsp zu b) Einen von Ihnen festgelegten "Bezeichner" definieren Alle mit ".fantasiename1" ausgezeichneten Bereiche des HTML-Dokuments bekommen die Schriftfarbe red..fantasiename1 { font-color: red } Hinweis: Ein HTML-tag (wie <h1>, <p>, <body>) oder ein Bezeichner (wie.meintextstil ) kann sehr viel mehr als 1 Eigenschaft haben

10 Die Einbindung eines stylesheets im Header-Bereich Beispiel einer CSS-Stilvorlage (style sheet) im Header-Bereich eines HTML- Dokuments: <head> <style type="text/css"> <!-- h1 { font-size: 14pt; font-color: blue;}.fantasiename1 { font-color: red } --> </style> </head> Erklärung <style type="text/css"><!-- bedeutet "jetzt kommt eine Stilvorlage (für die Browseransicht auskommentierter Text) h1 { font-size: 14pt; } --></style> bedeutet CSS: "H1-Headlines sind 14pt groß" bedeutet "Ende dieser Stilvorlage" Hinweis: Text innerhalb von Kommentar-Zeichen wird vom Webbrowser nicht angezeigt. <!-- auskommentierter Text --> <!-- zb für Stilvorlagen --> <!-- oder für browserseitige Programmierung --> Üblich ist es, die stylesheet-vorgaben einer Website in 1 Datei auszulagern, die dann jeweils in den Header-Bereich eines HTML-Dokumentes geladen wird. <head> <link rel="stylesheet" type="text/css" href="beispiel.css" /> </head> Stildefinitionen per CSS gelten insbesondere für - vordefinierte HTML-TAGs wie Headlines <h1></h1> oder Textparagraphen <p></p> oder Listen <ul></ul> - selbstdefinierte Klassen mit eigenem Namen wie.fantasiename1 und.meinkleinstertext

11 2) BODY <body></body> Im Body-Bereich steht der vom Browser sichtbar angezeigte Inhalt des Dokumentes. Wie dieser Inhalt aussieht, kann oben im stylesheet stehen (zb Schriftarten, Schriftgrößen und -farben, Abstände, Ausrichtung/Position...). Im Body-Bereich werden einzelne Blöcke, dh Bereiche mit unterschiedlichen Stilvorgaben, untereinander angezeigt, zb: <div class=".fantasiename1">text des ersten Blockbereichs, wie.fantasiename1 ihn definiert, zb in Schriftfarbe rot </div> <div class=".fantasiename2">text des nächsten Blockbereichs, mit dem Aussehen wie.fantasiename2 ihn definiert, zb in Schriftfarbe blau </div> <div class=".fantasiename1">text des nächsten Blockbereichs, wieder wie.fantasiename1 ihn definiert </div> Solche Blöcke können auch ineinander verschachtelt sein. Deswegen auch der Name "cascading stylesheets", denn die Eigenschaften wie Farbe, Schriftgröße o.ä. werden vererbt. Falls eine Eigenschaft wie Farbe in geschachtelten Blöcken mehrfach definiert wird, überschreiben die "inneren" Angaben üblicherweise die "äußeren". Beispiel: <body> <div class=".fantasiename1">hier steht nun ein Text so wie.fantasiename2 ihn definiert, zb mit Schriftfarbe rot. <p>hier steht innerhalb dieses div-blocks ein Paragraph, der zudem so aussieht wie Paragraphen evtl definiert wurden, zb mit Schriftfarbe schwarz. <span class=".fantasiename2>hier steht innerhalb des div-bereiches und innerhalb des Paragraphen ein Abschnitt, der so aussieht wie.fantasiename2 vorgibt, zb Schriftfarbe blau </p> </div> </body> </span> (Die Einrückungen dienen hier nur der Übersichtlichkeit der Verschachtelung )

12 Wichtige CSS-Elemente STILVORLAGEN Festlegung einer Stil-Eigenschaft Bezeichner {Eigenschaft: Wert} h1 { font-size: 14pt; font-color: blue;}.fantasiename1 { font-color: red } BLOCKBEREICHE Im HTML-Dokument definierte Bereiche Bereiche/Blockelemente mit zugeordneten Stilvorlagen sind DIV (vor allem für Blockbereiche, untereinander angezeigte Abschnitte) SPAN (vor allem für Textbereiche, zb hervorgehobene Textpassagen) einzelnen HTML-tags wie Headlines <h1> oder Paragraphen <p> können im style sheet bestimmte Eigenschaften zugeordnet werden. AUFRUF VON STILVORLAGEN Zu HTML-tags, DIV- und SPAN-Elementen wird geschaut, welche Stile gelten z.b. <div id="box_1">...</div> <p class="text-grau">...</p> <span class="text-grau">...</span> Hinweis: CLASS (z.b. ="text-grau") verweist auf sich wiederholende Stilvorlagen ID (z.b. box_1 ) eher auf einmalig vorkommende Elemente/Stilabweichungen LAYOUT MIT CSS Box Modell (Abmessungen, Abstände, Rahmen und Farbe von Blockelementen definieren) FLOAT-Element (positionieren von Blockelementen statt einfach untereinander) Übung: Einfache Webseite mit Header, Navigationsbereich, Inhalt per CSS erstellen (CSS für Layout UND Formatierung einsetzen)

13 E) Umgang mit Content Management Systemen Redaktionssysteme gehören technisch zu den Content Management Systemen (CMS). Sie dienen der Verwaltung von Inhalten, meist Webseiten. Wesentliches Merkmal ist die Trennung von Inhalten (Content), Datenstruktur und Design (Layout). Typischer Aufbau eines CMS-geeigneten Webserver-Systems: LAMP-WEBSERVER ( = Linux, Apache, mysql, PHP ) Eine Softwarekombination, in der dynamische Webseiten und -anwendungen entwickelt und im Internet bereitgestellt werden können. Linux-Betriebssystem = stellt die Basisfunktionen des Computers Apache-Webserver mysql-datenbank PHP = Software speziell für Datenanfragen aus dem Internet = Software, die Inhalte strukturiert speichert (Daten, nicht fertige HTML-Seiten) = serverseitige Programmiersprache erzeugt dynamisch HTML-Seiten Aus HTML-Templates/Programmierschnipseln, CSS-Vorgaben und Datenbankinhalten werden sozusagen HTML-Dateien zusammmenfügt, die ein Webbrowser versteht und Benutzern anzeigen kann. SIEHE AUCH: SCHAUBILD AUF KURS-BLOG Übung Wordpress-Blog: konfigurieren Wordpress-Blog: CSS des Templates ansehen und ggf. anpassen Artikel veröffentlichen Dateien einbetten

14

CSS. Cascading Stylesheets

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

Mehr

http://www.therealgang.de/

http://www.therealgang.de/ http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:

Mehr

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Bürokratie Termine & Kursliste & http://hawk.herrkraft.de Wer bin ich? michael kraft ba ma 2006 2012 hawk tutor interaction digital

Mehr

Webdesign-Multimedia HTML und CSS

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

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

HTML Teil 2. So kann man HTML-Seiten mit

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:

Mehr

Webportfolio Kurs 2 1

Webportfolio Kurs 2 1 Webportfolio Kurs 2 1 Inhalte Übersicht Konzeption und Gestaltung von Websites Strukturierung von HTML-Dokumenten Formatierung von HTML-Dokumenten Verwenden von Bildern, Links, Listen, Tabellen.. Einbettung

Mehr

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006 Webdesign 1 PCC-Seminar Einheit 1 Di., 21.3.2006 Projekt Website Wir wollen eine Website gestalten und umsetzen! Aber wie fangen wir an? Grundsätzliches: Internet Print ein anderes Medium verlangt andere

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

Webentwicklung mit Mozilla Composer I.

Webentwicklung mit Mozilla Composer I. Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor

Mehr

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,

Mehr

Webseiten erstellen für Einsteiger

Webseiten erstellen für Einsteiger Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21

Mehr

WEBSEITEN ENTWICKELN MIT ASP.NET

WEBSEITEN ENTWICKELN MIT ASP.NET jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm

Mehr

1 Was sind Cascading Stylesheets?

1 Was sind Cascading Stylesheets? Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff»Cascading Stylesheets«verbirgt und welche Vorteile Sie davon haben, mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet

Mehr

HTML-Grundlagen (X)HTML:

HTML-Grundlagen (X)HTML: HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein

Mehr

HTML5. Wie funktioniert HTML5? Tags: Attribute:

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,

Mehr

---------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------- Webauftritt meiner Schule via CMS System Joomla! Dieser Arbeitskatalog hilft dir notwendige Arbeiten zu strukturieren. Grundsätzliches Das CMS System Joomla trennt strikt Content (Inhalte, Fotos, ) und

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

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

Mehr

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

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

Mehr

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press Manuela Hoffmann Modernes Webdesign Gestaltungsprinzipien, Webstandards, Praxis Galileo Press Einleitung 11 TEIL I: Das Design 1 Webdesign und Webstandards 17 1.1 Webdesign, was ist das eigentlich? 17

Mehr

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick Tutorium Mozilla Composer Ein kurzer Überblick Vorbereitung: Projektordner erstellen Für jede projektierte Website wird zuerst ein eigener Projektordner erstellt, der alle zu publizierenden Dateien aufnimmt.

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 28. April 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

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

HTML Programmierung. Aufgaben

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

Mehr

Crashkurs Webseitenerstellung mit HTML

Crashkurs Webseitenerstellung mit HTML Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

Wo Sie fürs Optimieren und Individualisieren ansetzen müssen... 19

Wo Sie fürs Optimieren und Individualisieren ansetzen müssen... 19 Inhalt Über die Autoren... 5 1. Wie komme ich zu meinem eigenen Wunschdesign?... 13 1.1 Warum ein Content Management System?... 14 1.2 Wie finde ich den Einstieg?... 14 2. Die Anatomie eines web to date-projekts:

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

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

Mehr

Webdesign mit HTML und CSS Einführungsabend

Webdesign mit HTML und CSS Einführungsabend Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung Das HTML Grundgerüst HTML ist ein Kompromiss

Mehr

Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien...

Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien... Teil I: Das Design 1 Webdesign und Webstandards... 17 2 Gestaltung und Layout... 51 3 Typografie... 105 4 Farbe 129 5 Medien... 145 AUF EINEN BLICK 6 Werkzeugkasten... 159 Teil II: Die Technik 7 (X)HTML

Mehr

Webseite in XML Kurzeinführung

Webseite in XML Kurzeinführung Webseite in XML Kurzeinführung 1. Entwicklung... 1 2. Erste Webpage in XML... 2 2.1 Erstes Beispiel... 2 2.2 Tags definieren... 4 2.3 Kommentare in XML... 5 2.4 XML mittels CSS im Browser ansehen... 5

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen  Übersicht der Schulungsinhalte CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr

Mehr

Backend 1.5. http://joomla.aps.it-betreuung.salzburg.at

Backend 1.5. http://joomla.aps.it-betreuung.salzburg.at Backend 1.5 http://joomla.aps.it-betreuung.salzburg.at Aktualisiert von Jörg Hanusch und Willi Koller Februar 2012 CMS Joomla Joomla! ist ein datenbankbasiertes Content Management System (CMS). Es bezieht

Mehr

Einführung: Gestalten von Internet-Seiten

Einführung: Gestalten von Internet-Seiten Einführung: Gestalten von Internet-Seiten Um zu verstehen, wie die Web-Seiten aus dem Web auf den Computer kommen, ist ein kleiner Blick in die Geschichte notwendig. Das Internet erreichte seinen Durchbruch

Mehr

Sachwortverzeichnis... 251

Sachwortverzeichnis... 251 Inhalt Vorwort... V 1 WWW World Wide Web... 1 1.1 Das Internet Infrastruktur und Administration... 2 1.2 Datenübertragung... 4 1.3 Sprachen im Web... 6 1.4 Webseiten... 7 1.4.1 Clientseitige Dynamik...

Mehr

Diese Seite kann auch als pdf-file heruntergeladen werden.

Diese Seite kann auch als pdf-file heruntergeladen werden. Kleines Vademecum für cms 3.0 (artmedic) Trifles-Kleinigkeiten Diese Seite kann auch als pdf-file heruntergeladen werden. Bearbeitungsprogramm starten Browser starten In Browserfenster der Website.ch/cms_index.php

Mehr

Referenzen Frontend und PHP

Referenzen Frontend und PHP Referenzen Frontend und PHP Stand: Dezember 2014 - Startseite Stand: Dezember 2014 - Seite wird mit PHP aus mysql Datenbank generiert - HTML5 und CSS3 - Aufbau mit - validiert von W3C www.georgien-nachrichten.de

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

Inhaltsverzeichnis. Teil 1: Willkommen im Web... 7. Die fehlenden Danksagungen... XIII. Einleitung... 1

Inhaltsverzeichnis. Teil 1: Willkommen im Web... 7. Die fehlenden Danksagungen... XIII. Einleitung... 1 Inhaltsverzeichnis Die fehlenden Danksagungen........................................... XIII Einleitung................................................................... 1 Teil 1: Willkommen im Web.....................................

Mehr

OCG Webmanagement. ECDL Image Editing (Photoshop) (WM1)

OCG Webmanagement. ECDL Image Editing (Photoshop) (WM1) OCG Webmanagement Sie verfolgen das grundlegende Ziel, anspruchsvolle Fertigkeiten in verschiedenen Bereichen des Webpublishing zu erlangen. Nach der Absolvierung dieses Kurses sind Sie in der Lage, professionelle

Mehr

33 CSS in HTML einbinden

33 CSS in HTML einbinden D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben

Mehr

44 2CSS* Basistext. 2.1 Was ist CSS? *

44 2CSS* Basistext. 2.1 Was ist CSS? * 44 2CSS* fohlen. Alle offiziellen Informationen zu CSS finden Sie auf der W3C-Website (http://www.w3.org) und der Cascading Style Sheets Home Page (http://www.w3.org/style/css) des W3C. 2.1 Was ist CSS?

Mehr

Homepageerstellung mit WordPress

Homepageerstellung mit WordPress Homepageerstellung mit WordPress Eine kurze Einführung in die Installation und Einrichtung von WordPress als Homepage-System. Inhalt 1.WordPress installieren... 2 1.1Download... 2 1.2lokal... 2 1.2.1 lokaler

Mehr

Angewandte Informatik

Angewandte Informatik Angewandte Informatik Teil 9.1 Web Seiten V1.3 12.03.2011 1 von 37 Inhaltsverzeichnis 3... Welche Browser werden verwendet? 4... Mit welchen Browser surft die Welt? 5... Wie kommt der Browser zur Seite?

Mehr

Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung...

Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung... Inhaltsverzeichnis Die fehlenden Danksagungen........................................... Einleitung................................................................... XI XV Teil 1: CSS-Grundlagen Kapitel

Mehr

Webdesign mit HTML & CSS

<Trainingsinhalt> Webdesign mit HTML & CSS Webdesign mit HTML & CSS Einführung...11 Das Internet, das Web und HTML...12 Offen, doch nicht gleich...13 Der Krieg der Browser...14 Ein Schub in Richtung Standards...15 Das aktuelle

Mehr

Websitekonzeption, Design, XHTML, CSS, HTML 5, Scripting

Websitekonzeption, Design, XHTML, CSS, HTML 5, Scripting Webdesign/Codierung... 1 Adobe CS3 - CS6 für PC und MAC... 2 Online-Marketing, Website-PR... 3 Search Engine Optimization (SEO)... 4 Websitekonzeption, Design, XHTML, CSS, HTML 5, Scripting Konzept Grobplanung

Mehr

Warum brauche ich eine Website?

Warum brauche ich eine Website? Der Internetauftritt: Anforderungen, Erfahrungswerte & Praxistipps Warum brauche ich eine Website? Seite 1 Warum brauche ich eine Website? IDas Internet ist aus unserem Alltag nicht mehr wegzudenken. IPatienten

Mehr

HTML. HyperText Markup Language. von Nico Merzbach

HTML. HyperText Markup Language. von Nico Merzbach HTML HyperText Markup Language von Nico Merzbach Kapitel 1 Was ist HTML? Was ist HTML? Einführung: HTML ist eine (Hypertext-)Auszeichnungssprache. Mit Hilfe von HTML strukturiert man Inhalte wie Text,

Mehr

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7 HTML Kurs Dominic Dietiker Aktualisierung: February 13, 2009 Inhaltsverzeichnis 1 Das HTML-Dokument 2 2 Einige Tags 7 3 Erarbeiten weiterer Tags 11 4 Tabellen 11 A Lösungen 16 1 1 Das HTML-Dokument Tags

Mehr

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

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

HTML und CSS. Eine kurze Einführung

HTML und CSS. Eine kurze Einführung HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett

Mehr

Webseiten-Programmierung

Webseiten-Programmierung Webseiten-Programmierung Sprachen, Werkzeuge, Entwicklung Bearbeitet von Günter Pomaska 1. Auflage 2012. Taschenbuch. xii, 255 S. Paperback ISBN 978 3 8348 2484 4 Format (B x L): 16,8 x 24 cm Weitere Fachgebiete

Mehr

Cascading Stylesheets (CSS)

Cascading Stylesheets (CSS) Cascading Stylesheets (CSS) Cascading Stylesheets trennen Webdesign vom eigentlichen Inhalt. Die Vererbung, sprich Kaskadierung, von festgelegten Stilen wird allerdings erst bei fortgeschrittenen Programmierkenntnissen

Mehr

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

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH DOZENTENTEAM FÜR JEDES THEMA EIN SPEZIALIST ANDI KELLER andi@4eyes.ch Mitgründer von 4eyes

Mehr

Maik Derstappen. maik.derstappen@derstappen-it.de www.derstappen-it.de. ein freies Content Management System

Maik Derstappen. maik.derstappen@derstappen-it.de www.derstappen-it.de. ein freies Content Management System Maik Derstappen maik.derstappen@derstappen-it.de www.derstappen-it.de ein freies Content Management System 1 Was ist Plone? 2 Was ist Plone? Plone ist ein Content Management System (CMS) Plone ist in der

Mehr

Design-Tipps zur Gestaltung von Webseiten mit CM4all Business

Design-Tipps zur Gestaltung von Webseiten mit CM4all Business Design-Tipps zur Gestaltung von Webseiten mit CM4all Business Content Management AG 1 www.cm4allbusiness.de Inhalt 1. Typografie & Textformatierung...3 1.1 Schriftarten... 3 1.2 Schriftgrößen und -schnitte...

Mehr

CLASSROOM IN A BOOK. Adobe GoLive cs2

CLASSROOM IN A BOOK. Adobe GoLive cs2 CLASSROOM IN A BOOK Adobe GoLive cs2 Inhalt Einführung Über dieses Buch................................... 17 Voraussetzungen................................... 17 Adobe GoLive installieren...........................

Mehr

Spickzettel. Dokumentation zum Wordpress-Workshop. www.sternundberg.de

Spickzettel. Dokumentation zum Wordpress-Workshop. www.sternundberg.de Spickzettel Dokumentation zum Wordpress-Workshop www.sternundberg.de Inhaltsverzeichnis Was ist Wordpress? Login Benutzer / Benutzergruppen Wordpress-Benutzeroberfläche Backend Eine Seite erstellen Unterschied

Mehr

BERUFSBEGLEITENDE WEB-ABENDKURSE

BERUFSBEGLEITENDE WEB-ABENDKURSE BERUFSBEGLEITENDE WEB-ABENDKURSE ZIELGRUPPE Das Angebot richtet sich an Privatpersonen, Unternehmen sowie deren Mitarbeiter, die sich gezielt berufsbegleitend weiterbilden möchten. In kompakter und zielorientierter

Mehr

Anbieter. Beschreibung des. alfatraining. Bildungszentru. m Chemnitz. Angebot-Nr. 00799524. Angebot-Nr. Bereich. Berufliche Weiterbildung.

Anbieter. Beschreibung des. alfatraining. Bildungszentru. m Chemnitz. Angebot-Nr. 00799524. Angebot-Nr. Bereich. Berufliche Weiterbildung. Professionelles Webdesign und CMS in Chemnitz Angebot-Nr. 00799524 Bereich Angebot-Nr. 00799524 Anbieter Berufliche Weiterbildung Termin 09.03.2015-29.05.2015 alfatraining Bildungszentru Montag bis Freitag

Mehr

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt? Hinweis: Verstehen Sie folgende Aufgaben als mögliche Bestandteile für die anstehende Klausur. Betrachten Sie die Lösungen nicht von vorne herein als richtig, sondern beantworten Sie nochmals die Fragen

Mehr

Responsive Webdesign. Schritt für Schritt zum Design für jedes Endgerät

Responsive Webdesign. Schritt für Schritt zum Design für jedes Endgerät Responsive Webdesign Schritt für Schritt zum Design für jedes Endgerät Was ist responsive Design? Ganz kurz: Responsive Webdesign beschreibt eine technische und gestalterische Methode, Inhalte Ihrer Webseite

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

Easy Mobile Homepage. Nützliche Tipps für die Nutzung der Software. 2011 Die Software ist urheberrechtlich geschützte Freeware - all rights reserved

Easy Mobile Homepage. Nützliche Tipps für die Nutzung der Software. 2011 Die Software ist urheberrechtlich geschützte Freeware - all rights reserved Easy Mobile Homepage Nützliche Tipps für die Nutzung der Software Danke für Ihr Interesse! Danke für Ihr Interesse an unserer neuen Software und wir freuen uns darüber, dass Sie die Tutorials angefordert

Mehr

http://www.video2brain.com/de/products-582.htm

http://www.video2brain.com/de/products-582.htm André Reinegger führt Sie grundlegend in Dreamweaver CS5 ein und macht vor fortgeschrittenen Themen nicht halt. Lernen Sie die Struktur von XHTML-Seiten kennen genauso wie die Vorzüge vom Gestalten mit

Mehr

Arbeitsbuch AKTUELLE ENTWICKLUNG ANGEWANDTER INFORMATIK

Arbeitsbuch AKTUELLE ENTWICKLUNG ANGEWANDTER INFORMATIK Die Struktur des Arbeitsbuches ist folgender Tabelle zu entnehmen: Symbol Bezeichnung Funktion Situationsbeschreibung Problematisierung und praxisnahe Hinführung Aufgabe, die am PC ausgeführt wird Programmschulung

Mehr

Version 30.07.2007 - Pädagogische Hochschule Freiburg, Peter Huppertz

Version 30.07.2007 - Pädagogische Hochschule Freiburg, Peter Huppertz Babysteps Backend - Hauptmenü Neue Seite anlegen Seiteneigenschaften bearbeiten Inhaltselemente erstellen Inhaltselemente bearbeiten Übersicht der Seitenlayouts Bearbeiten von Personen Anzeigen von Personendaten

Mehr

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse Felix Kopp Orientierung Veröffentlichen und Aktualisieren ohne Programmierkenntnisse Bestehende Internet-Seite aktualisieren. oder

Mehr

Auf einen Blick Teil I Einführung Teil II Ein Websiteprojekt Teil III Dreamweaver im Detail Teil IV Über Dreamweaver hinaus

Auf einen Blick Teil I Einführung Teil II Ein Websiteprojekt Teil III Dreamweaver im Detail Teil IV Über Dreamweaver hinaus Auf einen Blick Teil I Einführung... 21 1 Ein Platz im Internet... 23 2 Die Sprachen des Web... 35 3 Dreamweaver im Vergleich... 49 4 Dreamweaver CS5 los geht s... 63 5 Die Arbeitsumgebung... 79 Teil II

Mehr

Webdesign mit (X)HTML und CSS

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*

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

Kapitel 3. Wichtige HTML-Elemente (1)

Kapitel 3. Wichtige HTML-Elemente (1) Kapitel 3 Wichtige HTML-Elemente (1) Worin Sie die wichtigsten HTML-Elemente kennenlernen. Sie teilen die Webseite zunächst in Bereiche ein und beginnen dann mit der Erstellung eines sinnvoll strukturierten

Mehr

1. So einfach ist web to date: in wenigen Schritten zur eigenen kleinen Webpräsenz 11

1. So einfach ist web to date: in wenigen Schritten zur eigenen kleinen Webpräsenz 11 Inhaltsverzeichnis 1. So einfach ist web to date: in wenigen Schritten zur eigenen kleinen Webpräsenz 11 1.1 Eine kleine Website, z. B. für Ihr Ladengeschäft, blitzschnell anlegen 12 1.2 Von der Web-Visitenkarte

Mehr

HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache

HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache HTML HyperText Markup Language Die Programmiersprache des WWW Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache systemübergreifend, plattformunabhängig (im Idealfall) HTML-Text

Mehr

Webseiten erstellen mit Expression Web Teil 2

Webseiten erstellen mit Expression Web Teil 2 Webseiten erstellen mit Expression Web Teil 2 Herzlich Willkommen Webentwicklung mit Expression Web Kursleiter: Steffen Schwientek Kursverlauf 2. Wochenende Modelle zur Webseitengestaltung Tabelle Anhand

Mehr

Formatieren in Word 2007

Formatieren in Word 2007 Formatieren in Word 2007 Formatierungsmöglichkeiten im Allgemeinen Einfache Formatierungen werden hier vorgenommen, In der Regel ist es aber sinnvoller mit Formatvorlagen für unterschiedliche Absätze zu

Mehr

Kapitel 1. Grundlagen des Worldsoft-CMS

Kapitel 1. Grundlagen des Worldsoft-CMS Kapitel 1 Notwendige Voraussetzungen für diese Schulung: Internetfähiger Computer mit aktuellem Browser (z.b. Firefox, Internet Explorer) Bild- und Textvorlagen: Diese Vorlagen finden Sie auf der CC-Website

Mehr

Arbeiten im Datennetz der Universität Regensburg

Arbeiten im Datennetz der Universität Regensburg Wiwi-Workshop Uni Regensburg April 2002 Arbeiten im Datennetz der Universität Regensburg - Einführung in HTML, Teil II Arbeiten mit AOLPress - Dr. Wirtschaftswissenschaftliche Fakultät Universität Regensburg

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

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

Bedienungsanleitung für Ihre Homepage

Bedienungsanleitung für Ihre Homepage Bedienungsanleitung für Ihre Homepage Inhaltsverzeichnis Einführung in das Redaktionssystem... 3 Im Backend einloggen... 4 Zwischen Frontend und Backend wechseln... 5 Webseitenformate im Redaktionssystem:

Mehr

Zimplit CMS Handbuch. Einführung. Generelle Informationen

Zimplit CMS Handbuch. Einführung. Generelle Informationen Zimplit CMS Handbuch Einführung Dieses Dokument gibt Ihnen einen Überblick über die Nutzeroberfläche des Zimplit CMS (Content Management System) und seinen Funktionen. Generelle Informationen Version:

Mehr

Wiki Dokumentation. Erstellt von:

Wiki Dokumentation. Erstellt von: Wiki Dokumentation Erstellt von: Wiki Dokumentation www.verkaufslexikon.de Allgemeines Wikipedia, ein Enzyklopädie Projekt der Wikimedia Foundation, ist ein Wiki, d. h. eine Website, deren Seiten man direkt

Mehr

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

Beuth Hochschule Die erweiterbare Markierungssprache XML WS10/11

Beuth Hochschule Die erweiterbare Markierungssprache XML WS10/11 Die erweiterbare Markierungssprache XML 1. Einleitung Eine Markierungssprache (markup language) dient dazu, Textdateien mit zusätzlichen Informationen anzureichern. Die verbreitete Markierungssprache HTML

Mehr

Schiller-Gymnasium Hof 20.12.2004

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

Mehr

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39 Inhaltsverzeichnis Einführung....................................... 1 HTML und CSS im Überblick............................ 2 Browser........................................ 3 Webstandards und Webspezifikationen......................

Mehr

Navigation für Internetpräsenzen

Navigation für Internetpräsenzen Navigation für Internetpräsenzen Gestern und heute 2016 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben

Mehr

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [ Björn Seibert Manuela Hoffmann Professionelles Webdesign I mit (X)HTML und CSS [ Inhalt Vorwort 11 Über das Buch 11 Über die Autoren 12 Teil I Bevor es losgeht... 15 1 Einfach moderne Websites 19 1.1 Auf

Mehr

Barrierefreie Website der LNG Fulda

Barrierefreie Website der LNG Fulda 1 BLUEPAGE CMS - Success Stories Barrierefreie Website der LNG Fulda Ausgangslage Über die Website der Lokalen Nahverkehrsgesellschaft Fulda mbh finden Besucher aktuelle Informationen über gültige Liniennetzpläne,

Mehr

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

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

Mehr

Proseminar: Website-Management-Systeme

Proseminar: Website-Management-Systeme Proseminar: Website-Management-Systeme Thema: Web: Apache/Roxen von Oliver Roeschke email: o_roesch@informatik.uni-kl.de Gliederung: 1.) kurze Einleitung 2.) Begriffsklärung 3.) Was ist ein Web? 4.) das

Mehr

HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze Hilfreiche Links und Bücher http://holdirbootstrap.de/ (deutsch) bzw. http://getbootstrap.com (englisch) https://www.youtube.com/playlist?list=pl41lfr-

Mehr

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: 11.04.2005. CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: 11.04.2005. CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de DYNAMISCHE SEITEN Warum Scriptsprachen? Stand: 11.04.2005 CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de I N H A L T 1 Warum dynamische Seiten?... 3 1.1 Einführung... 3 1.2 HTML Seiten...

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 DotNetNuke Version 7+ w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 15.08.2013

Mehr