Lektion 5 - Das erste Stylesheet

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

Lektion 5 - Das erste Stylesheet

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

Du hast den Rohbau deiner Homepage erstellt. Nur sieht das Ganze noch etwas fad aus. Nicht gerade wie ein Homepage, eher wie ein paar rote Linien auf weißem Hintergrund. Also müssen jetzt die Maler ans Werk, um die Homepage ein bissel wohnlicher zu gestalten.

[col]Unser Maler heißt CaScadeS. Du findest ihn im Menü Extras - CSS Editor oder mit der F11-Taste. Noch einfacher geht es mit einem einfachen Klick auf die Farbpalette in der Symbolleiste.

In der Symbolleiste findest du als erstes Zeichen wieder die Farbpalette. Über dieses Symbol legst du ein neues Internes Stylesheet an. Es öffnet sich der Stylesheet-Editor.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Wie du bereits in Lektion 2 gelesen hast, gibt es verschiedene Elemente. Dazu gehören Absätze, Listen, Überschriften ... es gibt noch viele mehr. Indem du einen Text als Überschrift 1 definierst, weist du dem Text ein Element zu. Wie das Element aber genau aussehen soll, ob es rote oder grüne Schriftfarbe besitzt, einen gelben Hintergrund hat oder von einem Rahmen umgeben wird ... und wie es sich verhalten soll, ob es links ausgerichtet stehen soll, ob es sichtbar ist, ... stellst du im Stylesheet-Editor ein.

Achtung!
Beim Arbeiten mit CSS-Technologie ist es ganz wichtig, dass du diese Regel einhältst. Du legst ein Element über die Formatsymbolleiste 1 fest und definierst, wie es aussehen soll über den Stylesheet-Editor.


Der Stylesheet-Editor

Der Stylesheet-Editor ist in drei Bereiche aufgeteilt:

