"Joomla! Templateerstellung für Einsteiger"
|
|
|
- Ulrich Fiedler
- vor 7 Jahren
- Abrufe
Transkript
1 "Joomla! Templateerstellung für Einsteiger" Autor: Erich Hengstberger History: Version (beginnend mit 1.0) Status (Im Entwurf/ Review- Exemplar/ Freigegeben) Datum (TT.MM.JJ) 1.0 Im Entwurf Final /
2 INHALTSVERZEICHNIS 1 ZIEL DIESES TUTORIALS VORAUSSETZUNGEN Joomla Editor zur Erstellung des Templates ERSTELLEN DES TEMPLATES Fertiges Template Design Aufbau Anlegen der Ordnerstruktur und Dateien Zwingend benötigte Dateien Erstellen der Datei index.php Erstellen der Datei test.xml Erstellen der Datei test_css.css INSTALLATION DES TEMPLATES IN JOOMLA ZUSAMMENFASSUNG LINKSAMMLUNG /
3 1 ZIEL DIESES TUTORIALS Ziel dieses Tutorials ist es, dass ein Joomla! Einsteiger eigene Templates erstellen und diese mit Joomla! verwenden kann. Beschrieben wird anhand eines Beispiels der Aufbau des Templates nach den Joomla! Richtlinien. 2 VORAUSSETZUNGEN 2.1 Joomla Eine Installation von Joomla! wird hier nicht beschrieben. Getestet wurde das Tutorial mit der Version , die unter zum download bereitsteht, Stand April/ Editor zur Erstellung des Templates Zur leichteren Verständnis wurde in diesem Tutorial auf aufwendige Webeditoren, wie Dreamwaver oder Frontpage, sowie auf Zeichenprogramme, wie Photoshop, verzichtet. Das Beispiel im Tutorial wird ausschließlich mit einem einfachen Editor erstellt. Es wurde daher auch auf Grafiken verzichtet, auf die aber im Text darauf hingewiesen wird. 3/
4 3 ERSTELLEN DES TEMPLATES 3.1 Fertiges Template Zur leichteren Verständnis wurde das Template möglichste einfach gehalten. 4/
5 3.2 Design Aufbau Das Template besteht aus einem Kopf und Fuß-Bereich, einem linken und rechten Bereich sowie den mittleren Bereich für den Inhalt. 3.3 Anlegen der Ordnerstruktur und Dateien templatename (test) css template_css.css (test_css.css) (Ordner für alle css-dateien) images logo.gif (Ordner für Bilder, die im Template verwendet werden) templatedetails.xml (test.xml) template_thumbnail.png (test.png)<<- Screenshot des Templates mit 200x150px index.php 5/
6 3.3.1 Zwingend benötigte Dateien Joomla! benötigt in einem Template bestimmte Dateien damit die Anzeige funktioniert. index.php: Die Hauptdatei in der die Modul- und Inhaltspositionen festgelegt werden ( oder zumindest die Container dafür erzeugt werden) templatedetails.xml: Die Installationsinformationen css/template_css.css: Ein Cascading Style Sheet. Hier werden die Formatierungen für den Inhalt festgelegt. Muss nicht zwingend template_css.css heißen. 3.4 Erstellen der Datei index.php Um das Template zu entwickeln wurde als erstes ein Grundgerüst als HTML erstellt (index.html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <?xml version="1.0"?> <html xmlns=" <head> </head> <body> <title></title> <div align="center"> <table border="0" width="900px" height="500px"> <tr height="80px"> </tr> <tr> </tr> <td width="150px">logo</td> <td>kopf-bereich</td> <td width="150px"> </td> <td valign="top">linker Bereich</td> <td valign="top">inhalt</td> <td valign="top">rechter Bereich</td> <tr height="80px"> <td> </td> <td></td> <td>fuß Bereich</td> 6/
7 </tr> </table> </div> </body> </html> Nun wird die bestehende HTML Datei (index.html) auf eine PHP-Datei umbenennt (index.php) und mit den Joomla! Vorgaben ausgestattet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <?php echo "<?xml version=\"1.0\"?>";?> <html xmlns=" <head> <title><?php echo $mosconfig_sitename;?></title> <meta http-equiv="content-type" content="text/html; <?php echo _ISO;?>" /> <?php mosshowhead();?> <link href="<?php echo $mosconfig_live_site;?>/templates/test/css/test_css.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="<?php echo $mosconfig_live_site;?>/images/favicon.ico" /> </head> <body> <div align="center"> <table border="0" width="900px" height="500px"> <tr height="80px"> <td width="150px"><img src="<?php echo $mosconfig_live_site;?>/templates/test/images/logo.gif"></td> </tr> <tr> </tr> <td><?php mosloadmodules('header');?></td> <td width="150px"> </td> <td valign="top"><?php mosloadmodules('left');?></td> <td valign="top"><?php mosmainbody();?></td> <td valign="top"><?php mosloadmodules('right');?></td> <tr height="80px"> <td> </td> 7/
8 <td></td> <td><?php mosloadmodules('footer');?></td> </tr> </table> </div> </body> </html> 3.5 Erstellen der Datei test.xml In der Datei test.xml befinden sich alle Hinweiße die Joomla! für die Installation benötigt: <?xml version="1.0" encoding="iso "?> <mosinstall type="template"> <name>test</name> <creationdate> </creationdate> <author>erich Hengstberger</author> <copyright>copyright 2006</copyright> <authorurl> <version>1.0</version> <description>dieses Template ist das Beispiel für das Tutorial Joomla Templateerstellung für Einsteiger</description> <files> <filename>index.php</filename> <filename>test.png</filename> </files> <images> <filename>images/logo.gif</filename> </images> <css> <filename>css/test_css.css</filename> </css> </mosinstall> 8/
9 3.6 Erstellen der Datei test_css.css In der Datei test_css.css befindet sich die Formatierung für das Template: /* TEST CSS FOR JOOMLA! TEMPLATES */ /* By Erich Hengstberger (C) */ /* GENERELLE EINSTELLUNGEN*/ body { background-color:#64b186; } /* Allgemeine Einstellugen für das ganze Template*/ p {} /*Format für alle <p> Tags. Wird nur verwendet, wenn kein anderer Style gesetzt ist.*/ td {} /*Format für alle <td> Tags. Wird nur verwendet, wenn kein anderer Style gesetzt ist.*/ tr {} /*Format für alle <tr> Tags. Wird nur verwendet, wenn kein anderer Style gesetzt ist.*/ ul {} /*Format für alle <ul> Tags. Wird nur verwendet, wenn kein anderer Style gesetzt ist.*/ a:link {color:#0000aa;} /* Link-Styl für das ganze Template*/ a:visited {color:#000000} /* Besuchter Link-Styl für das ganze Template*/ a:active {} /* Aktiver Link-Styl für das ganze Template*/ a:hover {color:#cccccc} /* Angewählter Link-Styl für das ganze Template*/ hr {} /* Horizontale Linie im Template*/ hr.separator {} /* FORMULAR EINSTELLUGEN */.button {}.inputbox {}.search {} /* NAVIGATION/MENÜ EINSTELLUNGEN */ a.mainlevel{ } /*Einstellungen für die Elemente des Hauptmenüs */ a.mainlevel:link, a.mainlevel:visited {} a.mainlevel:active {} a.mainlevel:hover {} #active_menu {} /* Einstellungen für das aktive Element im Hauptmenü*/ ul#mainlevel-nav { } ul#mainlevel-nav li{ } #mainlevel-nav a:link { } #mainlevel-nav a:visited{ } #mainlevel-nav a:hover { } a.sublevel{} /* Einstellungen für Elemente im Hauptmenü, die ein übergeordnetes Element haben */ a.sublevel:link {} 9/
10 a.sublevel:visited {} a.sublevel:hover {}.pagenavbar {} /*Style für die Navigationselemente des Fußbereich ("<< Start < Prev Next > End >>") wenn sie nicht als Hyperlink angezeigt werden*/.pagenavbar:link {} /*Style für die Navigationselemente des Fußbereich ("<< Start < Prev Next > End >>") wenn sie als Hyperlink angezeigt werden*/.pagenavbar:visited {}.pagenav {} >>" links */ a.pagenav:visited {} a.pagenav:hover {} /* Format für den Text der Navigationselemente "<< Start < Previous 1 Next > End a.readon:link {} /*Fromat für den "Read More" Link*/ a.readon:hover {} a.readon:visited {}.back_button {} /*Fromat für den "BACK" Link*/.pagenav_prev {}.pagenav_next {}.latestnews ul {}.latestnews li {} /*Fromat für den "PREV" Link*/ /*Fromat für den "NEXT" Link*/ /*Format für die "Letzte Beiträge" Liste, default ist "Letzte Beiträge" user1-modul*/.mostread ul{} /*Format für die "Beliebtesten Beiträge" Liste, default ist "Beliebteste Beiträge" user2-modul*/.mostread li{} /* SEITENINHALT EINSTELLUGEN */ a.category:link {} a.category:hover {} a.category:visited {}.blogsection {} /* Format für Links in Blog-Sektion */.blog_more {} a.blogsection:link {} /* Format Link */ /* Format für "More" Text in Blog-Sektion*/ a.blogsection:visited {} /* Format besuchter Link */ a.blogsection:hover {} /* Format Link, auf dem der Mauszeiger steht */.componentheading {} /* Format des Titel der Komponente */.contentheading { color:#000000; font-size:15pt;background-color:#cccccc;} Inhalts*/.contentpane {} /* Format des Titel des.contentpaneopen {border-width:medium; border-color:#000000; border-style:double; padding:4px;backgroundcolor:#ffffff;} /* Tabelle die den aktuellen Text eines Artikels hat */.contentpagetitle {} /*Titel eines Artikel */ 10/
11 a.contentpagetitle:hover {} /*Titel eines Artikels, wenn er eni Link ist */ a.contentpagetitle:link {} a.contentpagetitle:visited {}.contentdescription {} /* Format von "DESCRIPTION" von Sektionen und Kategorien */ table.contenttoc {} /* Format für die Tabelle einer Tabelle mit mehreren Inhalten oder Artikel */ table.contenttoc td {} table.contenttoc th {} table.contenttoc td.toclink {} a.toclink:link {} a.toclink:visited {} a.toclink:hover {} /* JOOMLA! SEKTION LISTE EINSTELLUNG*/.sectiontableheader {} /* Format für die Liste der Sektione */.sectiontableentry1 {}.sectiontableentry2 {} /* JOOMLA! MODUL EINSTELLUNG */ table.moduletable {margin-top:5px; border-width:medium; border-color:#000000; border-style:double; padding:4px; width:200px;} /* Format der Modul-Tabelle */ table.moduletable th { background-color:#cccccc;} /* Format der Modulüberschrift und Modulttitel */ table.moduletable td { background-color:#ffffff;} /* Format der Zellern der Tabelle der Module */ /* VERSCHIEDENE EINSTELLUGEN */ /* Datum, Autor*/.createdate {color:#cccccc; font-size:10pt; text-align:left;} /*Format für Datum und Autor */.modifydate {color:#cccccc; font-size:10pt;} /* Format für "Last updated on" */.small {color:#cccccc; font-size:10pt;} /* Format für "Written by:..." */.smalldark {color:#111111; font-size:10pt;} /* Formatfür Umfrageergebnisseite, für " Number of Voters" */ /* Umfrage */.poll {} /* Format für td der Umfragetabelle */.pollstableborder {} /* Eigenschaften der Umfragetabelle */ /* Weblinks */ 11/
12 .weblinks{} a.weblinks:hover {} /* Newsfeeds */.newsfeedheading {} /* Format des Newsfeed Titels */.newsfeeddate {} /* Datum des Newsfeed */.fase4rdf {} /* Format des Inhalts des Newsfeed */ /* Suche */ table.searchintro {} angezeigt wird. */ /* Format für "Search Keyword: test returned 4 matches" Box, die nach der Suche 4 INSTALLATION DES TEMPLATES IN JOOMLA Die Dateien müssen nun gepackt werden (test,zip) und können danach im Admin-Bereich von Joomla! installiert werden. 5 ZUSAMMENFASSUNG In diesem einfachen Tutorial wurden nur die Grundzüge zur Erstellung eines eigenen Templates gezeigt. Es soll einen Ausgangspunkt für eigene Designs darstellen, und kann, durch den unkomplizierten Aufbau, ganz leicht selber erweitert werden. Um das Design auf seine Wünsche zu bringen, macht es Sinn, die css-datei anzupassen, und sich das fertige Template immer wieder anzusehen. 6 LINKSAMMLUNG Wikibook: Joomlart (Erklärung zu css): es.html meine Seite: Joomla! Österreich: 12/
Vom Design zum Template
Joomla Templates entwickeln Titel des Workshops/Vortrages Vom Design zum Template Der Joomla!Day fördert Eine Veranstaltung von : Tom Copyright by : etc. Übersicht Titel des Workshops/Vortrages Fragen
Navigationsmenü im Stil von Registern
Navigationsmenü im Stil von Registern Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben
TUTORIAL: EIGENE TEMPLATES IN JOOMLA!1.6
2011 www.time4mambo.de Axel Tüting Version 1.0 TUTORIAL: EIGENE TEMPLATES IN JOOMLA!1.6 In diesem Tutorial wird erklärt, wie man ein einfaches Template erstellen kann. Es wird ein sehr einfaches drei Spalten-Template
Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS
Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,
Template Programmierung mit Joomla!
Joomla! DAY TM AUSTRIA 2015 Template Programmierung mit Joomla! Inhalt Einstieg in die Joomla! Template Programmierung Inhalt Einleitung Planung Joomla! Template Programmierung Joomla! Template Demo Fragen
Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch
Joomla! Templates Professionelle Vorlagen mit CSS Daniel Koch Daniel Koch Joomla!-Templates Professionelle Vorlagen mit CSS Daniel Koch Joomla!-Templates. Professionelle Vorlagen mit CSS ISBN: 978-3-86802-325-1
HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick
HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der
Die Funktionalität von Suchportalen
Studiengang Sprache und Kommunikation 1/6 Die Funktionalität von Suchportalen Anweisungen zur Erstellung eines eigenen Suchportals Ziel dieser Übung ist es, ein eigenes kleines Suchportal zu einem spezifischen
Erste Schritte mit XHTML
Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701
Allgemeine Technologien II Sommersemester Mai 2011 CSS
Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden
Unterschied zwischen HTML & XHTML?
Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare
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
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...
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
aft irtsch Der Vorfilm... er W er d artn etp tern In
Vitamine für Ihr Business Unser Thema heute: Catwalk für den König - Teil 1 Der Vorfilm... Was wir für unsere Kunden tun... tun wir seit 1996. Wir betreiben Ihre Services. DC Berlin 1 DC Berlin 2 auf eigener
Joomla 1.5. Einführung in die Installation und Benützung
Joomla 1.5 Einführung in die Installation und Benützung Programm Was ist Joomla Installation auf Ubuntu Benützung von Joomla Templates wechseln Nützliche Komponenten Weiterführende Informationen Was ist
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger
Start HTML Crash-Kurs Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default
Eine Schnelleinführung in CSS
Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:
Bitte beachten Sie auch unbedingt die aktualisierten Theme-Dateien im Download-Bereich des Buches!
1 Errata Liebe Leserin, lieber Leser, ich möchte mich vielmals bei Ihnen bedanken, dass Sie mein Buch WordPress 3 Das umfassende Handbuch aus dem Galileo Press Verlag gekauft haben. Doch wie das im Leben
PDF. PDF-Generierung aktivieren. Methode zum Erzeugen der PDFs. PDF-Format. Seitengröße. Anzunehmende Browserbreite
PDF Einstellungen zur PDF-Generierung. PDF-Generierung aktivieren Aktiviert die PDF-Generierung für diesen Mandanten. Der Link - über welchen auf der Website das PDF erzeugt wird - muss manuell ins Template
Grundlagen-Beispiel CSS
Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:
Tutorial XML3D + Blender
Tutorial XML3D + Blender Deutsch - Windows ab XP- 2011 by SE V 0.1 Vorwort Diese kleine Tutorial entstand aus dem Problem das es aktuell noch kein Deutsches gibt. Ich versuche alles so zu erklären, das
Inhaltsverzeichnis TEIL Einleitung 17. Kapitel 1 Die Basis: die inhaltliche und visuelle Konzeption 21
3 Inhaltsverzeichnis TEIL 1 15 Einleitung 17 Was Sie erwarten können... 18 Worauf Sie sich einstellen sollten... 18 Wie Sie sich vorbereiten können... 19 Kapitel 1 Die Basis: die inhaltliche und visuelle
Praktikum zur Veranstaltung XML-Technologie: Übung 09
Fachhochschule Wiesbaden - Fachbereich Informatik Praktikum zur Veranstaltung XML-Technologie: Übung 09 XSLT Eine HTML-Tabelle 06.01.2005 (c) 2004 H. Werntges, FB Informatik, FH Wiesbaden 1 Organisatorisches
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Übung: Bootstrap - Navbar
Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:
hotelanfrage_sample <td align = "center"> <select name=dy0 size=1 class="smalltext"> <option selected value="0"><< kein Erwachsener
capcorn Zimmersuche
Erstellt bei Teris Cooper Freie Nutzung des PDF Dokuments.
MySql Class für PHP 26. Februar 2014 Hier möchte ich Ihnen einmal ein Script vorstellen, welche Hilfreich ist. Sowohl in kleineren Webseiten als auch in Komplexeren CMS Systemen. Zu beginn benötigen wir
Modul 8: Browser-Processing- Pipeline
Modul 8: Browser-Processing- Pipeline 10.06.2018 16:20:17 M. Leischner Internetkommunikation Folie 1 Grundmodell: Webbrowser Copyright 2013 Ilya Grigorik. Published by O'Reilly Media, Inc. Licensed under
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
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,
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(
Wenn ich mit der Maus auf das fehlende Bild gehe und Bild anzeigen wähle, dann wird das fehlende Bild angezeigt.
Problemschilderung: Im Browser soll eine Seite angezeigt werden, die aus diversen Bildern besteht. Zum einen der Grundriß der Wohnung, zum anderen der aktuelle Status des Rolladens. Rechts noch eine Legende.
Ändern der Schriftgröße für den Monitorexport
Ändern der Schriftgröße für den Monitorexport (Stand: 12/2017) In der Datei SUBST_ MO NITOR sind einige wenige Einträge zu ändern. Die Datei finden Sie im Programmverzeichnis von Untis: Wenn Sie diese
Abgabetermin: , 23:59 Uhr
HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo
Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S.
128 5XHTML&CSS* Wissensbaustein»CSS: ID-Attribut«(S. 180) Wissensbaustein»CSS: Umrandungen«(S. 182) Wissensbaustein»CSS: Füllungen & Abstände«(S. 185) Wissensbaustein»CSS: Pseudo-Klassen & -Elemente«(S.
Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10
CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...
Projektseminar "Texttechnologische Informationsmodellierung"
Projektseminar "Texttechnologische Informationsmodellierung" Markup- und Metasprachen Ziel dieser Sitzung Nach dieser Sitzung sollten Sie: Mit dem Begriffen Markupsprachen bzw. Auszeichungssprachen und
Information und ihre Darstellung: XHTML & CSS
Information und ihre Darstellung: XHTML & CSS PL Speyer Daniel Jonietz 2011 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. Was ist XHTML? Textbasierte Auszeichnungssprache
Anmerkungen zur Abgabe
Die Blätter dürfen in Gruppen von bis zu zwei Personen bearbeitet werden. Abgabe individuell bis zum 05.12.2018, 23:59 Uhr per Mail an den jeweiligen Tutor und. Als Betreff bitte gdmi-[rot GRÜN BLAU]-Matrikelnummer1-Matrikelnummer2-5
Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei
Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.
Dokumentation Externe Anzeige von Evento Web Dialogen
Dokumentation Externe Anzeige von Evento Web Dialogen Autor: Roger Guillet Telefon 058 404 83 57 E-Mail roger.guillet@crealogix.com CREALOGIX Evento Postfach 112, Baslerstrasse 60 CH-8066 Zürich Telefon
Erstellen eines HTML-Templates mit externer CSS-Datei
Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
HTML Theoriefragen 1. Wofür steht die Abkürzung HTML? 2. Warum ist HTML keine Programmier sprache? 3. Wofür steht die Abkürzung DTD? 4. Beantworten Sie die Fragen zur folgenden DTD:
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
Introduction to Technologies for Interaction Design. Stylesheets
Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen
Meine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
XSLT XSL Transformations
XML-Praxis XSLT XSL Transformations Teil 1 Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Namespaces XPath einfache XSLT-Stylesheets template rules default rules XML-Praxis XSLT XSL Transformations,
Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015
Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur
Signatur mit Formatierung
Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,
1 Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
Ein EIGENES custom field Erstellen. Joomlacamp Essen 2018 #jc18de
Ein EIGENES custom field Erstellen Joomlacamp Essen 2018 #jc18de Ich BIN EliSa Twitter: @elisasophia Joomladay Germany 2017 #jd17de EingabeFelder -> AusGABE Was Sind Custom FielDs? Wo Kann ich SIE VERWENDEN?
XSLT XSL Transformations
XML-Praxis XSLT XSL Transformations Teil 1 Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Namespaces XPath einfache XSLT-Stylesheets template rules default rules XML-Praxis XSLT XSL Transformations,
Joomla! 1.6. Anja Ebersbach, Markus Glaser, Radovan Kubani. Grundlagen. 1. Ausgabe, Juli 2011 JMLA16
Joomla! 1.6 Anja Ebersbach, Markus Glaser, Radovan Kubani 1. Ausgabe, Juli 2011 Grundlagen JMLA16 Inhalt Joomla! 1.6 - Grundlagen I Zu diesem Buch...4 6.8 Unterschiedliche Darstellung der Inhalte... 83
Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10
HTML Inhaltsverzeichnis HTML Grundlagen... 3 Was ist HTML... 3 URL... 3 HTTP... 3 WWW Funktionsweise... 3 HTML Grundgerüst... 4 Grobes Grundgerüst... 4 Feines Grundgerüst... 4 HTML-Elemente... 5 Tags...
Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut
Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen
Programmdokumentation. VBSkript zum Erstellen eines Verzeichnislistings als HTML Datei
Programmdokumentation VBSkript zum Erstellen eines Verzeichnislistings als HTML Datei Michael Puff Version : 1.0 erstellt : 2007-02-26 zuletzt geändert : 2007-02-26 Homepage : http://www.michael-puff.de
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente
Inhaltsübersicht.
Inhaltsübersicht 1 Willkommen bei Joomla 3 13 2 Joomla 3 installieren 17 3 Erste Schritte mit Joomla 3 43 4 Inhalte erstellen und verwalten 57 5 Kategorien - die Inhalte organisieren 109 6 Menüs erstellen
Freud & Leid des DSP-Entwicklers
Freud & Leid des DSP-Entwicklers Dynamic Server Pages in der Praxis Uniface Dynamic ServerPages CompuwareBenutzerGruppe e.v. WorkShop Neu-Isenburg, März 2010 Dynamic Server Pages in der Praxis CU 2008
V by WBR1/BFH-TI 2011 by MOU2/BFH-TI
Java-Applets Unterlagen zum Modul OOP mit Java V 3.0 2007 by WBR1/BFH-TI 2011 by MOU2/BFH-TI Java-Applets V3.0 2011 by WBR1&MOU2/BFH- TI Lernziele Die Kursteilnehmer sind in der Lage: Möglichkeiten und
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15
HTML Tutorial Part I - Einführung und erste Texte schreiben
HTML Tutorial Part I - Einführung und erste Texte schreiben Hallo und Herzlich Willkommen auf meiner Seite. Hier dreht sich alles um das Thema HTLML Programmierung. Das ganze beginnt bei den einfachsten
Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger
Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen
Joomla! 1.7 BASIS Template
Joomla! 1.7 BASIS Template Autor: Roland Meier Erstelldatum: 15. September 2011 16:27:45 Änderungsdatum: 20. September 2011 18:42:06 Version: 1.0 Lizenzbestimmungen Dieses Dokument unterliegt einer Creative
Jonas Hellwig/Christian Gatzen. Word Press^Themes. Design und I lüir Word Press. 3. Mit 409 Abbildungen
Jonas Hellwig/Christian Gatzen Word Press^Themes Design und I lüir Word Press. 3 Mit 409 Abbildungen Inhaltsverzeichnis Webdesign mit WordPress 13 1.1 WordPress-Community 13 1.2 Webdesign-Basics 14 1.2.1
Custom Themes from Scratch Stefan Fröhlich. WordCamp Nürnberg 2016
Custom Themes from Scratch Stefan Fröhlich WordCamp Nürnberg 2016 Stefan Fröhlich seit 1995 freiberuflicher Entwickler seit 2012: WordPress zunächst Anpassung von Themes und Plugins (genau 2-Mal) Danach
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche
Kapitel 3 CSS und HTML Das Grundgerüst in Form bringen 59
4 I n h a l t s v e r z e i c h n i s 2.5 Lernbehinderungen... 56 2.5.1 Ausgangslage und Befund... 56 2.5.2 Was können wir tun?... 57 2.6 Gruppe 50+... 57 2.6.1 Ausgangslage und Befund... 57 2.6.2 Was
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,
Wie in Bootstrap üblich, bestimmen vorgegebene Klassen die Gestaltung.
Bootstrap4 Layout Komponenten Teil 2 Inhalt: 1. Card 2. Accordion 1)cards In der Bootstrap Version 3 gab es die cards noch nicht. Dort wurden noch panels eingesetzt. In Bootstrap 4 wurde die Komponente
CSS-Klassen am Beispiel von List-Definitionen
CSS-Klassen am Beispiel von List-Definitionen Jobst-Hartmut Lüddecke 10. Oktober 2011 Zusammenfassung Es werden verschiedene CSS-Definitionen für den Tag vorgestellt. Diese CSS-Definitionen sollten
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:
Publizieren im Internet
Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
Joomla! 1.5 Extensions
4. Web Development Fulda Treffen Joomla! 1.5 Extensions Erstellung von Plugins, Modulen und Komponenten Achim Fischer Basics: PHP MySQL Extension Typen: Plugins Module Komponenten Worin unterscheiden sich
Inhaltsverzeichnis. Danke schön! 17. i Einleitung Erforderliche Kenntnisse 19. Teil I Grundlagen und Theorie 31
Danke schön! 17 i Einleitung 19 1.1 Erforderliche Kenntnisse 19 1.2 Aufbau des Buches 20 1.3 Website und Demoserver zum Buch 21 1.3.1 Der Downloadbereich 21 1.3.2 Der Demoserver 22 1.4 Wie Sie mit dem
11. Webautomatisierung HTTP Protokoll Tabellen Formulare und Parameter Templates, Graphik Ajax Zustandsinformationen
perldoc CGI use CGI; $q=new CGI; print $q->start_html; use CGI qw( :standard );# :html3 for tables print start_html; # same as object call => h1(); => ul( ); Ul(), UL() tr Tr() use
HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt
HTLM und CSS Eine erste Einführung Karlheinz Zeiner Inhalt 1 Vorbereitung 1 1.1 HTML und CSS 1 1.2 Werkzeuge 1 1.3 Quellen 1 2 Erstes HTML-Dokument erstellen 2 2.1 Website, Webpage 2 2.2 Struktur einer
CSS. Cascading Style Sheets
CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln
Joomla Schulung. Open Source CM-System. Projekt-Nr. 398. Thomas Haussener, MA. 20. Juni 2007
Joomla Schulung Projekt-Nr. 398 Open Source CM-System Projektteam: Christian Wüthrich, PL Thomas Haussener, MA 20. Juni 2007 BiCT AG Güterstrasse 5 3072 Ostermundigen Tel. 031 939 40 30 Fax 031 939 40
Scripting für Kommunikationswissenschaftler Gruppe C
Professur E-Learning und Neue Medien Institut für Medienforschung Philosophische Fakultät Scripting für Kommunikationswissenschaftler Gruppe C https://s-media-cache-ak0.pinimg.com/736x/9e/46/b5/9e46b5c98ae65d0880f37a30989781bb.jpg
Projekt Online-Shop:
Mit einem Buchverwaltungsprogramm kann können über das Internet neue Datensätze in eine Online-Datenbank einund ausgegeben, sowie gelöscht und verändert werden. Die Internet-Site besteht aus den nebenstehenden
<link href=" Roboto" rel="stylesheet"> <li><a href="ergebnis.html"> Ergebnis </a></li>
Index.html er-modell
Wege zum neuen Layout des Wordpress Inspirata-Webportals
Wege zum neuen Layout des Wordpress Inspirata-Webportals Version vom 8. November 2012 1 Neues Design der Site Der Aufbau der Inspirata-Site folgt den klassischen Wordpress-Konzepten mit Kopfbereich, Menüleiste,
Internet-Technologien
Internet-Technologien PHP Workshop Bau eines Gästebuches Bisher: Heute: Clientseitiges Skripting (Bsp.: JavaScript) Ausführung von Programm-Code auf dem Client-Rechner Entlastung des Server-Rechners ++
Das erwartet dich in diesem Buch 6. Kapitel 1 Bevor es losgeht 12
inhaltsverzeichnis Inhaltsverzeichnis Das erwartet dich in diesem Buch 6 Kapitel 1 Bevor es losgeht 12 Joomla! ist ein CMS 13 Joomla! eignet sich für (fast) jede Webseite 15 Joomla! im Vergleich zu anderen
Digitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5
Inhaltsverzeichnis Einleitung 1 Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Über mich 7 Kapitel 1 Konzeption und Planung der Website 11 1.1 Grundüberlegungen 12