Digitale Medien - LMU München
Werbung
ÜbungzurVorlesung
DigitaleMedien
Vorlesung:HeinrichHußmann
Übung:RenateHäuslschmid
Ludwig-Maximilians-UniversitätMünchen
Wintersemester2016/17
CascadingStyleSheets
HTMLbeschreibtnurdenlogischenAufbaueinesDokuments.Die
Gestaltungläuftübereineeigene,angegliederteStilsprache.
<body bgcolor="#FF00CC" text="#0014F1" link="#FF1100">
<p bgcolor="#001100" align="left">
<font face="Helvetica" color="#00FF00">
Textextext
</font>
</p>
<p bgcolor="#0000FF" align="right">
<font face="Comic Sans MS" color="#999900">
Text zwo
</font>
</p>
<p bgcolor="#001100" align="left">
<font face="Helvetica" color="#00FF00">
Textextext
</font>
</p>
</body>
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
2
CascadingStyleSheets
•
•
•
Zentrale Formatierung vonHTML-Elementen
Angabe vonKlassen
Trennung vonInhalt undDarstellung
<head>
<style type="text/css">
body { background-color:#FF00CC; color:#0014F1 }
a { color:#FF1100 }
.text1 { background-color:#001100; text-align:left;
font-family:'Helvetica'; color:#00FF00 }
.text2 { background-color:#0000FF; text-align:right;
font-family:‘Comic Sans MS'; color:#999900 }
</style>
</head>
<body>
</body>
WS2015/16
<p class="text1">Textextext</p>
<p class="text2">Text Zwo</p>
<p class="text1">Textextext Zwo</p>
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
3
ZentraleFormate
<style type="text/css">
Element 1, Element 2, ... { Angabe 1 ; Angabe 2 ; ... }
* { Angabe 1 ; Angabe 2 ; ... }
Element 1 Unterelement 1 { Angabe 1 ; Angabe 2 ; ... }
</style>
Beispiele:
TextinÜberschriften h1undh2und Paragraphen wird lila
h1, h2, p { color:#FF00FF; }
AlleHTML-Elementewerdenrechtsbündig ausgerichtet
* { text-align:right; }
h1Überschriften werden dreimal sogroß dargestellt.
h1 { font-size:300%; }
Kursive Bereiche inh1Überschriften werden halb sogroß dargestellt
h1 i { font-size:50%; }
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
4
Formatierungsklassen
<style type="text/css">
(Element | *).Klassenname { Angabe 1 ; Angabe 2 ; ... }
.Klassenname.Klassenname { Angabe 1 ; Angabe 2 ; ... }
#ID-Name { Angabe 1 ; Angabe 2 ; ... }
</style>
...
< Element class="Klassenname" > ...
< Element id="ID-Name" > ...
Beispiele:
h1Überschriften derKlasse „dick“ werden extrafett dargestellt.
h1.dick { font-weight:900 }
HTML-Elemente derKlasse „mehrplatz“ erhalten zwei Zentimeter Abstand
.mehrplatz { letter-spacing:2cm }
h1Überschriften, diedie Klassen „dick“ und „mehrplatz“ benutzen werden
zusätzlich blau angezeigt.
h1.dick.mehrplatz {color:#0000FF }
<h1 class="dick mehrplatz">Dick blau Platz</h1>
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
5
Formatierungsangaben
<Element style="Angabe 1; Angabe 2; ... " > ...
<div style="Angabe 1; Angabe 2; ... ">
...
</div>
<span style="Angabe 1; Angabe 2; ... ">
...
</span>
Beispiele:
<p style="color:#FFFFFF; background-color:#000000">
Wei&szlig;er Text auf schwarzem Grund!</p>
<div style="background-color:#000000">
<h1>Ein Bereich mit schwarzem Hintergrund</h1>
<p>und mehreren enthaltenen Elementen</p>
</div>
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
6
CSSFormatierungvonText
Schriftart:
font-family
font-family: ‘Times New Roman‘, Arial, serif
Schriftstil:
font-style
(normal, italic,oblique)
font-style: italic
Schriftgröße:
font-size
font-size: 300%
font-size: 3cm
font-size: xx-small
Schriftdicke:
font-weight
font-weight: 900
font-weight: bold
WS2015/16
(x(x)-small,medium, large,x(x)-large)
(Werte von100- 900)
(lighter, normal, bold, bolder)
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
7
CSSElemente:Farben
Hintergrundfarbe:background-color
body { background-color:#000000 }
Textfarbe:
color
<a style="color:#0000FF" href="google.com">blau!</a>
<p style="color:#00FF00">Gr&uuml;ner Text!</p>
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
8
Ausrichtung,Außenrand,Größe
horizontale Ausrichtung :
text-align
(left, center, right, justify)
text-align:left
vertikale Ausrichtung:
vertical-align
vertical-align:top
(top, middle, bottom, sub, super)
Außenrand umein Element:margin
margin-top / margin-left / margin-right / margin-bottom
<p style="margin-left:50px">Mit linkem Rand!</p>
Breite (ähnlich wie Attribut): width
Höhe (ähnlich wie Attribut): height
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
9
Beispiel
Überschrift
Ein Paragraphmit
etwas Text.Die
Auswahl vonVorder- undHintergrundfarbe ist
nicht sehr glücklich
Überschrift,weißer Text,
mittig ausgerichtet,
kursiv gesetzt undfett
Bereich mit Textparagraph
Bereich:Gelber Hintergrund,
250Pixelbreit,linksausgerichtet;Text:200%Größe
Hintergrund:roteFarbe
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
10
Beispiel
…
<style type="text/css"> body { background-color:#FF0000 }
</style>
</head>
<body>
<h1 style="color:#FFFFFF; text-align:center;
font-style:italic; font-weight:bold">
&Uuml;berschrift</h1>
<div style="background-color:#FFFF00; width:250px">
<p style="font-size:200%; text-align:left">
Ein Paragraph mit etwas Text.
Die Auswahl von Vorder- und Hintergrundfarbe
ist nicht sehr gl&uuml;cklich.
</p>
</div>
</body>
…
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
11
CSSLayout
Überschrift
Navigation
Content
Footer
float:
none
left
right
clear:
left
right
both
WS2015/16
…
<style type="text/css">
#navigation {
float: left;
width: 200px;}
#content {
margin-left: 200px;}
(Standard)
(Element links, wird rechts
umflossen)
(Element rechts, wird links
umflossen)
(erzwingt bei float:left die
Fortsetzung unterhalb)
(erzwingt bei float:right die
Fortsetzung unterhalb)
(erzwingt in jedem Fall die
Fortsetzung unterhalb)
#footer {
clear: both;}
</style>
</head>
<body>
<div id="navigation">Navigation</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</body>
…
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
12
Aufgabe1
LadenSiedieMaterialienzudiesemÜbungsblattvonderWebseitederVorlesungherunter.In
demArchivbefindetsicheineDatei„index.html“,diekeinerleiphysischeAuszeichnungenenthält.
ZusätzlichbefindetsichdarindieDatei„style.css“,welchekeinenInhalthataußer
AuszeichnungenzudenTeilaufgaben.KopierenSiebeideDateienineinenneuenOrdnerund
bearbeitenSiediefolgendenAufgaben,indemSienurÄnderungeninderDatei„style.css“
vornehmen.DieDateiindex.htmldarfaufkeinenFallverändertwerden.
a) LesenSiedenAbschnitt„ZentraleFormatedefinieren“aufSelfhtml
(http://de.selfhtml.org/css/formate/zentrale.htm).BearbeitenSiediestyle.cssnunso,dass
jedesdivElement,dassichinnerhalbeinesanderendivbefindetblaueSchrifthat.
b)
c) ÄndernSiedieSchriftartdesgesamtenDokumenteszuVerdanaodereineranderen
serifenlosenSchrift.ÄndernSie(ebenfallsfürdasgesamteDokument)dieSchriftgrößeauf
0.8em.
d) ÄndernSienundieHintergrundfarbeallerElementemitderKlasse„class1“aufRot.
e) ÄndernSienundieLösungausAufgabe2cso,dassdiegrüneHintergrundfarbeebenfallsfür
dasElementmitderID„id1“gilt.HierfürdürfenSiekeinneuesFormatdefinieren,sondern
nurdasausAufgabe2canpassen.
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
13
LösungzuAufgabe1
Aufgabe1a):
div div {
color: #0000ff;
}
Aufgabe1b):
body {
font-family: 'Verdana';
font-size: 0.8em;
}
Aufgabe1c)und1d):
#id1, .class1 {
background-color: #ff0000;
}
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
14
Aufgabe2
ErstellenSieimOrdner „aufgabe3“eineHTMLDateimitdemNamen„index.html“undeine
CSS-DateimitdemNamen„styles.css“und
binden SiedieCSS-DateiinderHTML-Datei
ein.ImFolgenden sollenSieeinCSS-Layout
nachbauen, dasderGrafikentspricht:
a) AlleContainersinddurcheineschwarze
1PixelbreitegestrichelteLinieumrandetund600pxbreit.
b) ErstellenSie4div-Container.JederdieserContainerhateineeindeutige IDund
denNamendesContainersalsTextimElement.
c)
DieNavigationist50PixelundderContent300pxhoch.
d) Footer1und Footer2zweistehennebeneinander und sindje300pxbreit.
e) DerTextinFooter2sollrechtsbündig sein.
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
15
LösungzuAufgabe2
HTML:
CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aufgabe 3</title>
<link rel="stylesheet"
type="text/css" href="styles.css">
</head>
<body>
<div id="navigation">Navigation</div>
b) <div id="content">Content</div>
<div id="footer1">Footer 1</div>
<div id="footer2">Footer 2</div>
</body>
</html>
WS2015/16
div {
border: 1px dashed #000000;
width: 600px;
}
#navigation {
c)
height: 50px;
}
#content {
height: 300px; c)
}
#footer1 {
float: left;
d)
width: 300px;
}
#footer2 {
float: left; d)
width: 300px;
text-align: right; e)
}
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
a)
16
Übungsblatt6
• Übungsblatt6:
https://www.medien.ifi.lmu.de/lehre/ws1617/dm/
• AbgabebisFreitagden09.12.2016,09:00Uhr
morgensinUniWorX
WS2015/16
DigitaleMedien- Medieninformatik
Ludwig-Maximilians-UniversitätMünchen
17
