Laborskizze
1 "Wie verwende ich den CSS-Editor,
eine
Einführung"
(Stand 19.2.06)
Diese Skizze beschreibt
(frei von der Leber
weg) anhand eines zufälligen Beispiels, was dabei mit dem CSS
Editor getan wird. Die Skizze soll Nvu-Beginnern einen ersten Eindruck
vom CSS-Editor vermitteln. Diese Skizze ist für das
Browserfenster bestimmt. Gedacht ist, dass sie nicht nur durchgelesen,
sondern mit Nvu auch nachvollzogen wird.
Ganz klar, es
könnte anders und besser
vorgegangen werden. Das ist nicht entscheidend. Die Skizze erlaubt
quasi einen Blick über die Schulter von huscholz, wie er das
vorführt.
Leute, die über die Schulter gucken, werden geduzt.
Für
Modemnutzer dauerte die Ladezeit zu lange, deshalb ist diese Skizze auf
mehrere Seiten verteilt. Fortsetzungslink immer unten.
1. Wie
erhalte ich den
CSS-Editor? Antwort: Menü Extras / CSS Editor
Der sieht jetzt so aus, Bild 1. Lege vorher mit Nvu eine neue
Seite an, dann geht es dir genauso.
BILD 1
Auslöser für diese Skizze ist ein thread im
Nvu-Forum: http://www.nvu-composer.de/forum/viewtopic.php?t=800&postdays=0&postorder=asc&start=10
Im Bild 2 steht der Code, den Jörn mir im Forum gelistet hat.
Mit
diesem
Code werde ich nun auf der neuen Seite den vorhandenen Quelltext
ersetzen.
BILD 2
BILD 3
Antwort: Unten links bei Nvu gibt es die
Editiermodus-Symbolleiste. Da habe ich Bild 3 mit der Frage
verknüpft, um Platz zu sparen. Auf 'Quelltext' klicken, fertig.
3. Was steht in meiner neuen Seite als Quelltext? Antwort:
Bild 4.
BILD 4
Wenn bei dir in Zeile 1 <!DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
steht, liegt das an deiner Nvu-Einstellung. Lass' es so. Aber ab Zeile
2
sollte dein Quelltext wie bei mir im Bild 4 aussehen. Nach der
Kopiererei vom Code wie es noch folgt, wird in dem Fall, dass du
erwähnte
Abweichung im
Doctype hast, der Nvu-Composer diese wieder herstellen, so dass
"Strict"
statt "Transitional" bei dir stehen wird.
Den Quelltext der neuen leeren Seite ändere ich jetzt und
ersetze
ihn durch Jörns
Forumbeispiel, Bild 2. Noch sieht der CSS-Editor leer aus, wie im Bild
1. Du kannst ihn von hier übernehmen, dafür habe ich
ihn rot
gefärbt.
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.Links {width: 50%; float:left}
.Rechts {width: 50%; float:right}
-->
</style>
</head>
<body>
<div class="Links">Linker Container</div>
<div class="Rechts">Rechter Container</div>
</body>
</html>
4. Was passiert nach
dem Kopieren des roten
Quelltextes und Einfügen in den der neuen Seite,
so dass der
Quelltext
der neuen Seite komplett ausgetauscht wird?
Antwort: Wechsel dazu vom Editiermodus 'Quelltext' ind den Modus
'Normal'.
Jörns Container erscheinen mit den Texten 'Linker Container'
und
'Rechter Container'. Siehe Bild 5
BILD 5
(Weiter zu
Teil 2)