Format-Leitfaden für die Erstellung der Inhalte/Seiten

tetiaroa · 12. April 2011 21:15

Hallo zusammen,

ja, ich finde die neue Einteilung des Forum in Starter und Fortgeschrittene sehr gut. Ich zähle noch ganz klar zu den Frischlingen, welche sich mit viel Mühe und Selbststudium in die Materie einarbeiten müssen. Vielen herzlichen Dank auch für die vielen Informationen, die ich bereits hier im Forum schöpfen konnte!

Nun zum Anliegen:
Bei der Erstellung von Seiten dachte ich mir immer, wie ich im Editor am besten die verschiedenen Formate richtig anwende.

Es gibt da z. B. util-clearb, util-clearfix, core-wrab-100, core-wrab-960, core-wrab-780, custom-wrap-x, core-float-left, core-float-right, core-center, external, und viele andere mehr. Mir ist leider schleierhaft, was ich damit anstellen sollte. Lediglich das Format "sectionheader" verwende ich in Verbindung mit der Vorlage "Überschrift2" meistens für Zwischenüberschriften. Aber das habe ich auch nur durch Trial & Error herausgefunden. (In Word kann man ja z. B. den Abstand vor und nach einem Absatz definieren. Das sollte doch wohl auch bei den Webseiten möglich sein.)

Gibt es da irgendeine Dokumentation oder ist das garnicht so schwierig?

Viele Grüße
tetiaroa

christian7 · 12. April 2011 21:22

Hallo tetiaroa,

welches Template benutzt du im Frontend?

Andynium · 13. April 2011 07:04

tetiaroa schrieb:

Es gibt da z. B. util-clearb, util-clearfix, core-wrab-100, core-wrab-960, core-wrab-780, custom-wrap-x, core-float-left, core-float-right, core-center, external, und viele andere mehr.

Klingt nach einem bestimmten Template wink .

tetiaroa schrieb:

Mir ist leider schleierhaft, was ich damit anstellen sollte.

Naja, vereinfacht gesagt sind das bestimmte CSS-Formatierungen, die dem jeweiligen Template zugrunde liegen. Manche sind für's "Grobe" , also das Layout insgesamt zuständig. Andere wiederum sind eher für die Gestaltung von Inhalten zuständig. Da gibt es keine pauschalen Regeln und Gesetze, wonach man sich richten kann oder muss. Das ist dem Gusto des Webdesigners überlassen.

Daher ist es nicht ganz unwichtig, ein bißchen HTML und CSS lesen zu können, wenn man tiefer in die Materie einsteigen möchte.

tetiaroa schrieb:

Lediglich das Format "sectionheader" verwende ich in Verbindung mit der Vorlage "Überschrift2" meistens für Zwischenüberschriften

sectionheader ist eher eine Formatierung, die auf die "Abschnittsüberschrift" in der Menüformatierung (in Englisch Section Header wink ) zielt. Passend wäre da eher eine simple h2-Überschriftenformatierung.

tetiaroa schrieb:

In Word kann man ja z. B. den Abstand vor und nach einem Absatz definieren. Das sollte doch wohl auch bei den Webseiten möglich sein.

Na klar ... ist es auch. Außenabstände lassen sich via CSS durch margin erzeugen. Konkret wäre das margin-top und margin-bottom. Sieht praktisch so aus:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
p {
  margin-top: 0.5em;
  margin-bottom: 0.5 em;
}

oder in "Kurzschreibweise"

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
p {
  margin 0.5em 0 0.5 em 0;
}

Reihenfolge der Parameter ist hierbei oben, rechts, unten, links. Kannst für die Werte auch Pixel (=px) verwenden.

Damit dies aber nur auf Absätze innerhalb deines Inhalts verwendet wird, kannst du noch eine ID dazu nehmen. Eine ID dient dazu, ein Element in HTML genau identifizieren zu können.

Um bei obigem Beispiel zu bleiben - nehmen wir mal an, in deinem Template steht etwas in dieser Art

Hier klicken, um den Code zum Kopieren zu markieren

