Arbeiten mit Column

Tutorials, Website Bakeron Mai 28th, 20113 Kommentare

Zunächst einmal, was sind column? Als column bezeichnet man in der html Sprache Spalten, diese könnten genauso, Bereich oder Abschnitt heissen. In der Programmiersprache verwendet man jedoch meist englische Begriffe. Column sind also Bereiche auf einer Webseite. Also angenommen man hat eine Homepage die eine Breite von 1000 Pixeln hat. Nun könnte man die 1000 Pixel in vier column´s teilen. Dafür müsste man einfach die Bereiche mit sogenannten div´s (Definitionen) festlegen.

Als Beispiel:

1000 Pixel geteilt durch vier sind je 250 Pixel. Also legt man vier div´s an mit col-250. Dieses lässt man dann links floaten. Eines der vier nennt man col-250-last, als letztes und lässt es rechts floaten.

Muster:


<div class="col-250">
<p>Hier der Text für diese column</p>
</div>


<div class="col-250">
<p>Hier der Text für diese column</p>
</div>


<div class="col-250">
<p>Hier der Text für diese column</p>
</div>


<div class="col-250-last">
<p>Hier der Text für diese column</p>
</div>

Die CSS hierfür wäre dann:

.col-250 {
	float: left;
	width: 250px;
                
}

.col-250-last {
	float: right;
	width: 250px;
}

Sozusagen können die 1000 Pixel einer Webseite in beliebig viele Bereiche (column´s) aufgeteilt werden.

Webseiten an sich bestehen ja immer aus Bereichen die mit div´s gestaltet werden. Div für container, wrapper, left, right u.s.w. Viele Webdesigner legen Bereiche wie sidebar schon von beginn an fest, um letzten News, Twitter und co zu zeigen. Mit column´s ist die Gestaltung frei und kann immer individuell eingesetzt werden. Die 1000 Pixel einer Page müssen halt dann in möglichst viele Bereiche geteilt werden um eine große Auswahl an Darstellungsmöglichkeiten zu bieten.

Columns für Websitebaker

Das Content Management System Websitebaker ist auf PHP Basis und Inhalte werden mit einem Editor in die Webpage eingefügt. Die meisten WB User verwenden den HTML-Editor wo Schriftarten, Bilder und weiteres per Klick auf einem Icon eingefügt und gestaltet werden können. Erfahrene WB-User verwenden nicht den herkömmlichen Editor sondern schalten diesen in den Optionen aus. Was bleibt ist ein reines Feld in dem man HTML Codes schreiben muß.

Vorteile:

Der herkömmliche Editor setzt immer ein Klammer p /Klammer bei Texten ein, ohne – kann man selbst bestimmen ob nun ein p sein soll oder nicht, was sich in anderen Bereichen oft auch Seo-Technisch auswirken kann. Zu viele unnötige Klammern und Codemüll bedeutet auch längere Ladezeiten.

Nachteile:

Man sieht nicht was man gemacht hat und muss halt HTML können! Sozusagen müssen alle Codes für das Einfügen in reinem HTML im Kopf eines Webdesigners sitzen.

Editor und Abschnitte

Wer die Columns nicht über HTML im Editor schreiben möchte, muss halt Blöcke bauen. In der Anwendung müssen dann Abschnitte angelegt werden und diese müssen natürlich vorher in der info.php auch stehen. Beim befüllen einer Seite sind somit vier Abschnitte zu erstellen. Abschnitt 1 wäre dann col-250-1. Abschnitt zwei – col-250-2. Die Bezeichnungen -1, -2, -3 und -last, sind nur zur Orientierung für die Abschnitte wenn diese im Backend unter Abschnitte verwalten erstellt werden.

Zunächst mal die index.php.

Für eine Column brauchen wir ein div, also:

<div id="col-250">
<?php page_content(2); ?>
</div>
<div id="col-250">
<?php page_content(3); ?>
</div>
<div id="col-250">
<?php page_content(4); ?>
</div>
<div id="col-250-last">
<?php page_content(5); ?>
</div>

