Cpsection: Unterschied zwischen den Versionen

Aus MWconn.info
Wechseln zu: Navigation, Suche
K (Kleinigkeiten, Stil.)
K (Seitenstruktur: Etwas Farbe...)
Zeile 61: Zeile 61:
 
Jeder zu kopierende Abschnitt wird von zwei Markierungen eingeschlossen, die denselben Namen tragen; Beispiel:
 
Jeder zu kopierende Abschnitt wird von zwei Markierungen eingeschlossen, die denselben Namen tragen; Beispiel:
 
<code>
 
<code>
  COPY_SECTION_MEIN_ABSCHNITT
+
  <span style="background-color:yellow;">COPY_SECTION_mein_Abschnitt</span>
 
  ... hier der Inhalt des Abschnitts ...
 
  ... hier der Inhalt des Abschnitts ...
  COPY_SECTION_MEIN_ABSCHNITT
+
  <span style="background-color:yellow;">COPY_SECTION_mein_Abschnitt</span>
 
</code>
 
</code>
 
Natürlich müssen solche Markierungen im HTML-Quelltext in Kommentar-Klammern eingeschlossen werden, sonst erscheinen sie später auf der Seite. Leider hat KompoZer mit HTML-Kommentaren so seine Schwierigkeiten: man kann sie weder ganz an den Anfang einer HTML-Seite stellen, noch ganz ans Ende. Auch hat der CSS-Editor des KompoZers seine eigene Dynamik und schiebt Kommentare ungefragt vom Header in den Body der Seite.
 
Natürlich müssen solche Markierungen im HTML-Quelltext in Kommentar-Klammern eingeschlossen werden, sonst erscheinen sie später auf der Seite. Leider hat KompoZer mit HTML-Kommentaren so seine Schwierigkeiten: man kann sie weder ganz an den Anfang einer HTML-Seite stellen, noch ganz ans Ende. Auch hat der CSS-Editor des KompoZers seine eigene Dynamik und schiebt Kommentare ungefragt vom Header in den Body der Seite.
Zeile 77: Zeile 77:
 
  &lt;link rel="shortcut icon" href="mwc.ico"&gt;&lt;style type="text/css" media="all"&gt;
 
  &lt;link rel="shortcut icon" href="mwc.ico"&gt;&lt;style type="text/css" media="all"&gt;
 
  ... hier die Styles, die für alle Seiten gelten ...
 
  ... hier die Styles, die für alle Seiten gelten ...
  #COPY_SECTION_KOPF { }
+
  #<span style="background-color:yellow;">COPY_SECTION_Kopf</span> { }
 
   
 
   
 
  ... hier die Styles, die nur für diese Seite gelten ...
 
  ... hier die Styles, die nur für diese Seite gelten ...
 
   
 
   
  #COPY_SECTION_HAUPTMENUE { }
+
  #<span style="background-color:yellow;">COPY_SECTION_Hauptmenue</span> { }
 
  &lt;/style>&lt;/head&gt;&lt;body style="color: black;" lang="DE" link="black"&gt;
 
  &lt;/style>&lt;/head&gt;&lt;body style="color: black;" lang="DE" link="black"&gt;
 
  ... hier das Hauptmenü (auf allen Seiten gleich) ...
 
  ... hier das Hauptmenü (auf allen Seiten gleich) ...
  &lt;!--COPY_SECTION_HAUPTMENUE (Ende)--&gt;
+
  &lt;!--<span style="background-color:yellow;">COPY_SECTION_Hauptmenue</span> (endet hier)--&gt;
 
   
 
   
 
  ... hier der individuelle obere Teil dieser Seite  ...
 
  ... hier der individuelle obere Teil dieser Seite  ...
 
   
 
   
  &lt;!--COPY_SECTION_DOWNLOADMENUE--&gt;
+
  &lt;!--<span style="background-color:yellow;">COPY_SECTION_Downloadmenue</span>--&gt;
 
  ... Hier ein Untermenü, das nur auf wenigen Seiten erscheinen soll ...
 
  ... Hier ein Untermenü, das nur auf wenigen Seiten erscheinen soll ...
  &lt;!--COPY_SECTION_DOWNLOADMENUE--&gt;
+
  &lt;!--<span style="background-color:yellow;">COPY_SECTION_Downloadmenue</span>--&gt;
 
   
 
   
 
  ... hier der individuelle untere Teil dieser Seite  ...
 
  ... hier der individuelle untere Teil dieser Seite  ...
 
   
 
   
  &lt;!--COPY_SECTION_FUSS (Beginn)--&gt;
+
  &lt;!--<span style="background-color:yellow;">COPY_SECTION_Fuss</span> (beginnt hier)--&gt;
 
  ... hier der Seitenfuß, der auf allen Seiten gleich ist ...
 
  ... hier der Seitenfuß, der auf allen Seiten gleich ist ...
 
  &lt;/body&gt;&lt;/html&gt; </code>
 
  &lt;/body&gt;&lt;/html&gt; </code>

Version vom 30. Januar 2010, 11:25 Uhr

Vorwort

Wozu das Ganze?

Stell dir vor, du willst mit freien Webseiten-Editor KompoZer ein Seitenmenü erstellen, das auf allen Seiten gleich aussehen soll. Hättest du nun PHP oder andere dynamische Hilfsmittel zur Hand, wär das natürlich möglich, weil man damit jede Webseite zum Zeitpunkt des Herunterladens neu generieren kann.

Trotzdem gibt es Menschen, die das Einfache lieben: statische HTML-Seiten, die auf dem Server herumliegen und nur noch darauf warten, aufgerufen zu werden. Dieses Einfache hat auch Vorteile - man braucht keine Datenbank auf dem Server, keinen dynamischen Webspace, keinen erweiterten Zugriff auf den Server (keine root-Rechte usw.). Und man hat etwas in der Hand - jede Webseite ist in einer einzelnen HTML-Datei gespeichert und kann direkt editiert werden.

Das Problem...

Man erstellt die erste Seite - inklusive Menü. Dann die zweite Seite. Schlauerweise kopiert man dazu die erste, so dass man das Menü auch gleich auf der zweiten Seite hat. Nun kommt die dritte. Halt - da war doch etwas - man hat die vierte Seite im Menü vergessen. Nun gilt es, alle Seiten zu öffnen und nachzueditieren, um die vierte Seite in die Menüs der ersten drei Seiten einzubauen. Angenommen, die zweite und die vierte Seite haben jeweils Untermenüs, die auf den untergeordneten Seiten ebenfalls erscheinen sollen. Viel Arbeit bei Änderungen...

cpsection

Der Name steht für "copy section" - "kopiere einen Anschnitt". Mit diesem Programm lassen sich speziell markierte Abschnitte von einer Datei in eine andere kopieren. Voraussetzung ist natürlich, dass sich in der anderen Datei die gleichen Markierungen befinden, weil sonst nicht klar ist, an welchen Positionen die zu kopierenden Abschnitte eingefügt werden sollen.

Download

Unter Windows brauchen wir bei der verfügbaren KompoZer-Version zwei Zusatzprogramme, unter Ubuntu nur eines:

  • cpsection hier herunterladen. Die ZIP-Datei enthält die Programme für beide Betriebssysteme "cpsection.exe" (Windows) und "cpsection" (Ubuntu).
  • Nur bei Windows: Mit der rechten Maustaste auf "HandCoder" bei KompoZer-web.de und dann herunterladen.

Haftungsausschluss: Nutzung auf eigene Gefahr - die Haftung ist so weit ausgeschlossen, wie das gesetzlich zulässig ist.

Installation

Die Zusatzprogramme müssen installiert werden:

cpsection

Hier muss eigentlich gar nichts "installiert" werden. Es reicht, wenn man die Programmdatei an einen Ort verschiebt, an dem man sie wiederfindet. Einfacher ist es eventuell für später, wenn man sie zu den anderen System-Programmen schiebt - bei Windows ist das in der Regel das Verzeichnis "C:\Windows\System32", bei Ubuntu "/usr/bin".

HandCoder (nur bei Windows)
  • KompoZer öffnen und im Menü Tools→Extensions wählen.
  • Auf Install klicken und die heruntergeladene heruntergeladene HandCoder-Datei installieren.

Anschließend muss der HandCoder parametriert werden:

  • Im Menü auf Tools→HandCoder→Einstellungen... klicken.
  • Registerkarte "Einstellungen" öffnen.
  • Als Programmdatei cpsection auswählen (z.B. im o.g. Verzeichnis "C:\WINDOWS\system32").
  • Bei Parameter eintragen: --warten
  • Falls das Programm erstmal nur getestet werden soll, kann man als weitere Parameter auch --test oder --verbose eintragen.
  • Das Fenster per OK schließen.

Bei Ubuntu:

  • KompoZer öffnen und im Menü Tools→Options wählen.
  • Im erscheinenden "Options"-Fenster links auf Applications klicken.
  • Im oberen Auswahlfeld "Text Editor" wählen und dann auf use custom application klicken.
  • Bei "file path" das Gnome-Terminal auswählen: "/usr/bin/gnome-terminal".
  • Bei "arguments" eintragen: -x /usr/bin/cpsection --warten (oder ggf. ein anderer Pfad)
  • Falls das Programm erstmal nur getestet werden soll, kann man als weitere Parameter auch --test oder --verbose eintragen.
  • Das Fenster per OK schließen.

Nun steht das Programm cpsection per Funktionstaste F6 zur Verfügung.

Verwendung

Seitenstruktur

Damit cpsection weiß, welche Abschnitte einer HTML-Datei kopiert werden, also auf allen anderen Seiten gleich sein sollen, müssen diese Abschnitte durch Markierungen gekennzeichnet werden. Jede dieser Markierungen beginnt mit dem Text COPY_SECTION und erhält als Zusatz einen Namen. Der Name darf nur aus den Buchstaben A bis Z (groß und klein, keine Umlaute), den Ziffern 0 bis 9 und dem Unterstrich bestehen.

Jeder zu kopierende Abschnitt wird von zwei Markierungen eingeschlossen, die denselben Namen tragen; Beispiel:

COPY_SECTION_mein_Abschnitt
... hier der Inhalt des Abschnitts ...
COPY_SECTION_mein_Abschnitt

Natürlich müssen solche Markierungen im HTML-Quelltext in Kommentar-Klammern eingeschlossen werden, sonst erscheinen sie später auf der Seite. Leider hat KompoZer mit HTML-Kommentaren so seine Schwierigkeiten: man kann sie weder ganz an den Anfang einer HTML-Seite stellen, noch ganz ans Ende. Auch hat der CSS-Editor des KompoZers seine eigene Dynamik und schiebt Kommentare ungefragt vom Header in den Body der Seite.

Für das erste Problem gibt es eine einfache Lösung: cpsection erlaubt es, Markierungen, die ganz am Anfang oder ganz am Ende der Seite stehen würden, wegzulassen.

Auch das zweite Problem ist lösbar. Wir behelfen uns mit einem Trick und fügen Style-IDs ein, die es gar nicht gibt. Es handelt sich in diesem Fall um unsere Markierungen. Da KompoZer nicht weiß, dass diese Style-IDs gar nicht echt sind, lässt er sie dort stehen, wo wir sie eingetragen haben.

Beispielstruktur:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
...
<link rel="shortcut icon" href="mwc.ico"><style type="text/css" media="all">
... hier die Styles, die für alle Seiten gelten ...
#COPY_SECTION_Kopf { }

... hier die Styles, die nur für diese Seite gelten ...

#COPY_SECTION_Hauptmenue { }
</style></head><body style="color: black;" lang="DE" link="black">
... hier das Hauptmenü (auf allen Seiten gleich) ...
<!--COPY_SECTION_Hauptmenue (endet hier)-->

... hier der individuelle obere Teil dieser Seite  ...

<!--COPY_SECTION_Downloadmenue-->
... Hier ein Untermenü, das nur auf wenigen Seiten erscheinen soll ...
<!--COPY_SECTION_Downloadmenue-->

... hier der individuelle untere Teil dieser Seite  ...

<!--COPY_SECTION_Fuss (beginnt hier)-->
... hier der Seitenfuß, der auf allen Seiten gleich ist ...
</body></html> 

(Hinweis: In der Darstellung hier im Wiki sind manche Unterstriche nicht sichtbar, bei einer Kopie jedoch vorhanden.)

Synchronisierung

Hat man einen Abschnitt editiert, der auf allen Seiten gleich sein soll, muss man dessen Inhalt auf die anderen HTML-Seiten übertragen. Das geht aus dem KompoZer heraus mit der Taste F6. Dadurch werden alle markierten Abschnitte in die genauso markierten Abschnitte aller anderen HTML-Seiten im gleichen Ordner übertragen. Die vorherigen Inhalte der Abschnitte gehen dadurch verloren. Nicht nur deswegen empfiehlt es sich, vor einer solchen Änderungsaktion alle Dateien des Ordners zu sichern.

Tipp: Öffnen mit...

Um Dateien aus dem Ordner heraus einfacher mit dem KompoZer zu öffnen, können wir das Kontextmenü mit ein paar Klicks entsprechend ergänzen.

Windows

Bei Windows XP geht das so:

  • Einen beliebigen Dateiordner öffnen.
  • Im Menü des Fensters Extras→Ordneroptionen... wählen.
  • Die Registerkarte Dateitypen öffnen.
  • Bis zum Listeneintrag "HTML" scrollen und diesen anklicken.
  • auf Erweitert klicken.
  • Im sich nun öffnenden Fenster "Dateityp bearbeiten" auf Neu... klicken.
  • Für die neue Aktion den Vorgangsnamen "KompoZer" eintragen und auf Durchsuchen klicken.
  • In der Dateiauswahl nach dem Programm "kompozer.exe" suchen und auf Öffnen klicken.
  • Auf OK, OK und Schließen klicken.

Ab sofort befindet sich im Kontextmenü einer jeden HTML-Datei der Menüpunkt "KompoZer". Das erleichtert die Arbeit später, weil man jede HTML-Datei nun mit zwei Mausklicks per KompoZer öffnen kann: mit der rechten Maustaste auf den Dateinamen, dann mit der linken auf den Menüpunkt "KompoZer".

Ubuntu

Hier verwenden wir die Funktion Öffnen mit, bis jemand diese Anleitung entsprechend des vorausgehenden Abschnitts ergänzt hat. ;-)