Seite 1 von 1

Lektion 11 - Stylesheet bereinigen

Verfasst: Di 19. Aug 2014, 11:20
von Admin
Dein Template ist so weit fertig, sodass du es füllen kannst. Doch bevor du es mit Inhalt füllst, solltest du dein Stylesheet noch ein bisschen aufräumen und auslagern.

Im Laufe des Kurses hast du ja schon so einige IDs angelegt und es werden noch mehr Styles dazu kommen. Um so wichtiger ist es, das du den Überblick behältst, welches Style wozu gehört.

So solltest du immer die Bereiche, die du zu Anfang angelegt hast als zur Orientierung nehmen.

Übung

Ja, da fangen wir gleich mit der Übung an.

[col]Sortiere deine Stylesliste in diese Reihenfolge:
  • body
  • #seite
  • #kopf
  • h1
  • #navi
  • #navi ul
  • #navi li
  • #navi a
  • #navi a:focus
  • #navi a:hover
  • #navi a:visited
  • #inhalt
  • #footer
|Das sollte dann so aussehen:

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

Stylesheet exportieren

[col]Klicke den Namen des Stylesheets in der Styleliste an "Internes Stylesheet".

Klicke anschließend den Button "Stylesheet exportieren und auf externes Stylesheet umstellen" an.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Es öffnet sich ein Assistent, mit dem du den Speicherort - deinen Webordner - auswählst. Gibt dem Stylesheet einen Namen und vergiss die Dateiendung [b].css[/b] nicht, z.B. [b]styles.css[/b]
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion11-4.png[/popup]
Im Stylesheet-Assistenten wird nun das externe Stylesheet angezeigt. Die Aktion ist aber noch nicht abgeschlossen. Bestätige den Stylesheet-Editor mit OK und speichere deine [b]index.html.[/b]
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion11-5.png[/popup]
Öffne den Stylesheet-Editor erneut. Jetzt werden alle Styles richtig angezeigt und der Pfad zu deinem Stylesheet ist korrekt in der index.html eingetragen, sodass die Styles nach wie vor auf deine Seite angewandt werden können.
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion11-6.png[/popup]

Hier wieder die Lösung: --> index.html --> styles.css

Und natürlich für die Quelltextpuristen... da gibt es jetzt auch zwei Dateien:

Der Quelltext:

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">
<link rel="stylesheet" href="styles.css" type="text/css">

</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>
Das Stylesheet:

Code: Alles auswählen

body {
  background-color: #c8c878;
  background-image: url(images/bhody.jpg);
  background-repeat: repeat-x;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.9em;
}
#seite {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
#kopf {
  height: 150px;
  background-color: #333300;
  background-image: url(images/strom.jpg);
  background-repeat: repeat-x;
}
h1 {
  font-size: 2em;
  text-align: right;
  margin-top: 0px;
  padding-top: 30px;
  padding-right: 30px;
  font-family: "Courier New",Courier,monospace;
}
#navi {
  background-color: yellow;
  width: 200px;
  float: left;
}
#navi ul {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 30px;
}
#navi li {
}
#navi a {
  display: block;
  text-decoration: none;
  color: #001f00;
  padding-top: 5px;
  padding-bottom: 5px;
}
#navi a:focus {
}
#navi a:hover {
  background-color: #333300;
  color: #ffcc00;
  text-decoration: underline;
}
#navi a:visited {
}
#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;
}
Hat alles geklappt? Super weiter gehts mit Lektion 12.

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Di 9. Sep 2014, 16:52
von eibauoma

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Di 9. Sep 2014, 17:17
von anke
Hast du auch richtig gut gemacht :) Dann kann es jetzt weitergehen mit dem Füllen der Seite.

Viel Spaß!

Gruß Anke

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Do 12. Feb 2015, 21:41
von yourmy
Hallo zusammen,
wie in der Lektion 18 (Termine) beschrieben, sind mir nach dem Suchen und Ersetzen auf <td> alle Styles auf allen Seiten abhanden gekommen. Kann man mit Hilfe des abgespeicherten Stylesheets da etwas retten? Wenn ja, wie?
Danke und Gruß
yourmy

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Fr 13. Feb 2015, 06:39
von anke
Hallo yourmy
schau einmal, ob der Pfad zum Stylesheet noch korrekt in deiner html-Datei enthalten ist.

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Fr 13. Feb 2015, 08:29
von yourmy
Guten Morgen Anke,
Ich vermute mal der ist noch korrekt gewesen, denn ich habe deinen Quelltext aus einer älteren Übung kopiert und das stylesheet noch mal gespeichert. Halt einfach nur ohne Assistenten, sondern bei mir geht ein ganz normales Speichern-Fenster auf, habs dann einfach im gleichen Ordner wie die Seiten mit der Endung .css gespeichert. Ansonsten alles nach Übung.
Dann habe ich im Quelltext den Namen des neuen Stylesheets eingefügt und es ist alles wieder wie in der Übung formatiert.
Daher vermute ich, dass es nicht am Speicherpfad gelegen hat, sonst hätte ein einfaches ändern des Datei Namen nicht funktioniert?
Darf man dem Stylesheet einen beliebiegen Namen geben mit der Endung .css?
Danke und Gruß

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Fr 13. Feb 2015, 08:32
von yourmy
Ach ja, ich hatte vergessen zu schreiben, dass ich beim "Neustart" durch das kopieren des Quelltextes aus der Übung den alten Stylesheet gelöscht habe. Darf man mehrere Stylesheets in einem Ordner haben mit unterschiedlichen Namen?

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Fr 13. Feb 2015, 08:47
von camouflage1984
Hallo yourmy
yourmy hat geschrieben: Darf man mehrere Stylesheets in einem Ordner haben mit unterschiedlichen Namen?
Du kannst mehrere Stysheets mit verschiedenen Namen im Ordner habern.
yourmy hat geschrieben:Darf man dem Stylesheet einen beliebiegen Namen geben mit der Endung .css?
Ja.

Wenn du das neue Stylesheet nutzen möchtest musst du dieses auch im headerbereich angeben.

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Mi 6. Jan 2016, 11:17
von Moendel
Wieder etwas weiter:

stylesheet

Re: Lektion 11 - Stylesheet bereinigen

Verfasst: Mi 6. Jan 2016, 19:22
von camouflage1984
:D

Und weiter geht´s