Nun kommt die info.php:

$block[2]='col-250-1';
$block[3]='col-250-2';
$block[4]='col-250-3';
$block[5]='col-250-last';

Die CSS hierfür wäre dann:


.col-250 {
	float: left;
	width: 250px;
                
}

.col-250-last {
	float: right;
	width: 250px;
}

Margin und Padding müssen selbstverständlich auch bei Columns in die CSS, sonnst kleben die Bereiche aneinander und haben keinen Abstand.

Wichtig!

Für alle Columns muss am Ende ein clearing stehen. Das clear macht sozusagen einen Schlussstrich unter alle Bereiche. Danach können weitere Bereiche oder Content angelegt werden.

<div class="clearing"></div>

CSS für clearing:

.clearing {height: 1px;clear: both;}

Hier ein Muster:
Das Template Starlight, was auch für das WebsiteBaker CMS ist, hat wie auch weitere Premium Templates von Combosa columns eingebaut.

 

Demo

Template kaufen?

 

 

  • StumbleUpon
  • Digg
  • Delicious
  • Technorati
  • Yahoo! Bookmarks
  • Twitter
  • MySpace
  • Google Bookmarks
  • Facebook
  • E-Mail

3 Antworten zu “Arbeiten mit Column”

  1. Andreas Rogait says:

    Vielen Dank für dir wirklich klasse aufbereiteten Tutorials in diesem Blog. Das eine kleine Nachfrage in Bezug auf das Arbeiten mit Col´s in WebsiteBaker zu einem ausführlichen Tutorial ausreifen würde, hätte ich nicht gedacht. Super!
    Den Ansatz mit den Blöcken hätte ich ohne Kenntnis dieses Tutorials wohl auch gewählt, der 2. Ansatz scheint aber wesentlich interessanter, da flexibler, zu sein. Kann man ja auch mit einer Code-Sektion bewerkstelligen ohne den Editor komplett zu deaktivieren. Combosa.de ist diesbezüglich ja auch sehr flexibel. Mal 2, mal 3 oder 4 Col´s – würde ja mit Blöcken mehrere Templates (mehrere index.php´s) erforden, die den einzelnen Seiten dann zugeordnet werden. Design meets IT – hier steht der Name wohl doch für´s Programm. I´m so excited … 😉

    • admin says:

      Danke Andreas
      Man muss den Editor auch nicht unbedingt abschalten, man kann ja im Editor auch auf Quellcode klicken und somit die div´s und den Inhalt erstellen.

      „…würde ja mit Blöcken mehrere Templates (mehrere index.php´s) erforden…“

      Nein! man braucht immer nur eine index.php, Blöcke lassen sich ja auch mit if-Abfragen erstellen.
      If block dann zeige ihn, wenn nicht dann halt nicht!
      head
      ?php ob_start(); page_content(3); $block3=ob_get_contents(); ob_end_clean(); ?

      Im body dann:
      ?php if ((SECTION_BLOCKS) AND ($block3 != "")) { ?

      ?php print $block3; ?
      alles schliessen mit ?php } ?

      … und das Tutorial war längst überfällig, zumal ich immer mit column´s arbeite.
      Also, viel Spaß noch
      Jürgen

  2. Andreas Rogait says:

    Oh man, arbeite jetzt schon 3 Jahre mit WebsiteBaker, aber jeder Tag bringt neue Erkenntnisse und Wissenszuwachs … Cool, ich mag die Community.
    Mhh, der Quelltext Deiner Website gibt soetwas leider nicht her – Manchmal wären ungeparste Quellcodes wesentlich interessanter 😉 … Sollte ich mich mal ransetzen und ausprobieren.
    War wieder eine tolle Lektion – Danke für´s Feedback, hab mal wieder viel zu quer gedacht. Warum einfach, wenn´s auch kompliziert geht 😉
    Never Stop Thinking! – Der Leitspruch schlechthin diesbezüglich … Danke Jürgen – weiter so!

    Andreas

Schreiben Sie einen Kommentar