List of public pages created with Protopage

Über uns

Rich sticky notes











Word-Bibel

Rich sticky notes


HOW-TO MS WORD


Anleitung für unwissende Studenten zum korrekten Umgang mit Word.

Hinweis:    Die Screenshots öffnen sich beim Draufklicken in einem neuen Fenster.



Weitere nützliche Links, falls euch unsere Anleitung nicht reicht:

> Übersicht aller Befehle bei Microsoft.com
> MS Word FAQ
> Office Forum

DIE 10 WORD-TODSÜNDEN


 1.  Du sollst Zeichen nicht mit einem Druck auf „Tab“ oder die „Leertaste“ einrücken.
Word kennt dafür die Option „Einzug“ zum Befehl „Absatz“ (FORMAT ► ABSATZ…).
 
Free Image Hosting at www.ImageShack.us
 

 2.  Du sollst einzelne Zeilen nicht durch einen Druck auf „Enter | Return“ beenden (Abschnittswechsel am Ende jeder Zeile).
Diese Taste ist nur für das Ende eines Absatzes notwendig – den Zeilenumbruch erledigt Word automatisch. Manuelle Zeilenumbrüche innerhalb eines Absatzes können mit „Shift + Enter“ realisiert werden.

Free Image Hosting at www.ImageShack.us


 3.  Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf  „Enter | Return“ erzeugen.
Word stellt verschiedene Arten von „Manuellen Umbrüchen“ zur Verfügung (Einfügen ► Manueller Umbruch…). Ein Manueller Seitenumbruch kann z.B. auch mit „Strg + Enter“ erzeugt werden.

Free Image Hosting at www.ImageShack.us


 4.  Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen.
Trennstriche werden mit „Strg“ + „Bindestrichtaste“ erzeugt. Nur diese Trennstriche verschwinden zwischen zwei Silben, wenn sich der Zeilenfall ändert.

Free Image Hosting at www.ImageShack.us


 5.  Du sollst nicht wild im Text herumformatieren (Direkte Formatierung).
Die Textformatierung sollte überwiegend mit Formatvorlagen erfolgen. Dazu ist es nicht unbedingt notwendig benutzerdefinierte Formatvorlagen zu erstellen. Die Einstellungen der systemseitigen Formatvorlagen (z.B. „Standard“ oder „Überschrift 1“) können nach Belieben angepasst werden (FORMAT ► FORMATVORLAGEN UND FORMATIERUNG…).
Der gleichnamige Aufgabenbereich wird sichtbar. Bei Bedarf können „Alle Formatvorlagen“ unter ANZEIGEN eingeblendet werden. Eigenschaften einzelner Formatvorlagen können über das KONTEXTMENÜ „ÄNDERN…“ angepasst werden.

Free Image Hosting at www.ImageShack.us


 6.  Du sollst Listen nicht manuell mit z.B. "Sonderzeichen" oder der Bindestrichtaste erstellen
Word bietet Ihnen zur Erstellung von Listen und Gliederungen zahlreiche Möglichkeiten im Dialogfeld „Nummerierung und Aufzählungszeichen“ (FORMAT ► NUMMERIERUNG UND AUFZÄHLUNGSZEICHEN…).
Hier können einfache Aufzählungslisten, Nummerierungen und Gliederungslisten erstellt werden. Unter dem Reiter „Listenformatvorlagen“ können und sollten eigene Formatvorlagen für Listen erstellt werden.

Free Image Hosting at www.ImageShack.us            Free Image Hosting at www.ImageShack.us



  7.  Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern.
Zur strukturierten Gliederung eines Dokumentes sollten Sie Gliederungsebenen verwenden (ANSICHT ► GLIEDERUNG). Die Gliederungsansicht dient zur Kontrolle und Korrektur von Ebenen oder zum Konvertieren zwischen Textkörper und Ebenen.
Tipp: Benutzen Sie die systemseitigen Formatvorlagen „Überschrift 1 … n“ (falls Ihnen die Formatierungen nicht gefallen, wissen Sie schon, dass sie auch diese systemseitigen Formatvorlagen nach belieben anpassen können). Vorteil: Diesen Formatvorlagen sind systemseitig schon Gliederungsebenen zugewiesen.

Free Image Hosting at www.ImageShack.us            Free Image Hosting at www.ImageShack.us


