Lektion 2 - Vorbereitung: das Programmfenster

Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von Admin » Di 19. Aug 2014, 11:24

[col]Das Programmfenster und wie man es anpasst

Startest du KompoZer das erste Mal, werden dir die Tipps beim Start angezeigt. Es gibt insgesamt 18 dieser Tipps, die in zufälliger Reihenfolge angezeigt werden. Klicken den Schließen-Button, um das Fenster zu schließen. Um das Fenster nicht bei jedem Start erneut schließen zu müssen, deaktivierst du den Haken vor Tipps beim Start anzeigen.|Werfen wir nun einen Blick auf die Programmoberfläche:
#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Die Oberfläche ähnelt in gewisser Hinsicht der eines Textverarbeitungsprogrammes - aber halt nur in gewisser Hinsicht ...

Schauen wir uns die Bedienfelder im Einzelnen einmal an:
  1. Menüleiste

    Symbol
    In der Menüleiste findest du alle Befehle, die du mit KompoZer ausführen kannst.
  2. Symbolleiste
    Die Symbolleiste ist eine Shurtcut-Leiste mit den Befehlen, die du am häufigstens verwendest.
    In Lektion 1 hast du bereits die Symbolleiste angepasst und das Lorem Ipsum und die Rechtschreibprüfung hinzugefügt.
    Bild

    Bedeutung
    • [col]
    • Bild
      Öffnet eine neue html-Seite
    • Bild
      Öffnet eine vorhandene html-Seite
    • Bild
      Speichert die Seite, die im Bildfenster angezeigt wird.
    • Bild
      Die Funktion Publizieren ist noch nicht ausgereift. Geplant ist, dass man direkt aus dem KompoZer auf seinen Webaccount zugreifen kann. Leider funktioniert dieses Feature nur unzureichend und unzuverlässig. Um Frustration zu vermeiden, sollte es nicht verwendet werden!
    • Bild
      Vorschau im Webbrowser
    • Bild
      Letzte Bearbeitung rückgängig machen
    • Bild
      Rückgängig gemachter Bearbeitungsschritt wiederherstellen|
    • Bild
      Sprungmarke festlegen
    • Bild
      Einen Hyperlink setzen
    • Bild
      Eine Grafik einfügen
    • Bild
      Eine Tabelle mit Tabellenassistent einfügen
    • Bild
      Ein Formular mit dem Formularassistenten erstellen
    • Bild
      Öffnet den Texteditor deiner Wahl
    • Bild
      Öffnet CasCaDes, den Stylesheet-Editor[/col]
  3. Formatsymbolleiste 1
    Über die Formatsymbolleiste 1 weist du den Inhalten Elemente-Formate zu, wie z.B. Absatz oder eine Überschrift ...
    Über diese Elementdefinitionen wird die weitere Formatierung per Stylesheet vergeben.
    Bild
    [col]Absatzformate
    • Absatzformate sind Elemente wie Überschriften 1-10 (z.B. Überschrift 1 <h1></h1>)
    • Wechsel von Normaltext zu Absätze <p></p>
    • Allgemeine Blockelemente (<div></div>)
    • Drop-Down-Menü zeigt Klassen an, über die du selbst festgelegte Formate auf die Elemente anwendest.
    • ! = Hervorgehoben <em></em>, der Text wird automatisch kursiv dargestellt.
    • !! = stark Hervorgehoben <strong></strong>, der Text wird automatisch fett dargestellt.

    Listen
    • Nummerierte Listen: Setzen automatisch eine Zahl vor jeden Listenpunkt. <ol></ol>
    • Aufzählende Listen: setzen automatisch ein Symbol oder Zahl vor jeden Listenpunkt <ul></ul>
    • Einzug: Rückt ein Element ein bzw. hebt eine Einrückung auf.
    • Definitionslisten <dl></dl>
      bestehen aus einem Begriffselement <dt></dt>
      und einer Definition dazu <dd></dd>
    Ebenenformate
    Webseiten kann man auf unterschiedliche Weise erstellen. Mit Bereichen, die einen festen Platz auf der Seite haben oder Bereiche, die sich in einem Fluss bzw. Reihenfolge befinden. Für die Festlegung dieser Bereiche werden Div verwendet. Über die Ebenenformate kannst du einen Div direkt auf einen bestimmten Platz festpinnen. Diese Funktionen werden wir nicht verwenden, da auch die Ebenentechnik über CSS gelöst werden kann.

    Deshalb werden wir jetzt diese Formate aus der Leiste entfernen. So kommst du gar nicht auf die Idee, sie zu verwenden. Klicke mit rechter Maustaste in die Leiste - Leiste Anpassen. Die Symbolleiste lässt sich nun so bearbeiten wie die Symbolleiste zuvor. Nur diesmal ziehst du die Symbole per Drag&Drop aus der Leiste in das Fenster mit den Symbolen.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]
  4. Formatsymbolleiste 2
    Über die Formatsymbolleiste 2 vergibst du Formatierungen im html-Code, sogenannte Inlinestyles.

    Zu Zeiten, in denen noch keine Stylesheets verwendet werden konnten, weil die Browser sie nicht lesen konnten, wurde die Formatierung in den html-Code geschrieben. Das war zu Zeiten des IE5. Also sehr lange her und die Browser haben in der Zwischenzeit dazu gelernt. Du wirst diese Formatsymbolleiste nicht brauchen. Sie wird dich sogar bei deiner Arbeit behindern, weil du instinktiv auf einen der Buttons klicken wirst ... so ganz aus Versehen ... - Aus diesem Grund werden wir sie jetzt ausblenden:[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion2-18.png[/popup]
    [col]Öffne das Menü Ansicht - Anzeigen/Verstecken. Klicke auf Format-Symbolleiste 2.

    Und... wech is sie...|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]
  5. Lineale
    Die Lineale sind für die grobe Orientierung und zeigt Höhe und Breite des Elementes an, in dem du dich mit deinem Cursor befindest.
  6. Bearbeitungsfenster
    Das Bearbeitungsfenster ist der Ort des Geschehens, hier gestaltest du deine Webseite mit Elementen und Text. Über die darunter angebrachten Karteireiter kannst du deine Seite auf unterschiedliche Weise betrachten.
  7. Die Seitenverwaltung
    In der Seitenverwaltung verwaltest du deine Web-Seiten. Du kannst natürlich mehrere Webseiten darin hinterlegen. Wer eine Webseite erstellt, hat in der Regel noch eine Zweite oder dritte oder ... hier wird dir die Ordnerstruktur des Webs und alle Dateien, die sich darin befinden angezeigt.

    Ab Version 0.8 versteckt sich in der Seitenverwaltung auch der DOM-Explorer. Mit dem DOM-Explorer kannst du ganz schnell erfassen, welche Formatierungen in einem Element vorgenommen wurden.
  8. Die Statusleiste
    Die Statusleiste zeigt dir an, in welchem HTML-Tag du dich gerade befindest und welche Elemente das Element umschließen (Elternelement).
  9. verschiedene Ansichten
    Bild

    [col]In der Normalansicht, WYSIWYG (What you see is what you get).

    Die Normalansicht, in der du arbeitet und Texte verfasst. Alles wird genau so dargestellt, wie es am Ende auch im Browser aussehen sollte.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    [col]Die Teilen-Ansicht

    Über die Teilen-Ansicht wird das Bearbeitungsfenster geteilt. Im unteren Bereich wird das Element, in dem du gerade mit dem Cursor bist, im Quelltext angezeigt. Das ist super zum Prüfen, ob sich ein Inlinestyle eingeschlichen hat.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    [col]Die Quelltext-Ansicht
    Hier kannst du deine gesamte Seite im Quelltext betrachten. Du solltest in dieser Ansicht jedoch nichts verändern.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    [col]DropDown-Liste am rechten Rand
    In dieser Liste hast du weitere Anzeige-Möglichkeiten.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    [col]Normalansicht
    verändert nichts in der Ansicht.

    Vorschau
    Zeigt die Seite ohne Elementenabgrenzungen etc. an.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    [col]HTML-Tags
    Zeigt die HTML-Tags, also die Elementenbezeichnungen der einzelnen Elemente auf deiner Webseite an.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]

    Übung
    Passe deinen KompoZer wie in der Lektion beschrieben an:
    1. Entferne die Formatsymbolleiste 2.
    2. Entferne das Symbol für Publizieren aus der Symbolleiste.
    3. Entferne die Ebenenformate aus Formatsymbolleiste 1.
      • Schreibe einen Text z.B. "Hallo" in das Bearbeitungsfenster.
      • Markiere ihn und klicke auf die zwei !! in der Formatsymbolleiste 1.
      • Wie verändert sich der Text?
      • Schau dir den Text in den verschiedenen Fenster-Ansichten an.
      • Welche Tags umschließen den Text?
    4. Schreibe einen weiteren Text in das Bearbeitungsfenster. Z.B. "Meine Webseite".
    5. Klicke mit der Maus in den Text und öffne die erste Drop-down-Liste in der Formatsymbolleiste 1.
    6. Wähle Überschrift 1.
    7. Wie verändert sich der Text?
Mache einen Screenshot von deinem KompoZer. Lade das Bild auf deinen Server und verlinke es hier im Form.


Viel Spaß bei der Lektion!

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von eibauoma » Mo 1. Sep 2014, 17:35

Lade das Bild auf deinen Server und verlinke es hier ins Form.
Wie ist das gemeint?
Ich kann es z.B. in meine Galerie im Gimp-Werkstatt-Forum laden.
Beim alten Kompozerkurs hatten wir doch einen zugewiesenen Platz zur Verfügung, wenn ich mich nicht irre.

#
Klicke auf das Bild für die Darstellung in Originalgröße
Zuletzt geändert von eibauoma am Mo 1. Sep 2014, 21:24, insgesamt 1-mal geändert.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von anke » Mo 1. Sep 2014, 20:21

Hallo eibauoma

du kannst dir bei einem kostenlosen Hoster etwas Webspace für diesen Kurs anmieten. Auf http://www.bplaced.net/ ist der z. B. kostenlos und Werbefrei. Für eine Übungshomepage reicht das wohl aus.

Viele Grüße

anke ;)

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von eibauoma » Mo 1. Sep 2014, 21:23

Hallo Anke,

Habe nur nachgefragt, weil ich bisher keinen Hinweis gefunden hatte, in welcher Weise die Übungsdateien gezeigt werden sollen.
Diese Lösung ist vollkommen OK, ich nutze bei bplace.net schon seit einiger Zeit etwas Webspace für eine kleine Übungsgalerie a'la Dimi.
In dieser Galerie habe ich jetzt ein zusätzliches Album für den Kompozerkurs angelegt.

Bis bald

eibauoma
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von anke » Di 2. Sep 2014, 05:43

Das ist ja auper :) Dann kannst du ja gleich loslegen :D

Gruß Anke

flo2000
Beiträge: 1
Registriert: Mi 3. Sep 2014, 15:19

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von flo2000 » Mi 3. Sep 2014, 19:41

Hallo,
ich bin mir nicht sicher, ob das so richtig ist.
Bild

camouflage1984
Beiträge: 250
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von camouflage1984 » Mi 3. Sep 2014, 20:01

Hallo flo2000

Alles gut.
Weiter gehts...
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

rudirednose
Beiträge: 23
Registriert: So 10. Mai 2015, 10:01

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von rudirednose » So 31. Mai 2015, 20:49

Mein Versuch

Bild

Die Rechtschreibung habe ich auch gefunden! ;-)

Herzliche Grüße

rudi

camouflage1984
Beiträge: 250
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von camouflage1984 » So 31. Mai 2015, 20:53

Hallo rudirednose

Das sieht gut aus, weiter gehts zur nächsten Lektion!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 2 - Vorbereitung: das Programmfenster

Beitrag von Hellriders » Do 20. Aug 2015, 12:16

Hallo Leute,

ich habe mich vor einigen Jahren schonmal mit Kompozer befasst, seitdem hat sich hier einiges verändert. ich kenne noch das Forum indem man von einer Lektion zur nächsten freigeschalten wurde.
Ich habe bereits eine Homepage bei Strato, ist ein Baukastensystem welches mir nicht so richtig gefällt und es musste schnell gehen egal.
Da man mit Kompozer mehr Möglichkeiten hat wollte ich diese in nöchster Zeit etwas anders gestalten.
Webspace habe ich ausreichend allerdings benötige ich doch auch noch einen Domainnamen für die Übungszwecke oder geht das auch anderweitig?

Danke schonmal im Vorraus
gruß micha
Dateianhänge
übung1.png
übung1.png (41.43 KiB) 702 mal betrachtet

Antworten