websiteentwicklung auf basis vontypo3 designvorlage, css ... · 1 websiteentwicklung auf basis...
TRANSCRIPT
1
Websiteentwicklung auf Basis vonTYPO3
Designvorlage, CSSTypoScript
Unterlagen zur VorlesungWS 19/20
-4-
1. TYPO3 Designvorlage HTML
2. TYPO3 Designvorlage CSS
3. Bildformate
4. Einführung in TypoScript
1
2
2
www.pagemachine.de
HTML – letzte Vorlesung
Programmierung der Designvorlage
<div id = "container">
<div id = "language"></div>
<div id = "header">
<div id = "image"></div>
<div id = " logo"></div>
<div id = "top_menu"></div>
<div id = "search"></div>
<div id = "breadcrumbs"></div>
</div>
<div id = "content“>
<div id="content_left">
<div id = "left_menu"></div>
</div>
<div id = "content_middle"></div>
<div id = "content_right"></div>
</div>
<div id="footer">
<div id = "footer_left"></div>
<div id = "footer_right"></div>
</div>
</div>
www.pagemachine.de
HTML – letzte Vorlesung
Programmierung der Designvorlage<!DOCTYPE html>
<html>
<head>
<title>Fh Frankfurt Musterseite</title>
</head>
<body>
<div id = "container">
<div id = "language">LANGUAGE</div>
<div id = "header">
<div id = "image">IMAGE</div>
<div id = " logo">LOGO</div>
<div id = "top_menu">TOPMENU</div>
<div id = "search">SEARCH</div>
<div id = "breadcrumbs">BREADCRUMB</div>
</div>
<div id = "content“>
<div id="content_left">
<div id = "left_menu">LEFTMENU</div>
</div>
<div id = "content_middle">CONTENTMIDDLE</div>
<div id = "content_right">CONTENTRIGHT</div>
</div>
<div id="footer">
<div id = "footer_left">FOOTERLEFT</div>
<div id = "footer_right">FOOTERMENU</div>
</div>
</div>
</body>
</html>
3
4
3
www.pagemachine.de
HTML – letzte Vorlesung
Programmierung der Designvorlage
1. TYPO3 Designvorlage HTML
2. TYPO3 Designvorlage CSS
3. Bildformate
4. Einführung in TypoScript
5
6
4
www.pagemachine.de
CSS
Unser Beispiel
Verlauf im Hintergrund
body {
background: url(../images/Verlauf.png) fixed repeat-x;
}
www.pagemachine.de
CSS
Unser Beispiel mit CSS3
Verlauf im Hintergrund
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(#A0B1CB 0%, #2E3545 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#A0B1CB),
color-stop(100%,#2E3545)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#A0B1CB 0%,#2E3545 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#A0B1CB 0%,#2E3545 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(#A0B1CB 0%,#2E3545 100%); /* IE10+ */
background: linear-gradient(#A0B1CB 0%,#2E3545 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A0B1CB',
endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
7
8
5
www.pagemachine.de
CSS
Unser Beispiel
HTML
<div id = "container"></div>
CSS
#container{
width: 960px;
margin: auto;
}
Unser Beispiel
HTML
CSS
www.pagemachine.de
CSS
9
10
6
www.pagemachine.de
CSS
Unser Beispiel
www.pagemachine.de
CSS
Unser Beispiel
HTML
<div id = "language">LANGUAGE</div>
CSS
#language{
float: right;
width: 69px;
height: 23px;
background:url(../images/bg_language_menu.gif) no-repeat;
}
11
12
7
www.pagemachine.de
CSS
Unser Beispiel
www.pagemachine.de
CSS
Unser Beispiel
HTML
<div id = "header">
...
</div>
CSS
#header {
height: 272px;
background:url(../images/bg_header.gif) repeat-x;
clear: right;
}
13
14
8
www.pagemachine.de
CSS
Unser Beispiel
www.pagemachine.de
CSS
Unser Beispiel
HTML
<div id = "content">
...
</div>
CSS
#content {
min-height: 250px;
margin-top: 10px;
background:url(../images/bg_content_demo.gif) repeat-y;
}
15
16
9
www.pagemachine.de
CSS
Unser Beispiel
www.pagemachine.de
CSS
Unser Beispiel
HTML
<div id = "footer">
...
</div>
CSS
#footer {
height: 98px;
background: #DBE5EE;
margin: 10px 0 10px 0;
}
17
18
10
www.pagemachine.de
CSS
Unser Beispiel
www.pagemachine.de
HTML
Unser Beispiel
HTML
19
20
11
www.pagemachine.de
CSS
Unser Beispiel
CSS
www.pagemachine.de
Designvorlage
Designvorlage
HTML
neu
21
22
12
www.pagemachine.de
Designvorlage
Unser Beispiel
Einfügen des Kopfbildes
HTML
<div id = "footer">
...
</div>
CSS
#image {
padding-top: 8px;
width: 960 px;
height: 177 px;
overflow: hidden;
}
www.pagemachine.de
Designvorlage
Unser Beispiel
23
24
13
www.pagemachine.de
Designvorlage
Unser Beispiel
Einfügen des Logos
HTML
<div id = "footer">
...
</div>
CSS
#logo {
margin-top: -177px;
height: 177px;
width: 163;
}
www.pagemachine.de
Designvorlage
Unser Beispiel
25
26
14
1. TYPO3 Designvorlage HTML
2. TYPO3 Designvorlage CSS
3. Bildformate
4. Einführung in TypoScript
www.pagemachine.de
Bildformate
Bildformate im Internet
PNG
JPG Rastergrafiken
GIF
SVG Vektorgrafik
27
28
15
www.pagemachine.de
Bildformate
Rastergrafik / Pixelgrafik
bestehen aus Bildpunkten.
Jeder Bildpunkt kann Farbinformation
oder Informationen zur Transparenz
(Alphakanal) enthalten
Hauptmerkmale sind Bildgröße und
Farbtiefe
www.pagemachine.de
Bildformate
Vektorgrafiken
sind Computergrafiken, die aus grafischen
Primitiven wie Linien, Kreisen, Polygonen oder
allgemeinen Kurven (Splines) zusammengesetzt
sind.
29
30
16
www.pagemachine.de
Bildformate
SVG (Scalable Vector Graphics)
Einsatz sinnvoll, wenn sich die meisten
Bildelemente mit SVG-Formen ausdrücken lassen
und eine clientseitige Skalierbarkeit oder eine
Dynamik gewünscht ist.
Besonders im Bereich interaktiver Grafiken und
der Datenvisualisierung werden SVG-Grafiken
nahtlos in HTML-Dokumente eingebunden und
über JavaScript programmiert.
Beispiele: Logo, Animationen, CAD-Zeichnungen
Portable Network Graphics (PNG)
Grafikformat für Rastergrafiken mit
verlustfreier Bildkompression.
Freier Ersatz für das ältere, bis zum
Jahr 2004 mit Patentforderungen
belastete Format GIF
weniger komplex als TIFF
PNG unterstützt neben unterschiedlichen
Farbtiefen auch Transparenz per Alphakanal.
Ideal für Schlagschatten die beliebig geformt
sind
Wird von allen gängigen Browsern unterstützt
www.pagemachine.de
Bildformate
31
32
17
www.pagemachine.de
Bildformate
JPEG File Interchange Format
beschreibt verschiedene z.t. sehr komplexe Methoden der Bildkompression
i.d.R. verlustbehaftet
Bildbearbeitungsprogramme bieten verschiedenen Komprimierungsstufen
Z.B. 0 -100% Qualität oder 0-12 (Photoshop)
Sehr gut für Fotos geeignet
keine Transparenz
max Qualität min Qualität
www.pagemachine.de
Bildformate
Graphics Interchange Format gif
ist ein Grafikformat mit guter verlustfreier Komprimierung
für Bilder mit geringer Farbtiefe
bis zu 256 (= 28) verschiedene Farben pro Einzelbild)
Kompression: Lempel-Ziv-Welch-Algorithmus
(kurz LZW-Algorithmus)
- Es werden Abkürzungen von Zeichenketten gebildet.
Mehrere Einzelbilder in einer Datei (animiertes Gif)
geeignet für Grafiken mit wenigen Farben
z.B. Diagramme
ungeeignet für Fotos
33
34
18
www.pagemachine.de
Bildformate
Beispiel JPG
Ausgangsbild: JPG unkomprimiert – 1024 x 389px – 347 kB
www.pagemachine.de
Bildformate
Beispiel JPG
JPG max. komprimiert – 1024 x 389px – 29 kB
35
36
19
www.pagemachine.de
Bildformate
Beispiel GIF
GIF – 1024 x 389px – 162 kB
www.pagemachine.de
Bildformate
Beispiel PNG
PNG – 1024 x 389px – 557 kB
37
38
20
www.pagemachine.de
Bildformate
Beispiel PNG
Original: PNG – 610 x 380px – 42 kB
www.pagemachine.de
Bildformate
Beispiel JPG
JPG unkomprimiert – 610 x 380px – 124 kB
39
40
21
www.pagemachine.de
Bildformate
Beispiel JPG
JPG max komprimiert – 610 x 380px – 47 kB
www.pagemachine.de
Bildformate
Beispiel GIF
GIF– 610 x 380px – 31 kB
41
42
22
www.pagemachine.de
Bildformate
Fazit
JPG
geeignet für Fotos
GIF
geeignet für Diagramme
PNG
für Dateien mit Transparenz geeignet
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
</div>
CSS
#header {
height: 272px;
background:url(../images/bg_header_02.png) repeat-x;
clear: right;
}
alt neu
43
44
23
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
</div>
CSS
#header_menu{
margin-top: 5px;
margin-bottom: 4px;
border-top: 1px dashed #84909c;
border-bottom: 1px dashed #84909c;
height:50px;
}
www.pagemachine.de
Designvorlage
Unser Beispiel
45
46
24
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
</div>
CSS
#top_menu {
width: 740px;
float:left;
}
#search {
width: 220px;
float: left;
}
#breadcrumbs {
height: 26px;
background:#DBE5EE;
clear: left;
}
www.pagemachine.de
Designvorlage
Unser Beispiel
47
48
25
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
</div>
CSS
#content {
min-height: 250px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
background: url(../images/bg_content_demo.gif);
float:left;
width: 950px;
}
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
</div>
CSS
#content_left {
width: 180px;
background: #CED7E2;
padding-top: 45px;
float: left;
}
#content_middle {
padding-left: 40px;
padding-top: 15px;
width: 500px;
float: left;
}
#content_right {
margin-left: 30px;
padding-top: 30px;
background: #CED7E2;
width: 190px;
float:left;
}
49
50
26
www.pagemachine.de
Designvorlage
Unser Beispiel
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
CSS
#footer {
height: 80px;
width: 940px;
background: #DBE5EE;
margin-bottom: 10px;
padding: 10px;
clear: both;
float:left;
}
#footer_left {
float: left;
width: 400px;
}
#footer_right {
width: 400px;
float: right;
}
51
52
27
www.pagemachine.de
Designvorlage
Unser Beispiel
www.pagemachine.de
Designvorlage
Unser Beispiel
HTML
<div id = "footer">
...
CSS
#footer_left p {
color: #2D3545;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0 0 6px 0;
}
53
54
28
www.pagemachine.de
Designvorlage
Unser Beispiel
Dynamische Bereiche durch Platzhalter ersetzen
Statische Elemente
generelle Struktur, DIV-Elemente
Logo + Kopfbild (prinzipiell)
Adresse im Footer
Dynamische Elemente
Navigation oben und links
Breadcrumb und Suche
Contentbereich Mitte und Rechts
Footermenü
Sprachschalter
www.pagemachine.de
Designvorlage
55
56
29
Platzhalter (Marker)
sollten immer großgeschrieben werden
jeweils in drei Rautezeichen eingeschlossen
Beispiel
###PLATZHALTER###
www.pagemachine.de
Designvorlage
Teilbereiche kennzeichnen (Subparts)
Subparts werden mit HTML-Kommentaren gesetzt
Einer startet und einer beendet den Bereich
TYPO3 ersetzt den Inhalt dazwischen
Beispiel:
Dieser Text steht außerhalb des Teilbereichs
<!-- ###TEST### begin -->
<p>Dieser Text steht innerhalb des Teilbereichs</p>
<!-- ###TEST### end -->
Dieser Text steht außerhalb des Teilbereichs
www.pagemachine.de
Designvorlage
57
58
30
Subpart für Designvorlage
Beispiel:
Dieser Text steht außerhalb des Teilbereichs
<!-- ###DOCUMENT### begin -->
… hier steht der HTML Code der Designvorlage …
<!-- ###DOCUMENT### end -->
Dieser Text steht außerhalb des Teilbereichs
www.pagemachine.de
Designvorlage
Unser Beispiel
•
•
•
www.pagemachine.de
Designvorlage
59
60
31
Unser Beispiel
www.pagemachine.de
Designvorlage HTML
Unser Beispiel
www.pagemachine.de
Designvorlage CSS
61
62
32
Unser Beispiel
www.pagemachine.de
Designvorlage CSS
weitere CSS-Definitionen folgen im Laufe des Projekts
www.pagemachine.de
Designvorlage CSS
63
64
33
1. TYPO3 Designvorlage HTML
2. TYPO3 Designvorlage CSS
3. Bildformate
4. Einführung in TypoScript
Einführung in TypoScript
TypoScript ist eine Steuersprache oder Konfigurationssprache (keine
Programmiersprache)
Es werden Objekte definiert und Eigenschaften zugewiesen
Es werden sogenannte Objektbäume gebildet
www.pagemachine.de
TypoScript
65
66
34
Einführung in TypoScript
Mit TypoScript können
Backend
Benutzerrechte
Frontend
konfiguriert werden
www.pagemachine.de
TypoScript
Einführung in TypoScript
Die Ausgabe der Webseite (Frontent-Rendering) wird durch das
TypoScript in den TypoScript-Templates festgelegt.
Inhalt der Vorlesung:
Frontend-Rendering und dort nur mit TypoScript im Allgemeinen.
www.pagemachine.de
TypoScript
67
68
35
Warum TypoScript?
TypoScript eine Konfigurationssprache.
Mit TypoScript werden:
Ausgabe der Webseite
das Menü,
bestimmte Inhalte,
wie jedes einzelne Inhaltselemente ausgegeben werden soll.
definiert
Inhalte aus der Datenbank werden durch TypoScript ausgelesen und
aufbereitet, anschließend auf der Website ausgegeben.
www.pagemachine.de
TypoScript
Warum TypoScript?
Es muss definiert werden, was wie ausgegeben werden soll.
Das "was" wird über das Backend gesteuert - dort werden Seiten mit
Inhalten angelegt.
Das "wie" wird über TypoScript gesteuert.
Mit TypoScript wird z.B. definiert, wie die einzelnen Inhaltselemente bei
der Ausgabe dargestellt werden sollen, ob zum Beispiel ein div-
Container das Element umschließt oder die Überschrift in <h1>
eingeschlossen werden soll.
www.pagemachine.de
TypoScript
69
70
36
Einführung in TypoScript
Wenn die Ausgabe einer Seite erzeugt werden soll, sucht TYPO3
entlang des Seitenbaums nach oben die Seiten ab, ob dort ein "main"
Template liegt.
TypoScript Syntax
Auf der linken Seite werden Objekte mit Ihren Eigenschaften definiert,
denen dann bestimmte Werte zugewiesen werden.
Objekte und Eigenschaften (die wiederum Objekte enthalten können)
werden mit einem Punkt "." getrennt.
www.pagemachine.de
TypoScript
Beispiel 1: Ein Auto erzeugen
1 meinAuto = AUTO
2 meinAuto.farbe = #FF0000
3 meinAuto.10 = MOTOR
4 meinAuto.10.typ = diesel
Zeile 1: Definition eines Objekts mit dem Namen meinAuto. Der Name ist frei wählbar.
Dieses Objekt wird dem Objekt-Typ AUTO zugewiesen (nur ein Beispiel).
In der TSref werden die Objekttypen aufgeführt.
Nun werden die Eigenschaften definiert.
In Zeile 2 wird die Farbe „rot“ definiert.
Die möglichen Eigenschaften sind wieder in der TSref beschrieben.
www.pagemachine.de
TypoScript
71
72
37
Tsref – TypoScript Referenz
http://docs.typo3.org/typo3cms/TyposcriptReference/Introduction/Index.html
Offizielle komplette Referenz aller Objekte und Eigenschaften von TypoScript für
TypoScrpt Templating – also Frontendausgabe.
www.pagemachine.de
TypoScript
Beispiel 1: Ein Auto erzeugen
1 meinAuto = AUTO
2 meinAuto.farbe = #FF0000
3 meinAuto.10 = MOTOR
4 meinAuto.10.typ = diesel
Zeile 3: Objekterweiterung
Hinzufügen eines Zählers. Definition eines weiteren Objekts
In Zeile 4 wird definiert, dass das Objekt „MOTOR“ ein „diesel“ ist.
TYPO3 erzeugt nun im Frontend ein Auto, das feuerrot ist und einen Diesel als Motor hat.
www.pagemachine.de
TypoScript
73
74
38
Beispiel 1: Ein Auto erzeugen
1 meinAuto = AUTO
2 meinAuto.farbe = #FF0000
3 meinAuto.10 = MOTOR
4 meinAuto.10.typ = diesel
Das wird in ein PHP-Array umgewandelt
1 $data['meinAuto'] = 'AUTO';
2 $data['meinAuto.']['farbe'] = '#FF0000';
3 $data['meinAuto.']['10'] = 'MOTOR';
3 $data['meinAuto.']['10.']['typ‚] = 'diesel';
www.pagemachine.de
TypoScript
Beispiel 2: Unser kleiner WaldQuelle: www.sk-typo3.de
TypoScript ist eine Steuersprache
Es werden Objekte definiert und Eigenschaften zugewiesen
Außerdem können Teilbereiche gekennzeichnet werden
Zeile 1: Definition eines Objekts mit dem Namen Baum.
Zuweisung zum Typ „Waldpflanze“.
In Zeile 2 „packen wir den Baum ein“ (wrap=einwickeln) und setzen links und rechts von ihm ganz viel
Bäume hin.
Platzhalter für unseren Baum, ist die Pipe (|).
www.pagemachine.de
TypoScript
75
76
39
Beispiel 2: Unser kleiner WaldQuelle: www.sk-typo3.de
TypoScript ist eine Steuersprache
Es werden Objekte definiert und Eigenschaften zugewiesen
Außerdem können Teilbereiche gekennzeichnet werden
Zeile 3 und 4 definieren Eigenschaften des Baumes, hier gilt die Standardmaßeinheit Meter.
Unser Baum hat aber Unterobjekte, diese definieren wir in Zeile 5.
Der Objekttyp AESTE ist eine Ansammlung von Objekten, unser Baum hat mehrere davon.
www.pagemachine.de
TypoScript
Beispiel 2: Unser kleiner WaldQuelle: www.sk-typo3.de
TypoScript ist eine Steuersprache
Es werden Objekte definiert und Eigenschaften zugewiesen
Außerdem können Teilbereiche gekennzeichnet werden
Zeile 6: Statt immer wieder Baum.Kind... zu schreiben, kann eine
geschweifte Klammer { }verwendet werden.
Da mehrere Unterobjekten vorhanden sind, werden Bezeichner (10,20,30,...) verwendet.
Typo3 arbeitet sie in aufsteigender Reihenfolge ab.
Jedes Kindelement bekommt wieder einen Objekttyp und Eigenschaften zugewiesen.
www.pagemachine.de
TypoScript
77
78
40
TYPO3 Objekte
Das Objekt „PAGE“ ist die Basis und ist sozusagen die zu rendernde Seite.
Beispiele: TYPO3 Objekte
TYPO3 Inhaltselemente (cObject)
TEXT
IMAGE
COA – Content Object Array
Weitere Objekte
HMENU – hierarchical menu
FILE – Einbindung einer Datei
TEMPLATE – Einbindung eines Templates
FORM – für Formulare
www.pagemachine.de
TypoScript
TYPO3 Operatoren
= Wertzuweisung
. Verkettungen
< Kopieren / Übernehmen
> löschen
www.pagemachine.de
TypoScript
79
80
41
Kommentare
Kommentare stehen immer in einer eigenen Zeile
keine „Inline“-Kommentare
Auszeichnung wie in PHP und Pearl
www.pagemachine.de
TypoScript
Syntax
Das Zeichen > löscht eine Objektdefinition
Das Zeichen < kopiert ein Objekt.
www.pagemachine.de
TypoScript
81
82
42
Syntax
Das Zeichen > löscht eine Objektdefinition
Wertzuweisungen mit Zeilenumbruch müssen in Klammern () stehen
In Constants können Variablen definiert werden
Auf diese kann dann zugegriffen werden
www.pagemachine.de
TypoScript
Syntax
Fallunterscheidung: Conditions
Wertzuweisungen mit Zeilenumbruch müssen in Klammern () stehen
Wenn Bedingung 1:
...
Oder wenn Bedingung2:
...
Ende
www.pagemachine.de
TypoScript
83
84
43
Beispiel 3: Hallo Welt
TypoScript
page = PAGE
page.10 = TEXT
page.10.value = Hallo Welt
page.10.wrap = <h2>|</h2>
PHP-Array
$data['page'] = 'PAGE';
$data['page.']['10'] = 'TEXT';
$data['page.']['10.']['value'] = 'Hallo Welt';
$data['page.']['10.']['wrap'] = '<h2>|</h2>';
.
www.pagemachine.de
TypoScript
Beispiel 3: Hallo Welt
TypoScript
page = PAGE
page.10 = TEXT
page.10.value = Hallo Welt
page.10.wrap = <h2>|</h2>
page.30 = TEXT
page.30.value = Das steht am Schluss
page.20 = TEXT
page.20.value = Das ist die mittlere Zeile
www.pagemachine.de
TypoScript
85
86
44
Beispiel 3: Hallo Welt
TypoScript
page = PAGE
page {
10 = TEXT
10 {
value = Hallo Welt
wrap = <h2>|</h2>
}
30 = TEXT
30.value = Das steht am Schluss
20 = TEXT
20.value = Das ist die mittlere Zeile
}
www.pagemachine.de
TypoScript
1. TYPO3 Designvorlage HTML
2. TYPO3 Designvorlage CSS
3. Bildformate
4. Einführung in TypoScript
87
88
45
www.pagemachine.de
Vielen Dank
für Ihre Aufmerksamkeit
Diese Präsentation können Sie ab morgen unter:
www.pagemachine.de/fh-frankfurt
herunterladen.
Miklos Weiszhaupt
89