8.  Du sollst Kopf- und Fußzeilen nicht manuell durch „Copy & Paste“ auf jeder Seite neu erstellen.
Verwenden Sie die Ansicht „Kopf- und Fußzeile“ (ANSICHT ► KOPF- UND FUßZEILE) um Elemente zu Positionieren, die auf jeder Seite eines Abschnittes angezeigt werden sollen. Sie können hier nicht nur Text und Seitennummerierungen sondern auch Grafiken, Bilder und anderen Elemente der Zeichnen-Symbolleiste  (ANSICHT ► SYMBOLLEISTEN ►ZEICHNEN) einfügen.

Free Image Hosting at www.ImageShack.us

Tipp
: In dieser Ansicht können recht einfach „Wasserzeichen“ auf jede Seite eines Abschnitts eingefügt werden.

Des Weiteren lassen sich auch Feldfunktionen in Kopf- und Fußzeilen einfügen (EINFÜGEN ► FELD…). Tipp: Die Feldfunktion „StyleRef“ bietet viele Möglichkeiten Text zu referenzieren, der mit einer gewählten Formatvorlage formatiert ist.


 9.  Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument ausgliedern.
Word bietet Ihnen die Möglichkeit verschiedene Referenzen zu erstellen, u.a. auch Inhaltsverzeichnisse (Einfügen ► Referenz ►Index und Verzeichnisse…).  Die systemseitigen Formatvorlagen können Sie wie gehabt nach Belieben anpassen (Ändern…-Button).
Durch einen Manuellen Abschnittswechsel vor und nach der Seite, auf der Sie das Inhaltsverzeichnis platzieren möchten, lässt sich auch das Layout der Kopf- und Fußzeilen, unabhängig von der Gestaltung der anderen Abschnitte im Dokument, anpassen.

Free Image Hosting at www.ImageShack.us


10.  Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch Farbänderungen oder andere direkte Formatierungen kennzeichnen.
Für Teamarbeiten lassen sich Kommentare und Änderungen sehr einfach im „Überarbeitungsmodus“ generieren (ANSICHT ► SYMBOLLEISTEN ► ÜBERARBEITEN). Neben den Möglichkeiten des Einfügens von Kommentaren an markierte Textstellen  (auch über: EINFÜGEN ►KOMMENTAR), können auch Änderungen bzw. Überarbeitungen an Textpassagen mitverfolgt werden.
Dies geschieht durch das Aktivieren „Änderungen nachverfolgen“ (auch über: EXTRAS ► ÄNDERUNGEN NACHVERFOLGEN).
Zur Anzeigensteuerung im Überarbeitungsmodus stehen Ihnen verschiedene Darstellungen zur Verfügung: drop down button „Anzeigen“ ermöglicht Filterungen nach Bearbeitern, Versionsständen mit und ohne Änderungen / Kommentaren.
Tipp: Damit Änderungen für ein kollaboriertes Arbeiten im Team markiert werden, ist es wichtig darauf zu achten, dass „Änderungen Nachverfolgen“ aktiviert ist.
Zu den jeweiligen Markups im Text gibt es verschiedene Bearbeitungsmöglichkeiten im Kontextmenü oder der Symbolleiste.

Free Image Hosting at www.ImageShack.us

Dokumentvorlage

Hilfreiche Tipps zur Layout-Erstellung einer Hausarbeit

Seitenzahl

Die Seitenzahl ist in der Regel nicht entscheidend für die Qualität einer Arbeit. Seitenmindest- und Seitenhöchstzahlen sollen erstens die Vergleichbarkeit der Arbeiten sicherstellen, zweitens Ihnen verdeutlichen, was von Ihnen erwartet wird und drittens den Korrekturaufwand überschaubar halten.
Bei Mindest- oder Höchstangaben nicht mitgezählt werden: Deckblatt, Inhaltsverzeichnis, Literaturverzeichnis, Anhang (z.B. Fragebogen, Tabellen)

Free Image Hosting at www.ImageShack.us


Ränder

Free Image Hosting at www.ImageShack.us

(Abweichungen hiervon nur, wenn die Einbindung von Tabellen oder Grafiken erforderlich ist)


Zeilenabstand, Schriftart und Schriftgröße


Zeilenabstand:   1,5

Free Image Hosting at www.ImageShack.us

Schriftart:            Times New Roman, Bookman Old Style, Garamond
Schriftgröße:       12

Free Image Hosting at www.ImageShack.us

Hier der Link zu unserer erstellten Dokumentvorlage, die ihr  für eure Hausarbeiten verwenden dürft.


> Dokumentvorlage

Quellen


10 Todsünden:

http://tutorblog.elearning2null.de/wp-content/uploads/2007/11/eldok_einfuhrung_ple_und_protopage_2007-11-05.pdf


Dokumentvorlage:

http://tutorblog.elearning2null.de/wp-content/uploads/2007/04/eldok_b2-word_ifmk-leitfaden_auszug.pdf

HTML/CSS

Rich sticky notes

Image Hosted by ImageShack.us

Nützliche Links


Onlinereferenzen zu HTML

SELFHTML
Dr. Web
Webkurs
HTML-World


Onlinereferenzen zu CSS

SELFHTML: CSS
CSS Zen Garden
CSS 4 You
CSS Hilfe
CSS Generator

Was ist HTML?

HyperText Markup Language

(dt. Hypertext-Auszeichnungssprache)
oft auch kurz als Hypertext
bezeichnet, ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten (wie z.B. Texten, Bildern und Hyperlinks in Dokumenten). HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Website enthält HTML auch zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen.

Was ist CSS?

Cascading Style Sheets


ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente.(Gilt als Standard für Websites.)  Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit CSS ist es möglich, für verschiedene Ausgabemedien eine unterschiedliche Darstellung anzugeben.

Die 10 Gebote in der HTML-Programmierung


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


Achten Sie auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente. Entscheidend ist außerdem, dass Sie Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).



2. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen
    II:  „HTML-Tags“


a. Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.


b. Aus Kompatibilitätsgründen zu XHTML wird empfohlen auch Elemente ohne Inhalt wie z.B. <br>, <img> immer zu schließen: <br />, <img />


c. Aus Kompatibilitätsgründen zu XHTML wird empfohlen Element- und Attributnamen IMMER klein zu schreiben
(z.B. <a href=http://www.ifmk.de >Das  ist ein Link</a>)


d. Setzen Sie Attributwerte immer in Anführungsstriche
(z.B. src=“blume.jpg“ oder alt=“Das Photo zeigt eine Sonnenblume“)


e. Verwenden Sie immer Entitäten (z.B. für „ä“ > „&auml;“)



3. Du sollst darauf achten „well-formed HTML“ Seiten zu erstellen
    III: korrekte  Hyperlinks


a. Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig.



b. Hierbei werden absolute von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten müssen als absoluter Pfad gesetzt werden. Eingebundene Bilder hingegen können auch relativ verlinkt werden, um die Darstellung der HTML-Seite auf jedem System auch offline zu gewährleisten. Dasselbe gilt für interne Unterseiten eines HTML-Projektes.



c. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.


4. Du sollst die strikte Trennung von Inhalt und Layout beachten.

HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht. Ausschließlich CSS dient zur Gestaltung der Seite. Beachten Sie dies schon mit Beginn der Erstellung, eine nachträgliche Anpassung ist oft unnötig und zeitaufwendig.




5. Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.

Viele Formatierungselemente und Attribute in HTML verstoßen gegen die strikte Trennung von Inhalt und Layout. Demnach sollten sie nicht mehr verwendet werden und erhalten den Status „deprecated“ (z.B. „font-Tag“). Verwenden sie deshalb ausschließlich Logische Auszeichnungen (z.B. „em-Tag“ oder „strong-Tag“) anstatt Physikalischen Auszeichnung bzw. Visuellen Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).




6. Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten.

Die Verwendung von Layouttabellen verstößt gegen die strikte Trennung von Inhalt und Layout. Inzwischen ist es ohne Probleme möglich tabellenfreie Layouts mit CSS zu erstellen.




7. Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten.

Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.

 



8. Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels „alt-Attribut“ hinzufügen.


Verwenden Sie stets das „alt-Attribut“ um Grafiken, Bilder, Formularelemente, applets etc. zu beschreiben, um jedem Nutzer die Chance zu geben, die Inhalte zu erfassen.




9. Du sollst Nutzergruppen nicht durch Aussagen wie: „optimiert für Internet Explorer 4.1, SeaMonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrollleisten ausschließen.

a. Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren. Die ggf. ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSS Referenzkarten enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern unterstützt werden).

Link: Referenzkarte CSS

 

b. Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von h. S. kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.

 


10. Du sollst Metainformationen sinnvoll einsetzen.