Die Symbolleiste
Über die Symbole in der Symbolleiste
  1. Kannst du ein neues Stylesheet anlegen (klickst du auf den kleinen Pfeil neben der Farbpalette, findest du verschiedene Möglichkeiten ein Stylesheet anzulegen bzw. zu zuweisen --> Stylesheets.
  2. Über die verschlungenen Pfeile aktualisierst du die Auflistung der Styles.
  3. Über das 3. Symbol kannst du deinen Style umbenennen.
  4. Über das rote x löscht du einen Style aus deinem Stylesheet.
  5. über die Pfeile hoch und runter kannst du deine Styles in der Liste sortieren.
Das Style-Listen-Fenster
Hier werden alle Styles angezeigt, die du in deinem Web verwendest. Du kannst diese Liste über die Symbole bearbeiten.

Die Registeraufteilung für die Style-Regeln.
Der Stylesheet-Editor ist in Register aufgeteilt, die je nach Funktion zusammengefasst sind.

Die Eigenschaften-Register

Im Eigenschaften-Register legst du die Formatierungen der zuvor festgelegten Styles fest. Über die folgenden Links findest du Erklärungen zu den einzelnen Eigenschaften-Registern:

Allgemein
Hintergrund
Begrenzung
Boxeigenschaften
Listen
Töne
Text


Styles
Ja, wie kann man denn jetzt so eine Formatierung zuweisen??

Ein Element wird im Quelltext über TAGs markiert. TAGs sind spitze Klammern mit einem Kürzel darin. z.B. <h1>. Der TAG wird mit einer <div> geöffnet und mit einem </div> geschlossen.

Um jetzt z.B. allen div-TAGs in deiner Seite eine Höhe von 100px zu geben, legst du einen Style div an. In den Boxeigenschaften stellst du eine Höhe von 100px ein:

[col]Öffne deine index.html aus Lektion 4. Rufe den Stylesheet-Editor über die Symbolleiste oder F11 auf.

Klicke auf die kleine Farbpalette in der Symbolleiste des Stylesheet-Editors.

Schreibe in das Textfeld auf der Registerseite div und bestätige die Eingabe mit Styles-Regel erstellen

Es öffnet sich die Register-Ansicht.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Klicke auf das Register Box und schreibe in das Feld für Höhe die 100px. Bestätige den Stylesheet-Editor mit OK.
#
Klicke auf das Bild für die Darstellung in Originalgröße
|Deine Div haben nun eine Höhe von 100px.
#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Lösche den Style wieder, sodass du mit deiner index.html wieder arbeiten kannst.
Klicke hierzu den Styles div in der Liste an und klicke anschließend auf das rote Kreuz zum Löschen des Styles.

Die Hierarchien der Formatierungen

Styles - oder auch Formatierungen können auf 3 Wege festgelegt werden:
  • Inlinestyles
    Das sind Formatierungen, die in den Quelltext geschrieben werden. Sie beziehen sich immer nur auf den Bereich, in den du es einträgst. Über die Formatleiste2 kannst du super Inlinestyles erstellen.
  • Internes Stylesheet
    Das interne Stylesheet ist eine Sammlung aller Formatierungen im Kopf deiner HTML-Seite.
  • Externes Stylesheet
    Das Externe Stylesheet ist eine separate Textdatei mit Formatendung css. Sie beinhaltet alle Formatierungen deines Webs.
[anmerk]Bild|Achtung!
Die Formatierungen haben eine unterschiedliche Gewichtung für einen Browser:
Inlinestyles
Internes Stylesheet
Externes Stylesheet

Schreibst du im Quelltext dem Div eine Breite von 100px zu, so ignoriert ein Browser die Angabe in deinem Stylesheet, in der du eine Breite von 200px eingetragen hast.[/anmerk]

Inlinestyle entfernen:

Diese Anleitung wird in den weiteren Lektionen sehr nützlich sein!

Ob du versehentlich einen Inlinestyle einem Element zugewiesen hast, erkennst du daran, dass das Element in der Statusleiste kursiv dargestellt ist. z.B.

<html> <body> <div> <div>

Um den Inlinestyle zu löschen, klickst du mit rechter Maustaste auf das kursiv dargestellte Element und wählst im Popup-Menü "Inlinestyle". Es öffnet sich ein Assistent, der dem Stylesheeteditor sehr ähnlich ist.

Lösche nun alle Angaben, die im Register "Allgemein" stehen, und bestätigen den Assistenten mit OK.

Übung

Es macht natürlich nicht viel Sinn, wenn alle Divs, also alle Bereiche der Homepage gleich aussehen. Deshalb kann man auch unabhängig von Elementen-Namen Styles anlegen.

Es gibt 3 Arten von Anweisungen:
  1. ID
    mit der ID definierst du einen Bereich auf der Seite, der nur einmalig vorkommt. Also einzigartig ist. Wie der Kopf deiner Seite. Keine Seite hat mehr als einen Kopfbereich. Es bietet sich also an, diesen Bereich eindeutig zu benennen.
    Eine ID beschreibst du mit einer # und dem Namen der Anweisung: z.B. #kopf
  2. Klasse
    Mit einer Klasse legst du eine Formatierungsanweisung (Style) an, den du immer mal wieder auf deiner Seite anwenden möchtest. Z.B. möchtest du mehrere Textstellen (Absätze) in einem Text besonders hervorheben, kannst du ihn z.B. rot, fett und umrandet darstellen. Diese Anweisung legst du in einer Klasse an.
    Eine Klasse beschreibst du mit einem Punkt vor dem Namen der Anweisung: z.B. .text-rot
  3. TAG
    TAG-Formate sind Formatierungen, die sich auf alle Elemente der gleichen Art beziehen. Weist du dem TAG <p> (Absatz) eine rote Schriftfarbe zu, erscheinen alle Absätze auf deiner Seite mit roter Schriftfarbe. Die Anweisung wird mit der TAG-Bezeichnung benannt: z.B. p
Natürlich lassen sich alle Anweisungsarten miteinander kombinieren:

Möchtest du z.B. nur dem Absatz im ID "footer" die Schriftgröße 12px geben, verbindest du die beiden Anweisungsarten miteinander und trennst sie im Namen nur durch ein Leerzeichen:

#footer p

[col]Eine Klasse bzw. eine ID wird einem TAG zugewiesen.

Code: Alles auswählen

<p class="text-rot">hier der Text</p>

Code: Alles auswählen

<div id="footer">hier steht der text im Footer</div>
|Fangen wir also an, unserem "Maler" ein paar Anweisungen zu geben:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Klicke zunächst auf das kleine Symbol am oberen linken Rand des Stylesheet-Editors. Es wird automatisch ein neues internes Stylesheet erstellt. Es wird im Fenster links im Stylesheet-Editor angezeigt. Rechts schreibst du den Namen der Style-Regel hinein, die du anlegen möchtest. Wir fangen an mit einer ID für den Header.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion5-14.png[/popup]
Schreibe #kopf in die Zeile.

Bestätige mit einem Klick auf die Schaltfläche "Style-Regel erstellen".

Die Bezeichnung #kopf hüpft auf die linke Seite in das interne Stylesheet. Rechts findest du nun eine Anzahl von Registern, über die du die Eigenschaften festlegen kannst, die dein Header bekommen soll.

Hintergrundeigenschaften:
In den Hintergrundeigenschaften legst du die Hintergrundfarbe an. Die html-Notation kannst du in das Textfeld bei Hex: eintragen #333300

Boxeigenschaften:
In den Boxeigenschaften legst du die Größe deines DIV fest. Trage hier eine Höhe von 100px ein.

Texteigenschaften:
In den Texteigenschaften kannst du alle Schrifteigenschaften einstellen. Zentriere den Text in deinem Header.

Allgemeine Eigenschaften:
In den allgemeinen Eigenschaften werden noch einmal alle Eigenschaften aufgelistet, die du dem aktivierten DIV, der Klasse oder dem TAG zugewiesen hast. Und zwar in CSS-Form.

Bist du fertig mit der Formatierung des Kopfes, bestätigst du den Editor mit OK. Nun musst du dem DIV "Kopf" noch die Style-Regel zuweisen.

ID zuweisen
[col]Klicke mit rechter Maustaste auf den 2. DIV-TAG in der Statuszeile von KompoZer.

Ein Fenster Popup-Menü öffnet sich. In dem Popup-Menü wählst du ID - #kopf. Der Header-Div nimmt sofort die Formatierungen an, die du in der Styleregel angelegt hast.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
In der Statuszeile wird die Benennung des Div angezeigt.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion5-16.png[/popup]
[col]Die Style-Regel kannst du jederzeit im Stylesheet-Editor wieder ändern. Wobei die neue Formatierung sofort auf den Header übertragen wird.
Erstelle weitere Anweisungen, mit Style-Regeln. Formatiere die übrigen Div-Container in folgender Weise:
  • Den DIV "Navigation" gebe die ID navi (#navi). Gebe dem DIV eine Höhe von 30px und fülle ihn mit Gelb als Hintergrundfarbe.
  • Den Div "Inhalt" gib die ID inhalt (#inhalt) und eine Höhe von 300px.
  • Den DIV "Footer" gib die ID footer (#footer) und eine Höhe von 20px.
    Die Hintergrundfarbe etwas heller als wie im Header sein.
Probiere ruhig weitere Einstellungen. Der Quelltext ist ein Anhaltspunkt.|Dein Ergebnis sollte ungefähr so aussehen:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Speichere dein Ergebnis auf deinem Rechner und lade sie auf deinen Server hoch.

Lösung

Wenn du nicht weiterkommst, speichere das Ergebnis aus meinem Beispiel auf deinen Rechner. Öffne es mit KompoZer und starte den CSS-Editor. Er wird dir die Einstellungen verraten.

Viel Spaß!
Lösung für Quelltextpuriste ...

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: 100px;
  background-color: #333300;
  color: #cccccc;
  text-align: center;
}
#navi {
  background-color: #ffff33;
}
#inhalt {
  height: 200px;
}
#footer {
  height: 30px;
  background-color: #666600;
  color: #ffff66;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
}
</style>

