Lektion 10 - Globale Formatierungen

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 10 - Globale Formatierungen

Beitrag von Admin » Di 19. Aug 2014, 11:20

Super, die Navigation ist fertig, der Kopf auch, fehlt noch der Inhalt und die allgemeine optische Abrundung der Seite. Um sehen zu können, wie ein Design oder Layout als Endergebnis aussieht, sollte es mit Text gefüllt sein. Der Text muss inhaltlich keinen Sinn ergeben.

Für diesen Zweck hast du in der 1. Lektion die Erweiterung Lorem Ipsum installiert.

Für die allgemeine Textformatierung verwendet man globale Einstellungen, die auf die gesamte Seite angewendet werden. Diese globalen Einstellungen werden im body festgelegt:
  • Schriftart
  • Schriftgröße in Px
  • Schriftfarbe
Browser eigene Textformatierung orientieren sich am installierten Betriebssystem. Sie setzen sich in der Regel so zusammen:
  • Schriftfamilie: Times, Times New Roman, Serif (Standardschriftart des Betriebssystems des Besuchers)
  • Schriftgröße: 100% (unter Windows ca. 14px, unter Linux ca. 16px)
  • Schriftfarbe: schwarz
Wegen der unterschiedlichen Größen der Systemschriften, ist es sicherer eine globale Schriften-Formatierung vornehmen, da es sonst passieren kann, dass die Elemente durch die Schriftgröße unterschiedlich groß werden und sich verschieben.

Schriftenfamilien
Die Schriftformatierung vererbt sich automatisch auf das gesamte Web. Also auf sämtliche Bereiche, die sich im Element body befinden. In der Regel sind das alle Elemente.

Bei der Schriftformatierung solltest du immer darauf achten, dass die Schriftart, die du einstellst, auf dem Rechner deines Besuchers installiert sein muss. Es gibt zwar Unmengen von schönen Schriftarten, die im Internet zu finden sind. Häufig werden Schriftarten auch mit Programmen oder Spielen von einer CD mit installiert. Du kannst dir sogar deine ganz eigene Schriftart kreieren lassen.

Das Dumme ist nur, dass diese individuellen Schriftarten wohl sehr schön aussehen, jedoch die wenigsten Besucher über diese Schriftart auf ihrem Rechner verfügen.

Aus diesem Grund verwendet man im Internet Schriften-Familien.

Schriften-Familien sollten aus 3 Schriftarten bestehen. Jedes Betriebssystem verwendet seine eigene Standardschriftart. Du wirst z.B. Arial nicht als freie Schriftart aus dem Internet herunterladen können. Man wählt also 3 Schriftarten, eine für jedes System.
  • Windows - Mac - Linux.
    z.B. Arial, Helvetica, sans-serif
Diese drei Schriftarten sind nur geringfügig unterschiedlich. Ein Browser vergleicht, welche Schriftart ihm auf dem Rechner zur Verfügung steht und verwendet die 1. Schriftart, die installiert ist.

Gibst du die folgende Reihenfolge an:
  • Verdana, Arial, Helvetica, sans-serif
Wird auf einem Windows-Rechner die Seite in Verdana angezeigt, da sie vor Arial angegeben ist. Nur wenn kein Verdana installiert ist, wird die Seite in Arial dargestellt. Die gängigsten Schriftenfamilien sind:
  • Arial, Helvetica, sans-serif
  • Verdana, Geneva, sans-serif
  • "TrebucheMS", Helvetica, Ubuntu, sans-serif
  • "Lucida Sans Unicode" "Lucida grande", sans-serif
  • "Times New Roman", Times, serif
  • Gerogia, Times, serif
  • "Courier New", Courier, monopsace
Du kannst die Schriften-Familie im CSS-Editor über die Textformatierung zuweisen. Es sind bereits 3 Schriften-Familien vorgegeben. Du kannst auch deine eigene Schriften-Familie in das Feld schreiben.

Schriftarten, die ein Leerschritt im Namen haben, werden in Anführungszeichen geschrieben. Mehrere Schriftarten werden durch Komma voneinander getrennt.

z.B.
"Times New Roman",Times,serif

Typografische Standards einhalten

So wie bei Printmedien sollten man auch auf Internetseiten stets nur eine Schriften-Familie verwenden. - Ausnahme ist das Logo.