Erweitern Sie Ihre HTML-Seite mit sinnvollen Zusatzinformationen und vermeiden Sie überflüssige Informationen bzw. Wiederholungen. Unterlassen Sie den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking, Spam).

Die ersten Schritte


Das Grundgerüst einer Website

 

1. HTML-Code:

Mit dem <html>-Tag beginnt und endet der Quellcode. Er beinhaltet keine weiteren Attribute, ist aber unerlässlich beim Programmieren einer Seite. Er umschließt alle anderen Tags.




Der <head>-Tag ist der "Kopf" der Seite. Hier hinein gehören z. Bsp. Metadaten, der Titel der Seite und die Verlinkung zu einer externen CSS-Datei. Diese Informationen sind im Browser nicht sichtbar und dienen meist nur zur Verlinkung in Suchmaschinen.




Der <body>-Tag umschließt letztlich alles, was man als User im Browser von der Seite sieht, sprich alles Inhaltliche. Im <body>-Tag kann man Angaben wie Hintergrundfarbe, Linkfarbe, Schriftart usw machen, also alles was zum Layout gehört (in der Grafik rot gekennzeichnet). Dies allerdings ist nicht zu empfehlen. Effektiver ist die Auslagerung aller gestalterischen Attribute in ein Stylesheet bzw. eine CSS-Datei (siehe <head>-Tag).


 


2. CSS-Code

 

 

Im CSS-Code werden alle Elemente, die das Layout einer Seite ausmachen, definiert. Man kann diesen Code so wie in der Grafik direkt in den HTML-Code einfügen (mittels <style>-Tag) oder in einer externen *.css-Datei auslagern. In CSS wird im Gegensatz zu HTML mit geschweiften Klammern gearbeitet. Eine Erklärung zu den gängisten Elementen und Defintionen findet man z. Bsp. hier.


Befehle, Attribute, Werte



Befehle (tags): WAS wird dargestellt
Der HTML-Code besteht aus einer Aneinanderreihung von Befehlen. Um dem Browser mitzuteilen, daß es sich um einen HTML-Befehl handelt, muß dieser in eckige Klammern < > gesetzt werden. Ein typischer HTML-Befehl besteht aus einem Startwort, z. B. <FONT> für Textstart, dem darzustellenden Inhalt, z. B. "Dies ist ein Text" und der Endemarke, z.B. </FONT>.
Insgesamt also: <FONT>Dies ist ein Text.</FONT>

Eigenschaften (attributes): WIE wird es dargestellt
Für viele der HTML-Befehle gibt es zusätzliche Eigenschaften, wie zum Beispiel Breite (=width), Höhe (=height), Farbe (=color), Schriftart (=face), Schriftgröße (=size) etc. Diese Eigenschaften werden innerhalb der eckigen Klammern zu dem Befehlswort dazu geschrieben.
Zwei typische Beispiele:
<IMG width height> IMG=image, also Bild
<FONT color face size> FONT, also Schrift
Die Eigenschaften müssen in der Regel durch Werte spezifiziert werden:

Werte (values):
Die Ausprägung der Eigenschaften wird durch Werte ausgedrückt, die aus Zahlen oder aus Wörtern bestehen können. Diese werden an die Eigenschaft mit einem Gleichheitszeichen angehängt und stehen in Anführungsstrichen. Also müssen die Beispiele von oben heißen:
<IMG width="200" height="150">
Das Bild ist dann 200 Pixel breit und 150 Pixel hoch.

Ressourcen


Websichere Farben:

In HTML werden Farben normalerweise im Hexadezimal-Code angegeben (alternativ einfach mit Farbnamen, also beispielsweise "color="black").
Die vorliegenden Grafiken geben einen Überblick über die wichtigsten Farben und ihre zugehörigen Codes. 





Links zum Thema Ressourcen:

Colourlovers
Color Hunter

Lorem-Ipsum Textgenerator

Entitäten



Alles was man braucht. Kostenlos natürlich :)

HTML-Editor zum Download: Phase 5

Bilderupload:  Myimg.de

FTP-Upload-Programm:         Total Commander

QUELLEN


http://tutorblog.elearning2null.de/wp-content/uploads/2007/04/eldok_b3-htmlcss_10_gebote.pdf
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
http://de.wikipedia.org/wiki/Html

http://www.web-kurs.de/html/kapitel/kap2.htm

Edublogs

Rich sticky notes

Unsere Edublogs


Lisa's Blog

Anna's Blog

Phil's Blog

Thilo's Blog