<div id="Inhalt">
{content}
</div>

Die ID ist hier "Inhalt" (dient der eindeutigen Identifikation eines Elements) und wird in CSS mittels einer Raute # gekennzeichnet. In CSS sieht das dann so aus

Hier klicken, um den Code zum Kopieren zu markieren

#Inhalt p {
  margin 0.5em 0 0.5 em 0;
}

Du könntest aber auch einem Absatz eine spezielle Formatierung zukommen lassen - zum Beispiel die Farbe rot

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
#Inhalt p#spezial {
  color: red;
}

Damit wird der Absatz in roter Farbe dargestellt. Da eine ID eindeutig sein muss, darf dies aber nur für einen einzigen Absatz pro Seite verwendet werden.

(wobei Googles Pagespeed solche Selektoren nicht mag - aber das ist ein anderes Thema)

Möchtest du diese Formatierung mehrfach auf einer Seite einsetzen, ist eine CSS-Klasse das richtige für dich. Eine CSS-Klasse wird in CSS durch einen Punkt gekennzeichnet (.). Übertragen auf obiges Beispiel sieht das dann so aus:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
p.spezial {
  color: red;
}

Wenn du dies via TinyMCE anwendest, sollte dann etwas in der Art im HTML-Quelltext stehen

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<p class="spezial">
superwichtiger Inhalt
</p>

Dies mal nur als kleinen Einstieg cool .

tetiaroa schrieb:

Gibt es da irgendeine Dokumentation oder ist das garnicht so schwierig?

Schwierig ist relativ - es gibt eine ganze Menge Dokumentationen. Passend zu obigem Beispiel ist hier etwas

http://www.drweb.de/magazin/css-kurzsch … eatsheets/

Ein vollständigeres Sammelsurium findest du hier

http://www.cmsmadesimple.de/forum/viewtopic.php?id=16

Cherry · 13. April 2011 07:12

Hallo...
zum richtig lernen würde ich den Kurs von Peter Kropff empfehlen:

CSS Kurs von Peter Kropff

Wenn du in deinem Template z.B. class="core-wrap-960" findest, dann ist die zugehörige Formatierung in der css Datei da zu finden wo .core-wrap-960 steht. Wenn im Template id="core-wrap-960" steht, dann findest du die Formatierung unter #core-wrap-960 in der css.

VG
Cherry

Beitrag geändert von Cherry (13. April 2011 07:42)

otter24 · 13. April 2011 09:25

Moin ....

