Fünf-Minuten Anlage mit KompoZerihr-web-design.de/down/site_mit_kompozer.pdf · 10 von 14...

Fünf-Minuten <div> Anlage mit KompoZer

Fabien Cazenave (Kazé), KompoZer entwickler.

Warum <div> statt <table>?1.

Ertes <div> Layout «from scratch»

Neue Seite erstellen1.

Menü-Listen einfügen2.

Erstes Menü und erstes Style Regel3.

Zweites Menü4.

Header und Footer5.

Inhalt6.

Haupt Container: <body> Element7.

Speichern ;-)8.

2.

Präsentierung von CaScadeS

Einziges Stylesheet für alle Seiten vom Website1.

Übung: Anlage des ganzen Website ändern2.

Andere Stylesheet Beispiele: KazGarden Project3.

3.

Further Reading4.

Warum <div> statt <table>?

Viele Webmeisters verwenden Tabellen für ihre Layout. Das bringt aber nur Nachteile:

das Quell-Text wird sehr schwierig zu lesen und bearbeiten;

wenn man das Layout ändern will, sollen alle Seites bearbeiten werden;

es ist viel schwieriger, grafike Elementen einzufügen;

für Blinder sind die Seiten sehr unangenehm zu besuchen.

Das bedeutet aber nicht, daß <table> nie mehr verwenden sollen, sondern daß <table> nur für Tabellen gedacht sind!

Diese <table> Layouts sind eine Gewohnheitssache, die von den ersten Versionen von Internet Explorer und Netscape

kam, wann es noch kein CSS gab. Jetzt können aber alle Web Browsers gut genug CSS (sogar IE6!), um das HTML

Inhalt von den Anlage und Style zu trennen. Das bringt die folgende Vorteile:

das HTML Quell-Text bleibt sehr einfach zu lesen und bearbeiten;

die CSS Datei(en) wird (werden) nur einmal vom Browser geladen;

alle Seiten verwenden genau die gleiche Anlage;

die Anlage vom ganzen Website kann bearbeitet werden, ohne HTML Dateien zu ändern: für den Webmaster ist

das einfacher und viel schneller, besonders wenn es viele Seiten gibt.

Das kann schon schwieriger als <table> Anlage aussehen; das ist bestimmt eine ganz andere Weise, Web Siten zu

entwickeln. WYSIWYG-Editoren wie DreamWeaver oder KompoZer machen es aber einfach, moderne <div>

Layouts zu bauen.

Ertes <div> Layout «from scratch»

Nehmen wir eine klassiche 3-columns Anlage als Beispiel.

KompoZer 0.7.10 wird verwendet; es kann vom offiziellen Website heruntergeladen werden: http://kompozer.net/

Neue Seite erstellen

layout http://fabiwan.kenobi.free.fr/css/gwnl/

1 von 14 23.06.2013 21:54

KompoZer starten und fünf Linie einfügen:

Titel

Menü 1

Menü 2

Inhalt

Unterschrift

Dann für jede Linie:

in der Linie clicken;1.

« Generic container (div) » als Absatzformat wählen;2.

eine gepunkte rote Begrenzung wird im Fenster angezeigt, und ein <div> Tag kommt jetzt in der Statuszeile.3.

Das Fenster sollte jetzt so aussehen:

Nota: die roten Begrenzungen sind nur im normalen Ansicht sichtbar, nicht im Vorschau Ansicht oder im Browser.

Menü-Listen einfügen

Wichtiger Punkt: als Menü werden wir auch keine Tabelle verwenden, sondern ganz einfache Link Listen. Diese Liste

machen mehr Sinn im HTML Struktur und erlauben viele CSS Layouts: http://css.maxdesign.com.au/listamatic/


2 von 14 23.06.2013 21:54

Erstes Menü und erstes Style Regel

im « Menü 1 » Block clicken;1.

in der Statuszeile am <div> Tag rechts-clicken und « Inline Styles » wählen:2.

« Box » Tab wählen:

Puffer Eigenschaft als « Links » setzen

Breite: 150px

3.


3 von 14 23.06.2013 21:54

« Allgemein » Tab wählen und « Extrahieren und allgemeinen Style anlegen » clicken:

Element als « menu1 » nennen und OK clicken.

4.

Das « Menü 1 » Block kriegt jetzt ein ID attribute (das in der Statuszeile angezeigt wird) und ein allgemeines Style

Regel wurde gerade dafür gelegt.

Zweites Menü

Jetzt soll das zweites Menü nach rechts, das ist fast das gleiche.

im « Menü 2 » Block clicken;1.

in der Statuszeile am <div> Tag rechts-clicken und « Inline Styles » wählen;2.

« box » Tab wählen:

Puffer Eigenschaft als « Rechts » setzen

Breite: 150px

3.

« Allgemein » Tab wählen, « Extrahieren und allgemeinen Style anlegen » clicken, Element als « menu2 »4.


4 von 14 23.06.2013 21:54

nennen und OK clicken.

Das Ergebnis sollte jetzt so aussehen:

Header und Footer

Das Unterschrift Block sollte natürlich nicht zwischen den Menü Blocks sondern am Ende von der Seite sein; dafür

sollen wir jetzt ein neues Style Regel mit der « Aufhebung » Eigenschaft setzen.

im « Unterschrift » Block clicken;1.


« Box » Tab wählen, « Aufhebung » Eigenschaft als « beides » setzen;3.

man darf natürlich ein paar andere Style Eigenschaften verwenden; in diesem Beispiel habe ich einen blauen

Hintergrund mit weissem Text gewählt;

4.

« Allgemein » Tab wählen, « Extrahieren und allgemeinen Style anlegen » clicken, Element als « footer »


5.


5 von 14 23.06.2013 21:54

Das Titel block ist ein sehr wichtiger Teil von der Web-Seite. Das ist was Besucher erst sehen, man sollte das

Website damit in einem Augenblick erkennen. Fürs Beispiel werden nur Text und Farbe Eigenschaften gesetzt, aber

GIMP Users sollten hier ein schönes Bild machen und als Hitergrund setzen.

im « Titel » Block clicken;1.


« Hintergrund » Tab clicken, Farbe und/oder Bild wählen;3.

« Text » Tab clicken und Eigenschaften anpassen;4.

« Allgemein » Tab wählen, « Extrahieren und allgemeinen Style anlegen » clicken, Element als « header »


5.

Inhalt

Irgendwann wird das Inhalt gefüllt werden. Wenn man aber am Layout arbeitet, ist es besser ein Text zu wählen, das


6 von 14 23.06.2013 21:54

gar nichts bedeutet, sodaß man sich nicht am Inhalt sondern am Layout konzentrieren kann. Das « Lorem ipsum... »

Text ist perfect dafür, es gibt sogar eine LoremIpsum Erweiterung für KompoZer.

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.

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.

Wenn dieser Text eingefügt wird, kommt ein neues Problem:

Die Lösung ist ganz einfach: das « Inhalt » Block soll bloß Außenabstände haben, die breiter als die « Menü » Blocks

sind.

im « Inhalt » Block clicken;1.


« Box » Tab clicken, « Außenabstand » Eigenschaften verwenden:3.


7 von 14 23.06.2013 21:54

« Allgemein » Tab wählen, « Extrahieren und allgemeinen Style anlegen » clicken, Element als « content »


4.

Jetzt soll es besser aussehen:


8 von 14 23.06.2013 21:54

Haupt Container: <body> Element

Dieses Layout füllt die ganze Breite vom Browser Fenster ('liquid layout'). Das kann praktisch sein, aber mit

modernen Monitors (zB. 1680*1050) wird das Inhalt schwieriger zu lesen werden; viele Webmasters verwenden also

lieber feste Breiten( 'fixed-width layout') und zentrieren die Seite im Browser.

Das war 10 Jahre her mit <table> und <center> Elements geschafft; das kann man heutzutage viel einfacher mit einem

Style Regel an <body> tun. Beispiel:

in der Statuszeile am <body> Tag rechts-clicken und « Inline Styles » wählen;1.

« Box » Tab clicken:

Breite: 760px;

Außenabstand, rechts und links: auto (das wird <body> im Fenster zentrieren)

2.


9 von 14 23.06.2013 21:54

« Begrenzungen » Tab clicken und eine Begrenzung definieren ();3.

« Allgemein » Tab wählen, « Extrahieren und allgemeinen Style anlegen » clicken, « alle Elemente des

gleichen Elemententyps » clicken und OK clicken.

4.

Aufpassen: diesmal ist es nützlos, das Element zu nennen, weil es nur ein <body> Element gibt.


10 von 14 23.06.2013 21:54

Speichern ;-)

Alle Anlage und Style Eigenschaften wurden in einem internem CSS Stylesheet gespeichert; das HTML QuellText ist

sauber und liesbar geblieben, die CSS Eigenschaften liegen in einem <style> Element; die Seite wird von allen

Browsern correct gelesen.

Das Website hat also einen guten Abfahrt genommen. :-)

Präsentierung von CaScadeS

KompoZer enthält ein CSS Editor, CaScadeS. Dieses Tool ist relativ einfach zu verwenden und erlaubt CSS

Stylesheets zu bearbeiten, ohne die ganze CSS Syntax kennen zu müssen.

Einziges Stylesheet für alle Seiten vom Website

CaScadeS aufmachen: [F11] drücken oder CasCadeS icon clicken;1.


11 von 14 23.06.2013 21:54

im linken Teil erkennt man alle Regel, die früher definiert wurden.

« Stylesheet exportieren und auf externes Stylesheet umstellen » clicken;2.

Stylesheet als « style.css » speichern;3.

CaScadeS zumachen (« OK » clicken);4.

HTML Dokument als « layout.html » speichern.5.

Das Stylesheet wird exportiert und kann jetzt von allen Seiten des Websites verwendet werden. Das « layout.html »

Dokument sollte jetzt als Modell für alle andere Seiten verwenden werden.

Übung: Anlage des ganzen Website ändern

In diesem Beispiel wird das erste Menü horizontal unter dem Titel gelegt.

Mit dem Datei-Explorer, eine Copie von « style.css » machen (zB. style-3col.css);1.

CaScadeS aufmachen;2.

« #menu1» Regel bearbeiten:

#menu1 clicken;

« Hintergrund » Tab:

Farbe: #9999ff

« Box » Tab:

Puffer: nicht angegeben;

Breite: 100%;

Innenabstand Unten: 1em

« Hintergrund » Tab clicken und eine Hintergrund Farbe wählen (hier: #9999ff)

3.

Menü-Liste horizontal liegen:

neues Regel einfügen: Style Button clicken und « #menu1 li » Regel erstellen;

dieses Regel gilt für alle List-Elemente im « menu1 » Block;

4.


12 von 14 23.06.2013 21:54

« Listen » Tab:

Listentyp (Stil): kein

« Box » Tab:

Puffer: links;

Außenabstand links: 25px

« content » Regel anpassen:

« Box » Tab:

Außenabstand links: 0

5.

CaScadeS zumachen: die externe Stylesheet wird gespeichert.6.


13 von 14 23.06.2013 21:54

Das HTML Document wird absolut nicht geändert.

Alle HTML Seiten vom Website nehmen jetzt die neue Anlage.

Nur eine CSS Datei soll hochgeladen werden.

Andere Stylesheet Beispiele: KazGarden Project

Mit dieser einfachen HTML-Struktur gibt es viele Anlage Möglichkeiten. Das KazGarden Project wurde von Eleanora

in Gimp-Werkstatt gestartet; es soll noch weiter entwickeln, aber es zeigt schon ein paar Beispiele von originalen

Anlagen, die mit dieser HTML-Struktur verwenden werden können.

http://gimp-werkstatt.de/kaze/

Dieses Project wird dank seinen Contributors wachsen: entwickeln Sie ihre eigene Stylesheet und Grafiken, und

schlagen Sie ihres Template vor.

Further Reading

Listamatic: http://css.maxdesign.com.au/listamatic/ (en)

« One list, many options. »

Ein Muß. Diese Menü Beispiele verwenden die gleiche HTML Struktur.

Zen Garden: http://www.csszengarden.com/tr/deutsch/

Das Referenz für erfahrenere Users.

Die HTML Struktur und CSS Stylesheet sind komplizierter als hier, aber es gibt viele sehr schöne Templates.


14 von 14 23.06.2013 21:54

Fünf-Minuten Anlage mit KompoZerihr-web-design.de/down/site_mit_kompozer.pdf · 10 von 14...

Documents

Transcript of Fünf-Minuten Anlage mit KompoZerihr-web-design.de/down/site_mit_kompozer.pdf · 10 von 14...