Deinen Text kannst du mit Formatierungen hervorheben, auch ohne die Schriftart zu ändern.
Beispiel
Dies ist eine Überschrift


Ein normaler Absatz Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in EIN PAAR GROSSBUCHSTABEN eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis ein bisschen Unterstrichenes sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Eingerückt, fett und kursiv Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem ein bisschen Blau kann auch Test hervorheben qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
dies ist der Fuß der Seite
Vererbung und Hierarchien

Die Besonderheit bei Textformatierungen ist, dass sie auf Kindelemente vererbt werden:

z.B.

Du gibst im body die Schriftengröße 14px an. Diese Schriftgröße wird auf alle Kindelemente übertragen.

Möchtest du z.B. im Footer eine kleinere Schriftgröße, änderst du sie entsprechend nur in der ID #footer .

Noch ein Beispiel: die Navigation:

Elternelement ist der Div #navi.
  • Stellst du im Div #navi eine Schriftfarbe rosa ein, wird die Schrift auch im Kindelement #navi a in Rosa dargestellt. Wenn du dort eine andere Farbe angezeigt haben möchtest, musst du dies im Kindelement, also in #navi a festlegen.
Möchtest du im Kindelement eine Formatierung aus dem Elternelement aufheben, musst du die Normaleinstellung wieder herstellen. Beispiel:

Im Div #navi a hast du ein Schriftstil kursiv eingestellt.

Im #navi a:hover möchtest du aber keine Kursive-Formatierung angezeigt bekommen. Hierzu musst du im Style #navi a:hover den Schriftstil auf "Normal" stellen.

Also überlege dir gut, welche Formatierungen du global einstellst.


Übung

Kopiere den Inhalt aus dem Ordner lektion9 in den Ordner lektio10

Globale Formate
Öffne deine index.html und lege im Stylesheet-Editor den Element-Style body an.
Formatiere nun den Text im body, um die Schrift so anzulegen, wie du sie generell für dein Web anlegen möchtest.

Überlege dir gut, welche Schrifteinstellungen du verwenden möchtest. Denke an die Vererbung auf Kindelemente.


Der Seite-Div
Als du deine Seite angelegt hast, hast du einen Div angelegt, in den du alle anderen Div eingefügt hast. Diese Div hilft dir, die Seite in die passende Form zu bringen.

In Lektion 6 hast du alle Div-Container angeordnet. Die Container füllen das gesamte Browserfenster aus.

Mit dem Seite-Div bringst du die ganze Seite in mit einer neues Styleanweisung auf eine bestimmte Breite.

Lege eine neue ID an #seite und weise die ID dem 1. Div in der Statusleiste zu.

Rufe die Box-Eigenschaften des Styles auf und stelle die Breite auf 90%. Wenn du eine Kopf-Grafik verwendest, die eine feste Breite hat, musst du die Breite der Seite an die Breite der Kopf-Grafik anpassen. (z.B. bei der Kuh-Grafik)

Jetzt klebt die Seite am linken Rand deines Browserfensters. Also werden wir sie noch zentriert ausrichten.

Schreibe in Außenabstand-links und Außenabstand-rechts jeweils den Wert auto.

Das sieht doch schon viel besser aus. Jetzt ist natürlich links und rechts neben deiner Seite der body sichtbar.

Gib dem body eine Hintergrundfarbe, die zu dem Rest deiner Seite passt. Du kannst auch eine Grafik einfügen. Gerne wird hierfür ein Verlauf verwendet.

Bist du fit in einem Grafikprogramm und kannst eine Verlaufgrafik erstellen? Gut, die Grafik sollte eine maximale Breite von 2px haben. Merke dir, welche Farbe du am unteren Rand verwendet hast. Setze diese Farbe als Hintergrundfarbe für den body ein, so hast du einen sauberen Übergang.

Füge die Grafik als Hintergrundgrafik ein, die sich nur horizontal wiederholt.

Der Inhalt-Div
Füge in den Inhalt-Div einen Blindtext mit Lorem Ipsum ein.

Formatiere den #inhalt so, dass der Text an allen Seiten einen Abstand zum Rand hat. Verwende hierfür die Einstellung Innenabstand.

Wie du siehst, hat KompoZer einen Scrollbalken am #inhalt angefügt. Das liegt daran, dass du eine Höhe für den #inhalt festgelegt hattest. Lösche diese Angabe aus der Styleregel.