am besten ziehst Du dir als erstes mal das Addon Firebug für den Firefox. Dann kannst Du dein CSS untersuchen. ( Rechte Maustaste und dann im Kontetextmenu >> Element untersuchen.
Da sagt er dir denn auch in welcher Zeile in welchem Stylesheet die Anweisung zu finden ist, das erleichtert die Sache ungemein.

Die class="core-wrap-960" hat zum Beispiel die Werte ( margin-left: auto;
margin-right: auto; ) was dafür sorgt das die Seite mittig ausgerichtet ist.

Die Class ist auch noch ein zweites mal im Stylesheet und hat den Wert. width: 960px womit auch klar ist warum dort 960 steht.

Ein Wrap oder Wrapper ist so etwas wie eine Hülle die andere Element umschließt und z.B die Ausrichtung oder Breite bestimmt.

Ich kann dir noch das Buch empfehlen
http://www.galileocomputing.de/katalog/ … 4-hlH.ie90

Wenn Du Bücher magst.

Als Referenz im Netz kannst Du auch css4you.de nutzen

Gruß aus HH

NaN · 13. April 2011 10:01

Ich vermute hier geht es eigentlich um die CSS Formate, die im TinyMCE im Dropdown "Format" angzeigt werden. Die Formate sind von Template zu Template unterschiedlich. CMSms sucht im Stylesheet nach Klassennamen, um sie dann individuell für jedes Template in diesem Dropdown anzeigen zu können. Allerdings werden dort alle Klassen ausfgelistet. Um hier nur bestimmte Formate (also solche, die wirklich nur für den Inhalt sind) zuzulassen, kann man in den Einstellunen des TinyMCE (Erweiterungen->TinyMCE im Tab CSS Stile) festlegen, welche Formate in diesem Dropdown angezeigt werden.

Bsp.

nehmen wir mal an, Du hast im Stylesheet eine CSS Klasse namens .nowrap.
Diese ist so formatiert, dass der Text nicht einfach bei einem Leerzeichen umbricht:

Hier klicken, um den Code zum Kopieren zu markieren

.nowrap {
    white-space:nowrap;
}

In den oben genannten Einstellungen des TinyMCE kannst Du folgendermaßen nur diese Klasse anzeigen lassen:

Hier klicken, um den Code zum Kopieren zu markieren

Kein Zeilenumbruch=nowrap

Im Dropdown "Formate" erscheint dann nur dieses Format mit dem etwas aussagekräfigerem Text "Kein Zeilenumbruch". Wenn man es auswählt, wird der markierte Text mit einem

Hier klicken, um den Code zum Kopieren zu markieren

<span class="nowrap"> TEXT </span>

versehen.

Man kann also im Tiny mit diesem Dropdown einzelnen Elementen des Inhalts bestimmte CSS Klassen geben.
Welche Klassen man da wirklich braucht, dazu muss man wohl selbst ein wenig rumprobieren.
Oder man schaut in das Stylesheet des verwendeten Templates.
Eventuell sind dort Kommentare, die etwas mehr Aufschluss über die Klassen geben.
Eine Dokumentation, welche Klasse wofür ist, habe ich jedenfalls noch nicht gesehen.
Das müsste jeder Template-Entwickler selber machen, weil nur der am besten weiß, welche Klassen wofür sind.

tetiaroa · 13. April 2011 16:43

NaN schrieb:

Ich vermute hier geht es eigentlich um die CSS Formate, die im TinyMCE im Dropdown "Format" angzeigt werden.

Ich wußte zwar nicht, dass er Editor durch TinyMCE generiert wird, aber die Liste im Dropdown habe ich gemeint.

christian7 schrieb:

welches Template benutzt du im Frontend?

Es ist das "NCleanBlue".

Danke erst mal allen für die vielen Tipps, welche ich nun erst mal alle ausprobieren/erlernen muss!

Andynium · 13. April 2011 18:04

Wenn du noch mehr Unterstützung benötigst, trau dich ruhig zu fragen smile !

owr_web · 13. April 2011 20:12

Cherry schrieb:

Wenn du in deinem Template z.B. class="core-wrap-960" findest, dann ist die zugehörige Formatierung in der css Datei da zu finden wo .core-wrap-960 steht. Wenn im Template id="core-wrap-960" steht, dann findest du die Formatierung unter #core-wrap-960 in der css.

Um alle Klarheiten zu beseitigen:
die "class" (also die mit dem Punkt) dürfen mehrmals auf einer angezeigten Seite vorkommen
die "id" (das mit #) darf auf einer angezeigten Seite nur einmal vorkommen.

Wenn du dein Template ansiehst, dann merkst du z.B. dass der Header (nicht verwechseln mit <head>!) die id="" für die CSS-Verknüpfung hat, im Menu-tempalte die einzelnen Menupunkte aber class="" haben.
Der Header kommt im Normalfall einmal vor auf einer Seite, nämlich ganz oben. Und Menupunkte hast du ja im Normalfall immer mehrere.

kurz gesagt id=Identifizierung, class=Klassifizierung

Forum für CMS/made simple

#1 12. April 2011 21:15

Format-Leitfaden für die Erstellung der Inhalte/Seiten

#2 12. April 2011 21:22

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#3 13. April 2011 07:04

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#4 13. April 2011 07:12

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#5 13. April 2011 09:25

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#6 13. April 2011 10:01

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#7 13. April 2011 16:43

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#8 13. April 2011 18:04

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

#9 13. April 2011 20:12

Re: Format-Leitfaden für die Erstellung der Inhalte/Seiten

Fußzeile des Forums