Lektion 11 - Stylesheet bereinigen

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

Lektion 11 - Stylesheet bereinigen

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

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.

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

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von eibauoma » Di 9. Sep 2014, 16:52

[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: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von anke » Di 9. Sep 2014, 17:17

Hast du auch richtig gut gemacht :) Dann kann es jetzt weitergehen mit dem Füllen der Seite.

Viel Spaß!

Gruß Anke

yourmy
Beiträge: 18
Registriert: Fr 6. Feb 2015, 12:07

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von yourmy » Do 12. Feb 2015, 21:41

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

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

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von anke » Fr 13. Feb 2015, 06:39

Hallo yourmy
schau einmal, ob der Pfad zum Stylesheet noch korrekt in deiner html-Datei enthalten ist.

yourmy
Beiträge: 18
Registriert: Fr 6. Feb 2015, 12:07

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von yourmy » Fr 13. Feb 2015, 08:29

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ß

yourmy
Beiträge: 18
Registriert: Fr 6. Feb 2015, 12:07

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von yourmy » Fr 13. Feb 2015, 08:32

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?

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

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von camouflage1984 » Fr 13. Feb 2015, 08:47

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.
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 11 - Stylesheet bereinigen

Beitrag von Moendel » Mi 6. Jan 2016, 11:17

Wieder etwas weiter:

stylesheet

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

Re: Lektion 11 - Stylesheet bereinigen

Beitrag von camouflage1984 » Mi 6. Jan 2016, 19:22

:D

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

Antworten