</head>

<body>
<div>
<div id="kopf">Header<br>
</div>
<div id="navi">Navigation<br>
</div>
<div id="inhalt">Inhalt<br>
</div>
<div id="footer">Footer<br>
</div>
</div>
</body>

</html>

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

Re: Lektion 5 - Das erste Stylesheet

Beitrag von eibauoma » Fr 5. Sep 2014, 11:35

Hier ist meine vorläufige index-Datei zu sehen:
Die Adresse könnte ich eventuell in die Signatur räumen?
http://gimpfreak.bplaced.net/

Ich denke, dass ich die nächste Lektion in Angriff nehmen kann. :?:
[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]

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

Re: Lektion 5 - Das erste Stylesheet

Beitrag von anke » Fr 5. Sep 2014, 12:39

hallo eibauoma

deine "erste" Seite sieht super aus :)
Klar kannst du weitermachen und auch gerne den Link zu vorläufigen Page in deine Signatur basteln.

Viele Grüße

Ele ;)

Benutzeravatar
blaubaer
Beiträge: 11
Registriert: So 6. Dez 2015, 10:08
Wohnort: Regensburg
Kontaktdaten:

Re: Lektion 5 - Das erste Stylesheet

Beitrag von blaubaer » Di 15. Dez 2015, 10:14

Hallo,

next step: http://www.miclangschach.de/web/vorlage.html

Grüße,
Michael

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

Re: Lektion 5 - Das erste Stylesheet

Beitrag von anke » Di 15. Dez 2015, 11:50

Hallo Michael
das sieht für mich schon sehr gut aus :)

Auf gehts zur nächsten Lektion

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

Re: Lektion 5 - Das erste Stylesheet

Beitrag von Moendel » Sa 2. Jan 2016, 19:13


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

Re: Lektion 5 - Das erste Stylesheet

Beitrag von anke » Sa 2. Jan 2016, 21:04

Hallo Moendel
na da warst du jetzt aber fleißig :)
Bislang sieht alles sehr gut aus. Weiter gehts ...

Gruß Anke

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 5 - Das erste Stylesheet

Beitrag von Kerberos » Fr 13. Mai 2016, 19:46


Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 5 - Das erste Stylesheet

Beitrag von Kerberos » Fr 13. Mai 2016, 19:48

irgendwie habe ich es heute nicht mit den Links :oops:

http://polska1919.de/WEB/vorlage%20(2).html

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

Re: Lektion 5 - Das erste Stylesheet

Beitrag von anke » Fr 13. Mai 2016, 20:41

Hi kerbaros
verwende in Links und Dateinamen besser keine Klammern oder sonstige Sonderzeichen.
Als Sonderzeichen gehen Minus - oder Unterstrich _ sehr gut.

Viele Grüße
Anke

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste