• Hier geht´s zur Melinda´s Blog

• Hier geht's zu Christian's Blog

• Hier geht's zu Matthias' Blog

• Hier geht's zu Sabrina's Blog

Herzlich Willkommen auf der Startseite der Gruppe ilmpixelz!

Im Rahmen des Faches "Elektronische Dokumente" haben wir uns mit dem Programm MS Word und der HTML- Formatierung, insbesondere mit CSS beschäftigt und Euch die wichtigsten Informationen auf dieser Seite bereitgestellt, um den Umgang mit den Programmen zu erleichtern.
Wir hoffen, wir können euch mit unseren Tipps und Tricks weiterhelfen!

Außerdem könnt ihr Euch in der comment-Box zu der Seite und Fragen äußern.

Name:            Matthias Jahn
Alter:              20
Herkunft:        Bönen / NRW
Abitur:            2006
Dienst:           Zivildienst
Studiengang:  AMW 07

• Loggt euch mit dem Passwort Gast unten ein
• Klickt oben rechts auf den Doppelpfeil nach unten
• Dann öffnen sich Unterkategorien und ihr könnt unter Feedback auf Feedback-Kiste klicken und eure Beiträge posten
  

Projektauftrag (Online-Praktikum - Tutorblog)

Teil1 :

"Seit vielen Jahren beklagen die Studierenden der AMW, dass sie meist auch in späteren Semestern noch Schwierigkeiten damit haben, aus mehreren Zuarbeiten eine sauber strukturierte Hausarbeit zu erstellen. Die optische Endredaktion nimmt dann oftmals soviel Zeit in Anspruch, dass die inhaltliche Überarbeitung der Hausarbeit zu kurz kommt, was sich negativ auf die Bewertung der Hausarbeit auswirkt.

Deshalb erhalten Sie im Projektteam den Auftrag, in Ihrem eigenen Protopage-Account eine “Wissenscollage” zur Strukturierung von Dokumenten in “MS Word” unter Benutzung von Dokumentvorlagen zu erstellen.

Mit der “Wissenscollage” sollen Sie

1. den vollständigen Prozess zur Erstellung eines als Gruppenarbeit entstehenden strukturierten und wohl formatierten Word-Dokuments vermitteln und in diesem Zusammenhang auf die Erstellung und Verwendung einer Dokumentenvorlage (.dot-Datei) eingehen.
2. (als Bereicherung der Wissenscollage) allgemeines Wissen für den Umgang mit Word-Dokumenten, insbesondere hinsichtlich typischer Fehler und deren Vermeidung darstellen.

Die Dokumentenvorlage soll als Muster für Hausarbeiten am IfMK entwickelt werden. Diese Dokumentenvorlage können (und sollten) Sie dann auch für Ihre künftigen Hausarbeiten verwenden."

Nach Abschluss des Online-Praktikums können Sie (anderen Personen) erklären, wie man MS-Word-Dokumente strukturiert und dazu Dokumentvorlagen benutzt. Darüber hinaus wissen Sie, wie die typischsten Fehler bei der Erstellung von MS-Word-Dokumenten vermieden werden können.

Protopageseite Design/Aufbau > Christian, Sabrina, Matthias, Melinda

Aufgabenstellung > Melinda

Dokumentvorlage in Word > Sabrina

Infos zu Dokumentvorlage > Christian, Sabrina

10 Regeln für Word > Christian, Melinda

Screenshots zu 10 Regeln > Christian, Matthias

10 Regeln anhand der Bsp.- Hausarbeiten > Matthias

Weitere Infos/Themen zu Word > Sabrina

Screenshots weitere Infos > Sabrina, Matthias

Inhaltsverzeichnis, Links zu Word > Christian, Matthias

Commentbox > Sabrina, Melinda

Verlinkung Dokumentvorlage & Webvisitenkarte > Melinda

Links zu HTML & CSS > Melinda

Infos zu HTML & CSS > Melinda, Sabrina

Screenshots Infos HTML & CSS > Melinda

10 Regeln für HTML > Matthias

Screenshots zu 10 Regeln > Melinda,  Matthias

Webvisitenkarte > Christian, Sabrina, Matthias

Erstllungsinfos Webvisitenkarte > Sabrina, Christian

Screenshots Webvisitenkarte > Sabrina, Christian

Projektauftrag (Online-Praktikum - Tutorblog)

Teil 2:

Trotz zahlreicher Online-Informationsangebote haben viele Menschen immer noch Schwierigkeiten damit, sauber strukturierte Webseiten zu erstellen. Es wird vermutet, dass dies an der Komplexität und Unübersichtlichkeit bestehender Informationsangebote zu diesem Thema liegt. Ihr Projektteam erhält deshalb den Auftrag, im eigenen Protopage-Account eine “Wissenscollage” zum Arbeiten mit “HTML/CSS” zu erstellen.

Mit der “Wissenscollage” sollen Sie

1. den vollständigen Prozess der Erstellung einer wohl strukturierten und mit CSS formatierten HTML-Seite am Beispiel einer Gruppenwebvisitenkarte vermitteln,
2. (als Bereicherung der Wissenscollage) allgemeines Wissen für den Umgang mit HTML und CSS , insbesondere hinsichtlich typischer Fehler und deren Vermeidung darstellen. Das Einbringen externer Informationen, z. B. über weiterführende Links ist dabei durchaus erwünscht. Achten Sie dabei bitte auf einen korrekten Quellennachweis.

Die Gruppenwebvisitenkarte sollte wenigstens eine (etwas längere) und höchstens fünf (kurze) HTML-Seiten und maximal eine CSS-datei umfassen. Sie sollte folgende - aus Sicht des Teams gestellten - Fragen aufgreifen:

• Wer sind wir?
• Wofür stehen wir?
• Was ist unsere Botschaft?
• Welche Stärken besitzen wir?
• Was ist unser Produkt?
• Worin besteht die Einzigartigkeit unseres Produkts?
• Welchen Beitrag leistet jedes Teammitglied für die Gruppe?

MS Word ist ein Textverarbeitungsprogramm der Firma Microsoft für die Windowsbetriebssysteme und Mac Os. Es ist Teil der Officesuite Microsoft Office sowie der auf privater Nutzer zugeschnitttenen Programmsammlung Microsoft Works Suite, wird aber auch einzelnd vertrieben.

1983: erste Version von Microsoft Word für MS-Dos

1984: Macintosh-Version erscheint

1995: Kein Vertrieb der DOS versionen mehr

Heute: Heutzutage ist MS Word das mit Abstand meistverwendete Textverarbeitungsprogramm der Welt.

Die Seitenübersicht soll dir helfen, dich auf unserer Word-seite zurecht zu finden, um Antworten zu bekommen und Probleme schnellstmöglich beseitigen zu können:

 

Inhaltsverzeichnis

 

1.  Allgemeine Tipps zum Umgang mit Word

        1.1 Info zu Absatzformatierung                  1.2 Info zu mehrspaltigen Texten

        1.3 Info zu Kopf und Fußzeilen                  1.4 Info zu manuelle Wechsel

        1.5 Info zu Nummerierung und Aufzählung

2.0 10 Dinge die man im Umgang mit Word vermeiden sollte

          2.1Nicht wild im Text rumformatieren       2.2 Info zu Dokumentvorlagen

          2.3 Info zu Dokumentvorlagen                   2.4 Info zu Dokumentvorlagen  

          2.5 Info zu Dokumentvorlagen                   2.6 Info zu Dokumentvorlagen 

          2.7 Info zu Dokumentvorlagen                   2.8 Info zu Dokumentvorlagen

         2.9 Info zu Dokumentvorlagen                    2.10 Info zu Dokumentvorlagen

3.0 Info zu Dokumentvorlagen                 

           3.1 Info zu Dokumentvorlagen            

           3.2 Info zu Dokumentvorlagen                  

           3.3 Info zu Dokumentvorlagen

• Strg + O                                Datei öffnen

• Strg + S                                Datei speichern

• Strg + N                                Neues Dokument erstellen

• Strg + Z                                Wiederrufen der letzten Aktion

• Strg + A                                Alles markieren

• Strg + 8                                Schrift verkleinern

• Strg + 9                                Schrift vergrößern

• Strg + X                                Text ausschneiden

• Strg + C                               Text kopieren

• Strg + V                                Text einfügen

• Strg + P                                Dokument drucken

• Umschalt+Pfeil rechts     Markiert Zeichen rechts neben dem Cursor

• Umschalt+Ende                Markiert bis zum Ende der Zeile

• F1                                         Word-Hilfe

• F7                                          Rechtschreibprüfung

• Umschalt+W                      Wörter und Zeichen zählen

• Umschalt+S                       Seitenzahlen einfügen

• Umschalt+U                       Einfügen von Datum und Uhrzeit

Infobereich

Info zu Kopf- und Fußzeilen

Diese Funktion dient dazu, Grundlegende Informationen (z.B. Datum, Seitenzahl usw.) nicht auf jeder Seite neu eintippen zu müssen. Die gewünschte Information muss somit nur einmal eingegeben werden und wird für alle Seiten übernommen.
Auch Kapitelüberschriften kann Word ohne großen Aufwand mithilfe der Kopfzeilenfunktion auf jeder Seite wiederholen.

Zum Einrichten und Bearbeiten von Kopf- und Fußeilen wird in eine spezielle Ansicht gewechselt. Wähle im Menü "Ansicht" den Befehl: "Kopf- und Fußzeile".
Es wird der Kopfzeilenbereich eingeblendet.
Der Cursor blinkt im Kopfeilenbereich. Kopf- und Fußzeilenbereich sind in dieser Ansicht durch einen gestrichelten Rahmen gekennzeichnet, die jeweilige Bezeichnung erscheint. Der Text des Dokuments erscheint in dem Moment grau.

Word blendet automatisch die Symbolleiste "Kopf- und Fußzeile" ein. 

Mit einem Klick auf die Schaltfläche "Nächste anzeigen" blättert man zum Kopfzeilenbereich der nächsten Seite. Außerdem ist es möglich, mit einer Schaltfläche "zwischen Kopf- und Fußzeile" zu wechseln.

Man kann den Text in diesen Bereichen genauso eintippen und verändern, wie man es vom normalen Text kennt.


Felder einfügen und positionieren

Man kann in Kopf- und Fußzeile Felder, z.B. ein Datumsfeld, einfügen. Die funktioniert mit der entsprechenden Schaltfläche in der Symbolleiste der Kopf- und Fußzeile.
Man kann dies aber auch über das Menü "Einfügen" in der Menüleiste einsetzen.


Seitenzahlen in der Fußzeile einfügen

Seitenzahlen kannst du auf zwei Arten einfügen: Über die Schaltfläche aus der Kopf- und Fußeilen - Symbiolleiste oder über die Option "Einfügen" > "Seitenzahlen" in der Menüleiste.
Im Eingabefeld "Position" kann man festlegen, dass die Seitenzahl in der Fußzeile erscheinen soll.
Manchmal ist es besser, die Seitenzahl auf der ersten Seite wegzulassen. Man entfernt dazu das Häkchen im Kästen "Seitenzahl auf der ersten Seite".
Im Feld "Ausrichtung" kann man festlegen, ob die Seitenzahl rechts, links oder mittig erscheinen soll.

Kopf- und Fußzeilen für die erste Seite

Oft ist es sinnvoll, die erste Seite anders zu gestalten als die folgenden.

Klicke auf "Datei">"Seite einrichten", wechsle zur Registerkarte "Seitenlayout" und aktiviere im Bereich "Kopf- und Fußzeile" die Option "Erste Seite anders". Ist die aktiviert, kann man unterschiedliche Kopf- und Fußzeilen für gerade und ungerade Seiten festlegen.

Manueller Wechsel

Hinter

Nummerierung und Aufzählungszeichen

Durch Aufzählungsszeichen und Nummerierung kann man leichter den Überblick behalten.

In der Standardeinstellung erkennt Word sofort nach einem Stichpunkt, dass man eine Liste eingeben möchte und ergänzt alle weiteren Aufzählungszeichen nach dem gleichen Schema.

Um mit der Aufzählung zu beginnen, tippe zunächst ein Zeichen, wie "*" und drücke dann die Leertaste, gib den gewünschten Text ein und betätige die Eingabetaste.

Wiederhole dies für alle weiteren Punkte.

Word nummeriert automatisch.

Nummerierte Listen ergänzt Word durch Ziffern oder Buchstaben. Um mit der Nummerierung zu beginnen, tippe eine Ziffer oder einen Buchstaben ein, setze dahinter einen Punkt und dann ein Leerzeichen. Ab der nächsten Zeile beginnt Word mit der automatischen Nummerierung.

Wenn man will, kann man die Standartaufzählungszeichen ersetzen. Markiere dazu die komplette Aufzählung und klicke auf "Format">"Nummerierung" und Aufzählungszeichen. Klicke im Register Aufzählung auf "Anpassen". Dort kann man die Einstellungen vornehmen.

Abstände anpassen

Wenn die Abstände zwischen Zeichen und Text zu groß sind, kann man diese ändern. Öffne "Aufzählung anpassen". Unter "Zeichenposition" kann man bestimmen, an welcher Stelle das Zeichen sein soll. Bestätige die Entscheidung mit "OK".

Im nachhinein Nummerierung und Aufzählungszeichen einfügen

Man hat einen Text bereits geschrieben und will im Nachhinein noch Aufzählung/Nummerierung einfügen:

Markiere den Text, der mit Aufzählungszeichen/Nummerierung versehen werden soll

Klicke auf "Nummerierung" oder "Aufzählung" in der Symbolleiste oder

Nutze die Menüfunktion über und "Format"> "Nummerierung und Aufzählungszeichen" und wähle hier das Register "Nummerierung" oder Aufzählung" und nimm dort die entsprechenden Einstellungen vor.

Nummerierung ändern

Markiere den nummerierten Text, wähle "Format"> "Nummerierungszeichen" und wähle dort eine Nummerierungsform aus!

Überschriften automatisch nummerieren

Man kann die erstellten Überschriften auch automatisch von Word nummerieren lassen.

Klicke dazu in eine der Überschriften

Öffne "Format"> "Nummerierung und Aufzählungszeichen"

Wähle Register "Gliederung", hier kann man die Numemrierungsvariante auswählen.

In MS Word gibt es einige Dinge zu beachten um das Arbeiten leichter zu machen, wir haben euch 10 nützliche Tipps und Tricks bereitgestellt, unsere 10 Gebote

• (Format > Formatvorlagen und Formatierung...)

• Anzeigen

Zur strukturierten Gliederung eines Dokumentes solltest Du Gliederungsebenen verwenden

Menü: Ansicht > Gliederung

Die Gliederungsansicht dient zur Kontrolle und Korrektur von Ebenen oder zum Konvertieren zwischen Textkörper und Ebenen.
Tipp: Benutze die systemseitigen Formatvorlagen "Überschrift 1 ... n" oder erstelle dir eigene *

Vorteil: Diesen Formatvorlagen sind systemseitig schon Gliederungsebenen zugewiesen.

*Eine detaillierte Information zu Formatvorlagen erhältst du im unteren Teil: "Wie erstellt man eine Dokumentvorlage?"

Word bietet Dir zur Erstellung von Listen und Gliederungen zahlreichte Möglichkeiten im Dialogfenster "Nummerierung und Aufzählungszeichen"

Menü: Format > Nummerierung und Aufzählung

Hier können einfache Aufzählungslisten, Nummerierungen und Gliederungslisten erstellt werden. Unter dem Register "Listenformatvorlagen" können eigene Formatvorlagen für Listen erstellt werden.

Im oberen allgemeinen Infoteil dieser (Word)-Seite findest du genauere Informationen zu diesem Thema!

So wirds richtig gemacht:

Diese Taste ist nur für das Ende eines Absatzes notwendig!

·   einfach weiterschreiben, Word erledigt den Zeilenumbruch automatisch

·   wenn Zeilenumbruch doch nötig, dann einfach "Shift" + "Enter" drücken

*weitere Informationen zur Absatzformatierung sind im oberen Teil zu finden

• (Einfügen > Manueller Umbruch...)

und drückt auf Entfernen Entf.

Trennstriche am Ende der Zeile, also zum Trennen von eigentlich zusammengehörigen Wortteilen, werden mit „Strg“ + „Bindestrichtaste“ erzeugt. Nur diese Trennstriche verschwinden zwischen zwei Silben, wenn sich der Zeilenfall ändert.

Dieser Trennstrich wird auch "Bedingter Trennstrich" genannt!

• (Ansicht > Kopf- und Fußzeile)

• (Ansicht > Symbolleisten > Zeichnen)

• (Einfügen > Feld ...)

Tipp: Die Feldfunktion "StyleRef" bietet viele Möglichkeiten Text zu referenzieren, der mit einer gewählten Formatvorlage formatiert ist.

*weitere Informationen zu Kopf- und Fußzeilen sind im oberen Infoteil zu finden

• Hierfür gibt es in der Taskleiste die Option Format, danach Absatz 

• Im Fenster direkt kann man nun einstellen, wie weit die Zeichen eingerückt werden sollen

• Das Einrücken ist auch mit Formatvorlagen möglich

Auf dem Screenshot links könnt ihr sehen wie ihr zu dem passenden Menü kommt, dort könnt ihr eure Absätze selbst einstellen, siehe Screenshot unten

*weitere Informationen zur Absatzformatierungen findest du oben im Infoteil

• (Einfügen > Referenz > Index und Verzeichnisse...)

• (Ändern... -Button).

• (Ansicht > Symbolleisten > Überarbeien).

• Einfügen > Kommentar

• Extras > Änderungen nachverfolgen).

So helfen Dir Dokumentvorlagen

Wenn du mit Word arbeitest, benutzt du eine Dokumentvorlage, ohne es zu wissen. Allein das leere Dokument ist nämlich eine globale Dokumentvorlage. Sie trägt den Namen "normal.dot", ist voreingestellt und wird automatisch angewendet, wenn man Word öffnet.

Eine Dokumentvorlage ist somit eine in einem bestimmten Format gespeicherte Datei, enthält optische Formatierungen, Felder und Platzhalter.

Man kann z.B. Namens-, Datumsfelder, Kopf- und Fußzeilen, Schriftarten usw. in der Dokumentvorlage für die Dokumente, welche aus dieser basieren sollen, definieren.

Während ein Dokument zum Beispiel den gesamten Text eines Briefes enthält, liefert eine Dokumentvorlage lediglich die Vorgaben, nach denen ein Dokument erstellt wird.
Das sind in erster Linie Formatvorlagen, z.B. Absatzformatierungen, Adressangaben, manchmal auch Makros.
Mit einer Fomatvorlage lassen sich Einstellungen der Textdarstellung wie Fett- und Kursivschrift, Schriftgröße, aber auch ganze Absatzformatierungen speichern.

Außerdem bietet Word noch sogenannte Standardvorlagen an - für Briefe, Faxe, Memos, Berichte und sogar Publikationen.

Man kann ein Dokument in Word mit dem Befehl Speichern unter im Menü Datei in eine Dokumentvorlage verwandeln. Es ist nicht möglich, eine Dokumentvorlage direkt in ein Dokument zu verwandeln. Mann kann jedoch ein neues Dokument auf der Basis einer Dokumentvorlage erstellen und anschließend dieses neue Dokument als Dokument speichern.

Um eine Doumentvorlage zu erstellen:

Öffnest du zunächst ein leeres Word-Dokument.

Möchtest du Seitenränder einstellen? Dann gehe über Datei > Seite einrichten > Seitenränder!

Mithilfe von Formatvorlagen kannst du für die Dokumentvorlage (und natürlich auch in einfachen Dokumenten) Formatierungen festlegen, die du immer wieder verwenden willst.

Z.B. für die Darstellung des Textes oder Formatierungen für Überschriften verschiedener Ordnungen usw. Da eine Dokumentvorlage Grundlagen für Textdokumente bieten soll, sind Formatvorlagen hier sehr nützlich!

Formatvorlagen

Anstatt in mehreren mühsamen Einzelschritten einen Text formatieren zu müssen, bietet Word die Möglichkeit, alle Änderungen mit nur einem Mausklick auszuführen. In der Formatvorlage werden Formatierungen wie Schriftgröße, Schriftart, Absatzformate oder auch Rahmen und Tabulatorformate zusammengefasst. Ein Klick genügt und Word weist dem Text die gewünschten Formate komplett zu.

Einige Formatvorlagen sind bereits in Word integriert, zum Beispiel die Überschriftentypen.

Man kann den Text, der eine Überschrift werden soll, markieren und dieser das gewünschte Überschriftenformat zuweisen, indem auf dieses klickt.

Die ausgewählte Formatvorlage wirkt sich immer auf den Textabschnitt aus, der gerade aktiv ist. Um einem Absatz eine Absatzformatvorlage zuzuweisen, genügt es, die Einfügemarke an eine beliebige Stelle innerhalb des gewünschten Absatzes zu setzen. Bei reinen Zeichen-Formatvorlagen muss man die Textstellen komplett markieren, wenn diese die gewünschte Formatierung erhalten soll.

Eigene Überschrift - Formatvorlagen erstellen

Word bietet zwar Formate für Überschriften an, doch nicht immer genügen diese den eigenen Vorstellungen. Man kann sich auch eigene Formate erstellen:

Markiere beispielsweise eine Überschrift, wähle "Format">"Formatvorlage" und klicke auf "Bearbeiten".

Wähle Format>"Zeichen" und lege dort die gewünschte Schriftformatierung fest. Bestätige deine Auswahl mit "Ok" und "Zuweisen". (Word 2002)

Wenn man nun noch Änderungen am Text vornimmt, kann man diese mit Druck auf die "Alt"-Taste und klick auf die gewünschte Vorlage vornehmen.

Eine Absatz- Vormatvorlage definieren

Markiere den Text

Wähle Menü "Format">"Formatvorlage" und klicke dann auf "Neu".

Überschreibe die Vorgabe im Namensfeld mit "Textkörper 1".

Klicke auf "Format">"Zeichen" und lege dort Schriftart, -größe usw. fest.

Klicke im selben Fenster auf "Format">"Absatz" und lege dort Abstände etc. fest.

Schließe das Fenster mit "OK" und "Zuweisen".

Gliederung erstellen

Bei langen Texten behält man einen besseren Überblick, wenn man den Inhalt mit Gliederungs-Überschriften versieht.

Markiere die erste Überschrift

Öffne die Formatvorlage in der Menleiste und wähle hier beispielsweise "Überschrift 1"

Klicke "Format">"Formatvorlage"> Überschrift 1> Bearbeiten>"Format">"Nummerierung"

Schalte hier auf das Register "Gliederung" um.

Wähle einen Glioederungstyp aus und schließe alle Fenster.

Die Überschrift wird nun mit dem entsprechenden Gliederungstyp versehen.

Felder/Feldfunktionen

Felder sind ein sehr nützlicher Bestandteil von Dokumentvorlagen.

Sie können den Benutzer z.B. Auffordern, Daten in Dialogfenster einzugeben, welche Später auf dem Dokument erscheinen sollen. Wie z.B. bei einer Hausarbeit der Name des Institus oder der Name des Professors.

Es gibt auch Felder, welche keine Eingabe erfordern, wie z.B. die Datumsangabe, welche sich immer aktualisiert und man somit das Datum nicht mehr selbst eingeben muss.

Es gibt eine Vielzahl von Felden. All diese kann man beispielsweise unter Menü: "Einfügen">"Felder" finden und bearbeiten.

In unserem Beispiel, eine Dokumentvorlage für eine Hausarbeit, haben wir "Fill-In"-Felder genutzt, um den Benutzer zur Eingabe verschiedenster für die Hausarbeit relevante Daten einzugeben.

Außdem wurde ein Feld für das Datum genutzt!

Inhaltsverzeichis

Wie schön bei den 10 Regeln für Word erklärt, gibt es die Möglichkeit, sich basierend auf den Überschriften und Seitenzahlen ein Inhaltsverzeichnis automatisch von Word erstellen zu lassen!

Dies haben wir auch bei der Erstellung der Dokumentvorlage so durchgeführt!

Hat man nach dem Erstellen des Inhaltsverzeichnisses noch Änderung am Dokument vorgenommen, so kann man das Inhaltsverzeichnis durch einen Rechtsklick auf dieses und den Befehl "aktualisieren" den neuen Umständen anpassen.

Hier sieht man die Version für Word 2007. In älteren Word- Versionen sollte man die Vorlage unter "Doumentvorlage" speichern, also als Dateiname.dot!

Wir hoffen, unsere Protopage-Site über Word konnte euch bei euren Problemen weiterhelfen! Wenn ihr Lob oder Tadel habt, gebt bitte ein Kommentar auf unserer Startseite in der comment-box ab! Danke!

Eure Ilmpixelz

Wikipedia:
Die Enzyklopädie Wikipedia, die jedoch nicht als alleinige wissenschaftliche Informationsquelle genutzt werden sollte            

http://de.wikipedia.org/wiki/Microsoft_Word        

Word Tutorial:
Hier erhalten sie ein kostenloses Online Tutorial zum Thema MS Word
http://www.megatronedv.de/wordkurs/index.php

Microsoft Office:
Auf der Homepage von Microsoft gibt es weitere Tipps und Tricks mit dem Umgang von MS Word
http://office.microsoft.com/de-de/word/FX100649261031.aspx

Computerhilfen:

Auch hier findet man brauchbare Tipss

http://www.computerhilfen.de/tipps-programme-ms-word.php3

Diese Seite hilft euch bei der Erstellung von Formatvorlagen:

http://www.kortstock.de/Word/formatv.htm

(Alle Links vom Stand 19.11.07 14.30 Uhr)

Im Folgenden möchten wir euch einen kurzen Überblick über die Auszeichnungssprache HTML geben und euch einige Anwendungsmöglichkeiten aufzeigen. HTML ist gar nicht so schwierig wie es aussieht; jeder kann es lernen ;)

• Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
• Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)
• Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
</head>
<body>

</body>
</html>

Attribute

Man kann Elementen Attribute zuweisen

Was ist ein Attribut?

Wie ihr euch sicher erinnert, verleihen die Elemente dem HTML eine Struktur und geben dem Browser vor, wie Sie Ihre Webseite angezeigt bekommen möchten. Z.B. weißt <br /> den Browser an, dass er einen Zeilenumbruch vornehmen soll. Einigen Elementen kann man aber noch weitere Informationen zuweisen. Eine solche Information nennt man Attribut.

Beispiel 1:

<h2 style="background-color:#ff0000;">Meine Freundschaft mit HTML</h2> 
Attribute werden immer in den Start-Tag des Elementes geschrieben und werden von einem Gleichheitszeichen gefolgt. Die Attributwerte werden in Anführungszeichen (") geschrieben. Das Semikolon nach dem Attribut im oberen Beispiel dient der Trennung verschiedener Styleangaben. Dazu kommen wir aber später.

Und wozu brauche ich das?

Es gibt viele verschiedene Attribute. Das erste was Sie lernen werden ist style. Mit dem style-Attribut können Sie Ihrer Seite Aussehen verleihen, Layout geben, z.B. eine Hintergrundfarbe:

Beispiel 2:

<html>

  <head>
  </head>

  <body style="background-color:#ff0000;">
  </body>

</html>
 

Das Codebeispiel zeigt  eine komplett rote Seite im Browser an, denn background-color bedeutet Hintergrundfarbe.

• Überschriften für sechs Gliederungsebenen: <h1>Überschrift Ebene 1 </h1>,...,<h6>Überschrift Ebene 6 </h6>
• Textabsätze: <p>...</p>
• Zeilenumbruch: <br />
• Listen:    - geordnete Listen: <ol><li>1. Punkt</li><li>2. Punkt</li>...</ol>

• Präformatierter Text:  <pre>dicktengleich darzustellender Text</pre>
• Zitate: <blockquote>zitierter Text</blockquote>
• Trennlinien: </ hr>
  

Entitäten

Sonderzeichen werden in (X)HTML als sogenannte HTML-Entitäten kodiert.

Cascaded Style Sheets sind Formatvorlagen,
mit denen man das Aussehen von HTML-Dokumenten definiert. Style Sheets geben an, wie ein ganz bestimmtes HTML-Tag dargestellt werden soll, also welche Eigenschaften dieses Tag besitzt. Dadurch hat man eine bessere Kontrolle über die Darstellungsattribute.

Mit  CSS kann man z.B. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen.

HTML kann zum layouten von Webseiten (miß-)braucht werden, was aber nicht empfehlenswert ist.

Aber CSS bietet mehr Möglichkeiten und ist zudem viel genauer und ausgereifter. CSS wird von allen Browsern unterstützt.

Wo ist der Unterschied zwischen CSS und HTML?

Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert.

Vor langer langer Zeit wurde HTML nur genutzt um Text zu strukturieren. Ein Autor konnte seinen Text markieren, indem er festlegte “das ist eine Überschrift” oder “das ist ein Textabsatz”. Dies wurde mit HTML-Tags wie <h1> und <p> bewerkstelligt.

Als das Internet populärer wurde, versuchten Designer nach Möglichkeiten zu suchen, den Online-Dokumenten Layouts zu verpassen. Um diesem Rechnung zu tragen, erfanden die Browserhersteller (zu der Zeit Netscape und Microsoft) neue HTML-Tags. So z.B. <font>, welcher von den ursprünglichen Tags abwich, da er ein Layoutmittel war und kein Strukturierungswerkzeug.

Dies führte auch zu einer Situation, in der eigentliche Struktur-Tags, wie z.B. <table>, mehr und mehr für das Layout von Seiten mißbraucht wurden, anstatt dem Geschriebenen Struktur zu verleihen. Viele neue Layout-Tags, wie <blink> wurden nur von einem Browsertyp unterstützt. Mitteilungen wie: “Sie benötigen Browser X, um diese Seite zu sehen” bzw. “Optimiert für Browser X” waren auf immer mehr Webseiten zu lesen.

CSS wurde erfunden um diese Situation zu beheben, indem es Webdesignern mit ausreichenden Gestaltungsmöglichkeiten ausstattete, die von allen Browsern unterstützt wurden. Gleichzeitig macht die Trennung von Aussehen und Inhalt einer Seite die Pflege selbiger viel einfacher.

 Schriftformatierung
 Schriftformatierung mit Schriftartendatei
 Ausrichtung und Absatzkontrolle
 Außenrand und Abstand
 Innenabstand
 Rahmen
 Hintergrundfarben und -bilder
 Listenformatierung
 Tabellenformatierung
 Pseudoelemente und Pseudoklassen
 Positionierung und Anzeige von Elementen
 Layouts für Printmedien
 Sound-Kontrolle für Sprachausgabe
 Anzeigefenster
 Filter (nur Microsoft)

• Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus;
• präzisere Kontrolle über das Layout;
• verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.);
• eine Vielzahl von fortgeschrittenen und anspruchsvolle Techniken.

Die grundlegende CSS-Syntax

Nehmen wir an, wir möchten ein schönes Rot als Hintergrundfarbe für unsere Webseite:

In HTML hätten wir es so gemacht:

<body bgcolor="#FF0000">
  

Mit CSS erreichen wir das gleiche Resultat so:

body {background-color: #FF0000;}
  

Wie Sie sehen, sind die Codes in HTML und CSS mehr oder weniger identisch.

Das soeben gezeigte Beispiel zeigt Ihnen auch das grundlegende CSS-Modell:

Das Box-Modell

Das Box-Modell in CSS beschreibt die Boxen (oder Kästen), die für HTML-Elemente generiert werden. Das Box-Modell enthält auch Optionen zum einstellen von Außenabständen (margin), Rändern (border), Innenabständen (padding) und Inhalten (content) für jedes Element. Die folgende Grafik zeigt, wie das Box-Modell konstruiert ist:

Außenabstand und Innenabstand

Außenabstand (margin) eines Elementes

Ein Element hat vier Seiten: rechts, links, oben und unten (right, left, top und bottom). Der Außenabstand margin ist ist die Entfernung jeder Seite zum Nachbarelement (oder den Rändern des Web-Dokuments). 

Der CSS-Code dafür würde wir folgt aussehen:

body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
}
 

body {
  margin: 100px 40px 10px 70px;
}

p {
  margin: 5px 50px 5px 50px;
}

h1 {
  background: yellow;
}

h2 {
  background: orange;
}
 

h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
}

h2 {
  background: orange;
  padding-left:120px;
}
 

Manchmal will man einen speziellen Stil nur einem oder mehreren bestimmten Elementen zuweisen. Man kann class und id nutzen, um Eigenschaften für ausgewählte Elemente festzulegen.

(eine spezielle Überschrift andersfarbig als alle anderen Überschriften einer Webseite gestalten, Links zu verschiedenen Kategorien gruppieren und jeder Gruppe ein eigenes Aussehen verleihen, etc.)

Zusätzlich zu der Gruppierung der Elemente ist es möglich, einzelne Elemente anzusprechen. Dazu braucht man das Attribut id.

Das besondere an dem Attribut id ist, dass es kein weiteres Element im selben Dokument geben kann, welches die selbe id trägt. Jede id muss einzigartig sein. In anderen Fällen nutzt man besser das Attribut class.

Beispiel:

Die Elemente zum Gruppieren - span und div

Die Elemente <span> und <div> werden zum Gruppieren und Strukturieren eines Dokumentes benutzt und sehr oft mit den Attributen class und id verwendet.

Diese beiden HTML-Elemente sind von zentraler Bedeutung für den Aufbau von Webseiten mit Hilfe von CSS ist.

Gruppieren mit <span>

Das Element <span> ist ein neutrales Element, welches dem Dokument eigentlich nichts hinzufügt. Aber zusammen mit CSS, kann <span> dazu benutzt werden, um visuelle Besonderheiten an bestimmten Textstellen im Dokument einzufügen.

Natürlich können Sie auch id nutzen, um den <span>-Elementen einen Stil zuzuordnen. Aber bitte denken Sie daran, dass jede der drei <span>-Elemente eine eigene id bekommt, so wie Sie es in der letzten Lektion gelernt haben.

Gruppieren mit <div>

Während <span>, wie im vorhergehenden Beispiel gesehen, innerhalb eines Block-Level-Element gebraucht wird, wird <div> benutzt, um eines oder mehrere Block-Level-Element zu gruppieren.

Neben diesem Unterschied funktioniert das gruppieren mit <div> aber mehr oder weniger in der gleichen Art und Weise. Schauen wir uns ein Beispiel mit den jeweils letzten drei Bundeskanzlern von SPD bzw. CDU/CSU, aufgeteilt nach den Parteien, denen diese entstammen:

1. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen I: gute HTML-Struktur

Achtet auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente.

Das Grundschema einer HTML-Seite haben wir euch oben unter allgemeinen Infos schon erklärt und gezeigt.
Entscheidet ist außerdem, dass Sie Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).

Wir werden euch jetzt Schritt für Schritt zeigen, wie wir unsere Webvisitenkarte erstellt haben und euch Hilfestellungen geben eure eigene Seite mit HTML und CSS zu erstellen

Ganz wichtig bei unserer Webvisitenkarte war uns die Trennung von Inhalt und Struktur. Es ist sinnvoll, Vorüberlegungen zu treffen, wie ein Webprojekt aussehen soll. Wir haben uns entschlossen, die Aufgabenstellung auf 3 HTML Seiten zu machen und haben eine Startseite, eine Seite über die Ilmpixelz und eine Seite über unser neues Projekt erstellt. Wir haben uns im Team über eine grobes Layout verständigt und sinnvollerweise mit der Arbeit in HTML angefangen. Für unsere Webvisitenkarte benutzen wir die Programme:

Auf dem Screenshot rechts könnt ihr unseren Headbereich sehen, wir haben mit

• <title>  </title> unser Projekt mit Ilmpixels benannt und

und mit

•  <link rel="stylesheet" href="style.css" type="text/css"> haben wir im Headbereich den Verweis zu der externen CSS Datei gegeben,

somit haben wir den Inhalt und das Layout getrennt

In den Bodybereich

• <body>    </body>

habe wir unseren  gesamten Quellecode hingeschrieben und in CSS beschrieben, welches Layout der Bodybereich einnehmen soll (sie Screenshot rechts)

font family = Schriftart

font-size = Schriftgröße,

color = Schriftfarbe,

background = Hintergrundfarbe,

margin = der Abstand zum Rand, von oben, laks, unten und rechts

Wir haben dann 2 Überschriften mit dem Befehl

• <h>   </h>

eingeführt. <h1> stellt die Hauptüberschriften da (siehe screenshot unten) und <h3> die Unterüberschrift (siehe screenshot unten)

Durch diese Eingabe musste wir nur einmal die Überschrift in CSS zuweisen und konnten sie immer wieder benutzen

Die Eingabe bei CSS könnt ihr auf dem unteren Screenshot sehen 

Wir haben unsere Bilder und unsere Texte mit dem Befehl

• <div> </div>

CSS zugewiesen.Mit div kann man ein Blockelement einleiten, in das man mehrere andere Block-Elemente einschließen kann. Alles, was zwischen dem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.

In unserem Beispiel haben wir mit die unterschiedlichen Tags mit dem Befehl

• <div id=" BEISPIEL">   </div>

benannt und in CSS mit #BEISPIEL dann formatiert.

Unsere internen Verlinkungen haben wir mit dem Befehl

• <a href>

gemacht. (siehe screenshot). Wie man ein Bild als Link benutzt könnt ihr auch auf dem Screenshot sehen

Falls Ihr euch noch weiter mit HTML und CSS beschäftigen wollt oder Fragen habt auf die Ihrauf unserer Seite keine Antwort findet, da HTML und CSS sehr komplexes Themen sind, bieten wir euch hier noch einige nützliche Links an:

HTML:

HTML.net - HTML lernen
http://de.html.net/tutorials/html/introduction.asp

Wikipedia
http://de.wikipedia.org/wiki/Hypertext_Markup_Language

SELFHTML - Ausführliches Tutorial und Dokumentation
http://de.selfhtml.org/

HTML-Seminar - HTML lernen step by step
http://www.html-seminar.de/

CSS:

Wikipedia
http://de.wikipedia.org/wiki/Cascading_Style_Sheets

CSS bei SELFHTML - Ausführliche Darstellung, Verwendung zusammen mit HTML
http://de.selfhtml.org/css/

CSS 4 you
http://www.css4you.de/Texteigenschaften/direction.html

Alle Links vom Stand 13.12.2007

Zurück nach oben

Von euch häufig gestellte Fragen:

zur Zeit noch keine vorhanden!