Durch den Text siehst du jetzt, dass die Navigation nicht mehr bis zum Footer reicht. Das heißt, der body wird unter der Navigation sichtbar.

Mit einem Trick kannst du das auch abschalten. Färbst du den #seite in der gleichen Farbe ein wie die #navi, wird er vom #inhalt verdeckt und wirkt als ob er bis zum Footer reicht.

Hier findest du meinen Lösungsvorschlag --> Lösung

Und natürlich auch für Quelltextpuristen:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>


<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Vorlage</title>
<meta content="Anke Lange" name="author">
<style type="text/css">
#kopf {
  height: 150px;
  background-color: #333300;
  background-image: url(images/strom.jpg);
  background-repeat: repeat-x;
}
#navi {
  background-color: yellow;
  width: 200px;
  float: left;
}
#inhalt {
  padding: 20px;
  margin-left: 200px;
  background-color: #ffffcc;
}
#footer {
  height: 30px;
  background-color: #666600;
  color: #ffff66;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  clear: both;
}
h1 {
  font-size: 2em;
  text-align: right;
  margin-top: 0px;
  padding-top: 30px;
  padding-right: 30px;
  font-family: "Arial,Helvetica,Sans";
}
#navi ul {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
}
#navi li {
}
#navi a {
  display: block;
  text-decoration: none;
  color: #001f00;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
}
#navi a:focus {
}
#navi a:hover {
  background-color: #333300;
  color: #ffcc00;
  text-decoration: underline;
}
#navi a:visited {
}
#seite {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
body {
  background-color: #c8c878;
  background-image: url(images/bhody.jpg);
  background-repeat: repeat-x;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.9em;
}

</style></head><body>
 
<div id="seite">
<div id="kopf">
<h1>F-O-S-S Free Open Source Software</h1>

</div>
<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="hobby.html">Hobby</a></li>
  <li><a href="galerie.html">Galerie</a></li>
  <li><a href="glossar.html">Glossar</a></li>
  <li><a href="termine.html">Termine</a></li>
  <li><a href="gaestebuch.html">Gästebuch</a></li>
  <li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum. <br>
<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. <br>
 <br>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>


</body></html>
Hat alles geklappt? Super, dann kann es jetzt weitergehen mit Lektion 11.

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von kp2709 » Di 26. Aug 2014, 10:57

Hallo zusammen,
hier mein Aufgabe http://reikuma27.kp2709.bplaced.net/web/lektion10/
danke :)

Lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von anke » Di 26. Aug 2014, 11:06

Hallo Kurt

das sieht schon sehr gut aus. Nur die Header-Grafik ist mit fast 1 MB etwas groß. Sie wird in der Höhe ja auch nicht ganz angezeigt. Es würde also ein Ausschnitt mit einer Höhe von 150 px ausreichen.

Sonst sieht es gut aus.

Weiter geht's :)

Gruß Anke

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von kp2709 » Di 26. Aug 2014, 13:04

Danke Anke,
erledigt: Bild ausgeschnitten

Gruß
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von anke » Di 26. Aug 2014, 14:59

Super :)

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 10 - Globale Formatierungen

Beitrag von eibauoma » Di 9. Sep 2014, 14:36

Es geht ein kleines Stückchen weiter
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 10 - Globale Formatierungen

Beitrag von Hellriders » Mo 24. Aug 2015, 18:52

hi,
mein ergebnis für heute :)

index.html

gruß micha

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 10 - Globale Formatierungen

Beitrag von camouflage1984 » Di 25. Aug 2015, 01:08

Hallo Micha

Sieht jetzt gut aus ;)
Leider ist immer noch nicht die Überschrift H1 definiert :o
Hier solltest du noch aufräumen

Code: Alles auswählen

<h1><em>&nbsp;&nbsp; SV Gölzau 1990 e.V.&nbsp;</em><em> <br>
</em></h1>
die <em> und <br> Löschen.

Das man eine css Datei in images unterbringt ist ungewöhnlich aber es klappt ja alles :D


Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 10 - Globale Formatierungen

Beitrag von Moendel » Di 5. Jan 2016, 21:13

Da ich meine Zeit nutzen wollte ;)
bin ich über die Navigation(8) und Listen (9)gleich weiter hierher:
Lektion10

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 10 - Globale Formatierungen

Beitrag von camouflage1984 » Di 5. Jan 2016, 22:38

:D

weiter geht`s.....
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast