- Registriert
- 24.01.06
- Beiträge
- 5.589
So, Versuch Nummer Zwo. Jetzt nochmal für blutende Anfänger in WYSIWYG.
1) Rahmenbedingungen
Webspace: Eine PN an mich sollte erst einmal genügen - für Apfeltalker.
Editor: Meine Wahl trifft der Dreamweaver, da er sehr flexibel ist, eigenen Code zulässt und im Notfall noch akzeptablen Code selbst erstellt.
Bitte das Tryout installieren. Mehr als 30 Tage sollte der Workshop nicht dauern
KAPITEL 1: Einführung, Überschrift & Text
2) Das Interface
Wir klicken jetzt auf Neu Erstellen -> HTML
Nun erkläre ich ersteinmal kurz das Interface:
1) WYSIWYG: Das (vermutliche) Ergebniss eurer Arbeit.
2) CSS - Stile: Ähnlich wie in Word & Pages sind CSS Klassen definierte Formatierungsklassen.
3) Codefenster: Der HTML Code
4) Eigenschaften des gewählten Objekts
Wir werden hauptsächlich mit diesen vier Fenstern arbeiten.
3) Die Seite - Die Grundeinstellungen
Drückt STRG+J. Dieses Shortcut öffnet die allgemeinen Seiteneinstellungen (Größtenteils per CSS definiert).
Schriftart: Die Schriftart, wenn keine andere definiert ist.
Größe - Hintergrundbild: Dito
Wiederholen: Wenn das Hintergrundbild zu klein ist, wird es wiederholt. Oder halt auch nicht.
Rand: Der Seitenrand. Wenn ihr zum Beispiel ein Bild an die obere linke Kante kleben wollt, dann müsstet ihr dort überall 0 eintragen. Das lassen wir jetzt erst einmal.
Hier mal ein paar Grundeinstellungen. Es empfiehlt sich, grundsätzlich Schwarze Schrift auf weißem Grund zu haben - auch wenn Apple es im Moment andersrum macht. Keiner ließt sich gerne lange Texte in weiß durch.
Jetzt hat unsere Seite schon ganz nette normale Schrift. Jetzt nehmen wir uns noch den Menüpunkt "Verknüpfungen" vor.
Ich werde mich erst einmal ein bisschen an Bordeaurot und Grautöne halten. (Änderung: Das Grau im Hintergrund ist ein bisschen Dunkel. Je nach Belieben gerne was helleres nehmen).
4) CSS Einführung
Nun beschäftigen wir uns mit dem schon erwähnten CSS - Fenster bzw. mit CSS Klassen. Damit wir bestimmte Formatierungen nicht immer wieder aufhändig per HTML angeben müssen, definieren wir sie in Klassen.
In dem Fenster "Alle Regeln" sollten schon allgemeine Regeln stehen, die wir in Schritt 3 eben definiert haben. Wie der CSS - Code aussieht, ist im oberen Codefenster ersichtlich.
Jetzt erstellen wir uns eine Klasse für die Überschrift. Dazu machen wir einen Rechtsklick in das CSS - Fenster (2) und wählen "Neu".
Nun zu den Eigenschaften:
Selektor - Typ
HTML benutzt verschiedene Tags. Es gibt Tags für Bilder, kursiven Text, Aufzählungen, etc. Nun unterscheidet CSS, auf welche Tags man Klassen anwenden kann.
Klasse: Die Standartauswahl, kann auf alles angewendet werden.
Tag: Bezieht sich nur auf bestimmte Tags, dann aber auf alle. Wir haben einen solchen Tag schon in Schritt 3 angewendet, in dem wir definiert haben, dass alle Hyperlinks unterstrichen sind.
Erweitert: Im Moment noch unwichtig - bezieht sich auf komplexere HTML - CSS2 Zusammenhänge.
Name
In unserem Fall natürlich "ueberschrift". Sicherheitshalber keine Sonderzeichen und immer klein schreiben.
Definieren in
Man kann CSS - Dateien anlegen, um in vielen Seiten ein und die selbe Formatierung anzuwenden. In unserem Fall macht es aber erst einmal mehr Sinn, dass CSS direkt in die Seite einzubetten.
Also jetzt als Name "ueberschrift" eingeben und mit OK bestätigen.
Das CSS - Eigenschaften - Fenster
Wundert euch nicht über den Punkt vor eurer Klasse - der ist notwendig. Des weiteren gillt: Wenn ihr in einer Klasse etwas nicht verändern wollt, dann lasst es so. Dreamweaver bietet euch in jedem Fenster die Auswahl "Standart" an - das ist totaler Mist
.
Ich habe jetzt Eigenschaften für eine hübsche, aber nicht übertriebene Überschrift gewählt. Spielt ruhig mal mit den anderen Eigenschaften und deren Effekten rum.
Wenn ihr eure Klasse fertig habt, bestätigt mit "OK". Ihr könnt sie jederzeit noch ändern.
Klasse anwenden
Im Hauptfenster gebt ihr nun eure Überschrift ein. Anschließend markieren.
Im unteren "Eigenschaften" - Fenster (4) wählt ihr nun bei "Stil" eure Klasse aus. Wenn ihr in diesem Fenster noch Schriftart oder Größe ändert, wird diese direkt geändert.
Textformatierung, Umbrüche
Unter eurer Überschrift könnt ihr jetzt ja diversen Text schreiben. Da verfügt ihr natürlich auch über die üblichen Methoden, um den Text kursiv, fett oder unterstrichen darzustellen. Fangen wir mit den Umbrüchen an.
Wenn ihr in einfach "Enter" drückt, so fügt Dreamweaver um euren getippten Text ein <p></p> ein. Dies ist eines der bereits erwähnten Tags. Davon ist jedoch generell abzuraten, da diese Art natürlich auch einen Umbruch vor dem vorausgegangen Text einfügt. Viel praktischer ist der auch geläufigere Tag <br />, welcher einen einfach "Break" einfügt. Diesen könnt ihr direkt eingeben, in dem ihr im WYSIWYG - Fenster "Shift + Enter" drückt.
Wenn ihr nun euren Text in der nächsten Zeile auswählt, könnt ihr in mittels "Apfel + B" fett machen. Dreamweaver benutzt dafür das HTML - Rag <strong></strong>. Kursiv erreicht ihr via "Apfel + I", was zu <em></em> führt. Für unterstrichen gibt es kein Tastenkürzel, man erreicht diesen Effekt jedoch mit dem HTML - Tag <u></u>.
Kombinationen aus allen Tags sind möglich!
KAPITEL 2: Fotos
Fotos sind in HTML eigentlich keine Kunst, ich zeige jedoch auch direkt, wie man sie ein bisschen schön in den Fließtext einfügt. Nehmen wir uns also mal ein schönes Foto vor. Es wöre jetzt ein guter Zeitpunkt, eure Seite zu speichern, damit die Pfadangaben nachher auch alle korrekt sind. Speichert eure Seite als "index.html". Erstellt nun einen Unterordner namens "bilder". Ich nehme als Beispielfoto dieses schöne Foto:
Wir werden dieses Foto nun einbinden und idealerweise auch ein bisschen nett gestalten. Macht erstmal noch zwei Breaks (<br /><<br />). Nun fügt ihr euer Bild über "Einfügen -> Bild" ein. Ein Alternativer Text ist nach Definiton notwendig und beschreibt euer Bild, etwa wenn es nicht geladen wird. Es ist gleichzeitig auch der Text, der als Tooltip erscheint. Für die Beschreibung der Höhe und Breite ist Dreamweaver zuständig. Theoretisch könnt ihr die ändern, ich rate jedoch dringend davon ab: Euer Bild nicht neu berechnet, ist deshalb pixelig und behält die gleiche Dateigröße.
Nun kommen noch die Extras. Dafür ist, wie eigentlich so vieles, CSS zuständig. Wir erstellen also eine neue CSS-Klasse "ipod". Wir wagen uns nun in den Reiter "Rahmen" vor und erstellen dort einen für alle Seiten gleichen, weißen Rahmen (Durchgezogen, 3 Pixel breit, Weiß). Das sind schon ganz nett aus.
Grüße, Riesenzwerg
1) Rahmenbedingungen
Webspace: Eine PN an mich sollte erst einmal genügen - für Apfeltalker.
Editor: Meine Wahl trifft der Dreamweaver, da er sehr flexibel ist, eigenen Code zulässt und im Notfall noch akzeptablen Code selbst erstellt.
Bitte das Tryout installieren. Mehr als 30 Tage sollte der Workshop nicht dauern
KAPITEL 1: Einführung, Überschrift & Text
2) Das Interface
Wir klicken jetzt auf Neu Erstellen -> HTML
Nun erkläre ich ersteinmal kurz das Interface:
1) WYSIWYG: Das (vermutliche) Ergebniss eurer Arbeit.
2) CSS - Stile: Ähnlich wie in Word & Pages sind CSS Klassen definierte Formatierungsklassen.
3) Codefenster: Der HTML Code
4) Eigenschaften des gewählten Objekts
Wir werden hauptsächlich mit diesen vier Fenstern arbeiten.
3) Die Seite - Die Grundeinstellungen
Drückt STRG+J. Dieses Shortcut öffnet die allgemeinen Seiteneinstellungen (Größtenteils per CSS definiert).
Schriftart: Die Schriftart, wenn keine andere definiert ist.
Größe - Hintergrundbild: Dito
Wiederholen: Wenn das Hintergrundbild zu klein ist, wird es wiederholt. Oder halt auch nicht.
Rand: Der Seitenrand. Wenn ihr zum Beispiel ein Bild an die obere linke Kante kleben wollt, dann müsstet ihr dort überall 0 eintragen. Das lassen wir jetzt erst einmal.
Hier mal ein paar Grundeinstellungen. Es empfiehlt sich, grundsätzlich Schwarze Schrift auf weißem Grund zu haben - auch wenn Apple es im Moment andersrum macht. Keiner ließt sich gerne lange Texte in weiß durch.
Jetzt hat unsere Seite schon ganz nette normale Schrift. Jetzt nehmen wir uns noch den Menüpunkt "Verknüpfungen" vor.
Ich werde mich erst einmal ein bisschen an Bordeaurot und Grautöne halten. (Änderung: Das Grau im Hintergrund ist ein bisschen Dunkel. Je nach Belieben gerne was helleres nehmen).
4) CSS Einführung
Nun beschäftigen wir uns mit dem schon erwähnten CSS - Fenster bzw. mit CSS Klassen. Damit wir bestimmte Formatierungen nicht immer wieder aufhändig per HTML angeben müssen, definieren wir sie in Klassen.
In dem Fenster "Alle Regeln" sollten schon allgemeine Regeln stehen, die wir in Schritt 3 eben definiert haben. Wie der CSS - Code aussieht, ist im oberen Codefenster ersichtlich.
Jetzt erstellen wir uns eine Klasse für die Überschrift. Dazu machen wir einen Rechtsklick in das CSS - Fenster (2) und wählen "Neu".
Nun zu den Eigenschaften:
Selektor - Typ
HTML benutzt verschiedene Tags. Es gibt Tags für Bilder, kursiven Text, Aufzählungen, etc. Nun unterscheidet CSS, auf welche Tags man Klassen anwenden kann.
Klasse: Die Standartauswahl, kann auf alles angewendet werden.
Tag: Bezieht sich nur auf bestimmte Tags, dann aber auf alle. Wir haben einen solchen Tag schon in Schritt 3 angewendet, in dem wir definiert haben, dass alle Hyperlinks unterstrichen sind.
Erweitert: Im Moment noch unwichtig - bezieht sich auf komplexere HTML - CSS2 Zusammenhänge.
Name
In unserem Fall natürlich "ueberschrift". Sicherheitshalber keine Sonderzeichen und immer klein schreiben.
Definieren in
Man kann CSS - Dateien anlegen, um in vielen Seiten ein und die selbe Formatierung anzuwenden. In unserem Fall macht es aber erst einmal mehr Sinn, dass CSS direkt in die Seite einzubetten.
Also jetzt als Name "ueberschrift" eingeben und mit OK bestätigen.
Das CSS - Eigenschaften - Fenster
Wundert euch nicht über den Punkt vor eurer Klasse - der ist notwendig. Des weiteren gillt: Wenn ihr in einer Klasse etwas nicht verändern wollt, dann lasst es so. Dreamweaver bietet euch in jedem Fenster die Auswahl "Standart" an - das ist totaler Mist
.Ich habe jetzt Eigenschaften für eine hübsche, aber nicht übertriebene Überschrift gewählt. Spielt ruhig mal mit den anderen Eigenschaften und deren Effekten rum.
Wenn ihr eure Klasse fertig habt, bestätigt mit "OK". Ihr könnt sie jederzeit noch ändern.
Klasse anwenden
Im Hauptfenster gebt ihr nun eure Überschrift ein. Anschließend markieren.
Im unteren "Eigenschaften" - Fenster (4) wählt ihr nun bei "Stil" eure Klasse aus. Wenn ihr in diesem Fenster noch Schriftart oder Größe ändert, wird diese direkt geändert.
Textformatierung, Umbrüche
Unter eurer Überschrift könnt ihr jetzt ja diversen Text schreiben. Da verfügt ihr natürlich auch über die üblichen Methoden, um den Text kursiv, fett oder unterstrichen darzustellen. Fangen wir mit den Umbrüchen an.
Wenn ihr in einfach "Enter" drückt, so fügt Dreamweaver um euren getippten Text ein <p></p> ein. Dies ist eines der bereits erwähnten Tags. Davon ist jedoch generell abzuraten, da diese Art natürlich auch einen Umbruch vor dem vorausgegangen Text einfügt. Viel praktischer ist der auch geläufigere Tag <br />, welcher einen einfach "Break" einfügt. Diesen könnt ihr direkt eingeben, in dem ihr im WYSIWYG - Fenster "Shift + Enter" drückt.
Wenn ihr nun euren Text in der nächsten Zeile auswählt, könnt ihr in mittels "Apfel + B" fett machen. Dreamweaver benutzt dafür das HTML - Rag <strong></strong>. Kursiv erreicht ihr via "Apfel + I", was zu <em></em> führt. Für unterstrichen gibt es kein Tastenkürzel, man erreicht diesen Effekt jedoch mit dem HTML - Tag <u></u>.
Kombinationen aus allen Tags sind möglich!
KAPITEL 2: Fotos
Fotos sind in HTML eigentlich keine Kunst, ich zeige jedoch auch direkt, wie man sie ein bisschen schön in den Fließtext einfügt. Nehmen wir uns also mal ein schönes Foto vor. Es wöre jetzt ein guter Zeitpunkt, eure Seite zu speichern, damit die Pfadangaben nachher auch alle korrekt sind. Speichert eure Seite als "index.html". Erstellt nun einen Unterordner namens "bilder". Ich nehme als Beispielfoto dieses schöne Foto:
Wir werden dieses Foto nun einbinden und idealerweise auch ein bisschen nett gestalten. Macht erstmal noch zwei Breaks (<br /><<br />). Nun fügt ihr euer Bild über "Einfügen -> Bild" ein. Ein Alternativer Text ist nach Definiton notwendig und beschreibt euer Bild, etwa wenn es nicht geladen wird. Es ist gleichzeitig auch der Text, der als Tooltip erscheint. Für die Beschreibung der Höhe und Breite ist Dreamweaver zuständig. Theoretisch könnt ihr die ändern, ich rate jedoch dringend davon ab: Euer Bild nicht neu berechnet, ist deshalb pixelig und behält die gleiche Dateigröße.
Nun kommen noch die Extras. Dafür ist, wie eigentlich so vieles, CSS zuständig. Wir erstellen also eine neue CSS-Klasse "ipod". Wir wagen uns nun in den Reiter "Rahmen" vor und erstellen dort einen für alle Seiten gleichen, weißen Rahmen (Durchgezogen, 3 Pixel breit, Weiß). Das sind schon ganz nett aus.
Grüße, Riesenzwerg
Zuletzt bearbeitet:
) und danach als ich das Logo sah festgestellt, dass wir das Ding hier auf der Arbeit als Vollversion haben. Haha.
