Website-Gestaltung: Grundlagen und Tipps€¦ · Hyperlinks formatieren a { ….} Formatierung des Hyperlinks festlegen a:link {…} Formate für nicht besuchte Links a:visited {…}

Website-Gestaltung: Grundlagen und Tipps

1

Webseitengestaltung HTML: Webseiten bestehen aus rechteckigen Kästchen die im

Browser gestapelt werden, sozusagen das Gebäude.

CSS … ist die Dekoration und Gestaltung der Website.

JavaScript … ist die Infrastruktur des Gebäudes (Aufzüge,

Beleuchtung, alle aktiven Elemente).

Auch wenn CSS oder Javascript deaktiviert ist sollte die Website

funktionieren.

(X)HTML

HTML-Grundgerüst siehe Self-HTML (wichtig

DOCTYPE)

ID für body je Seite

eindeutig!

Aufbau eines HTML-Tags <TAG Attribut=“Attributwert …>Zu beeinflussender Text</TAG>

z.B.: <B>Fetter Text</B>

Head-Tags Title

Steht in der Ergebnisliste von Suchmaschinen, im

Browserheader und im Tab-Header

Metadaten

<meta http-equiv=“content-type“ content=“text/html;

charset=ISO-8859-1“ />

… zeigt verwendeten Zeichensatz an

Stylesheet einbinden (aus externer Datei)

<link href=“Adresse des Stylesheets“ rel=“Stylesheet“

type=“text/css“ media=“screen“>

Body-Tags

Kommentar



Div (Block Element)

= Division(Bereich) – jeder div sollte eine eindeutige id besitzen – Platzhalter für die „Kästchen“ auf

der Seite. Ein div repräsentiert einen Block-Box.

z.B. <div id=“Header“> ……….. </div>


2

Span (Inline-Element)

= Spanne – markiert einen Inline-Bereich (box). Auch hier empfielt sich eine id.

Header (Block Elemente)

H1,h2,h3,h4,h5,h6 für Überschriften

Absätze (Block Element)

<p> … </p> markiert einen Absatz (Paragraph).

Hervorhebungen (Inline-Elemente)

<em>leichte Hervorhebung </em> (idR. kursiv) <strong>starke Hervorhebung</strong> (idR. fett)

Zitate (Block Element)

<blockquote> für Zitate

Definitionslisten

<dl>

<dt>Definitionsterm</dt>

<dd> Definitionsdescription</dd>

….

</dl>

Listen (

<ul> ... Unordered List (Punkte) <ol> … Ordered List (Nummern) <li> … Listenelemente

z.B.:

<ul>

<li> Erstes Element </li>

…

</UL>

Hyperlinks (Inline-Element)

<a href=“Adresse des Links“ title=“Bubblehelptext für Hyperlink“>Linktext</a>

Bilder (Inline-Element)

<img src=“Adresse des Bildes“ alt=“Alternativtext“ width=“Breite“ height=“Höhe“ id=“Ident.“ />

Tabellen Grundstruktur:

Attribute und weitere Tabellentags wie

<thead>, <tfoot> und <tbody> siehe

einschlägeige Referenzen (z.B.

http://de.selfhtml.org)

Navigation erstellen Navigation als <ul> erstellen wobei die Listenelemente eine id erhalten sollten. Z.B. <li id=“nav1“>

http://de.selfhtml.org/


3

CSS (Cascading Style-Sheets - Sammlung von Formatvorlagen)

Einbindung von Stylesheets in HTML Dateien

Wo können CSS-Regeln definiert werden? Im HTML-Element:

Bsp: <p style=“color: red;“> text </p> Im Head des HTML-Dokuments:

Bsp: <style type=“text/css“> css-regeln </style> In externer CSS-Datei mit Pfadangabe im Head der HTML-Datei:

Pfadangabe: <link href=“datei.css“ rel=“stylesheet“ type=“text/css“ />

Regel: je näher die CSS-Regel am HTML-Element definiert ist, desto wichtiger.

Aufbau selektor {

attribut: wert;

attribut: wert;

}

Der zu beeinflussende Bereich (Selektor) kann ein Tag, eine Id (nur einmal pro Website) oder eine

class (kann öfters pro Seite vorkommen) sein. Der Tag wird einfach angeschrieben, die Id wird mit

einer führenden Raute (z.B. #Kopfbereich) und die class mit einem führenden Punkt

(z.B.: h1.hervorgehoben oder nur .hervorgehoben) angeführt.

Mögliche Selektoren Selektor Anwendungsbeispiel

Einfache Selektoren

CSS: h1 {color: black;}

HTML: <h1> Überschrift </h1>

Klassenselektoren

Anwendung: wenn unterschiedliche

Ausprägungen eines HTML-Elements

gebraucht werden.

gebunden

CSS: h1.blau {color: blue;}

HTML: <h1 class=“blau“> überschrift </h1>

ungebunden

CSS: .blau {color: blue;}

HTML: <h1 class=“blau“> überschrift </h1>

<p class=“blau“> absatz </p>

Pseudoklassen-Selektoren Meist benutzt für Hyperlinks bzw. HTML-

Element A. Doppelpunkt bei Definition.

Pseudoklassen werden im HTML-Element

nicht erwähnt. Reihenfolge einhalten!

CSS: a:link {color: red;} a:visited {color: blue;}

a:hover {color: yellow;}

a:active {color: silver;}

HTML: <a href=“http:www.ard.de“> linktext </a>

ID-Selektoren

Dürfen nur einmal auf einer Webseite

verwendet werden. Hauptanwendung: für

Container des Seitenlayouts.

CSS: #header {color: blue;}

HTML: <div id=“header“>

…

</div>

Universal-Selektor

Wirkt auf alle HTML-Elemente. Wird meist

für das Zurücksetzen von Abständen benutzt.

CSS: * {margin: 0; padding: 0;}

Kommentar

/* Mein Kommentar */ verwenden um Stylesheets zu strukturieren


4

Das Boxmodell Die nebenstehende Grafik zeigt die Elemente

einer Box für Block-Elemente (z.B. div, p, …).

Die Standardvorgaben für padding und

margin sind in den Browsern sehr

unterschiedlich definiert, was nervt. Deshalb

wird üblicherweise mit * { padding: 0;

margin: 0; } der Innen- und Außenabstand

aller Elemente (*) auf Null gesetzt. Danach

kann man die gewünschten Abstände für alle

Elemente neu definieren und kann sicher

sein dass alle Browser die Seite gleichartig

darstellen.

Die Angabe margin: 10px auto; fügt dem Element einen oberen Rand von 10px zu und fügt an den

anderen Rändern Automatisch gleiche Ränder hinzu (was einem zentrieren entspricht)

background-color:Farbe; (oder auch background-image:url(Pfad zum Hintergrundbild); - background-

repeat:[repeat,no-repeat,repeat-x,repeaty]; - background-attachment:[fixed,scroll]; - background-

position:[top,bottom,center,left,right]) beziehen sich auf den Inhalts- und padding-Bereich. Der

Border-Bereich wird mit eigenen Eigenschaften angesprochen, der Margin-Bereich wird mit den

Attributen des dahinterliegenden Elements formatiert.

Wichtige Eigenschaften

Farbwerte

background-color: Farbwert; legt die Hintergrundfarbe des Bereichs fest.

color: Farbwert; legt die Schriftfarbe fest

Farbwerte können ausgeschrieben (z.B. red – 16 vordefinierte Farbwerte) oder als RGB-Farbwerte

(z.B. #FFEE88 oder #FE8 oder rgb(255,238,136)) angegeben werden.

Schriftformatierung

font-family: Fontname1, Fontname2, ..; Setzt den Font1 ein, falls dieser nicht existiert Font2 usw.

font-size: Größe; legt die Schriftgröße in Begriffen (z.B. small), relativen Angaben (z.B. 120%)

oder absoluter Größe (z.B. 20px) fest

font-style: Stil; legt Schriftauslegung (normal, italic,…) fest

font-weight: …; legt Schriftstärke (normal, bold,…) fest

text-decoration: …; legt fest ob Text Unterstrichen (underline,..) sein soll oder nicht (None)

Textausrichtung

text-align: Ausrichtung; Ausrichtung des Textes (left, right, center, …) festlegen

line-height: Zeilenhöhe; Gibt den Zeilenabstand innerhalb eines Blocks an (ohne Einheit)

letter-spacing: Buchstabenabstand; erlaubt gesperrter Wörter (z.B. H E L P)


5

Rahmen

border[-top, -right, -bottom, -left]: Breite Art Farbe; ist eine Zusammenfassung der Befehle

*= [-top, -right, -bottom, -left] border-*-width, border-*-style und

border-*-color

Breite(width) … Angabe der Breite des Rahmen in Pixel (2px) etc.

Art(Style) … solid, dashed, dotted, double, etc. Farbe(color) wie gehabt

Hyperlinks formatieren

a { ….} Formatierung des Hyperlinks festlegen a:link {…} Formate für nicht besuchte Links

a:visited {…} Formate für besuchte Links a:hover {…} Format für berühren mit Maus

a:focus {…} Format für Linkauswahl über TAB-Taste a:active {…} Format fürs Anklicken

Auch in dieser Reihenfolge festlegen!

Anzeigeeigenschaften von Elementen

display:Anzeigeeigenschaft; legt fest wie ein Element behandelt werden soll unabhängig davon

von welchem Typ (Block, Inline) es ist.

Die Anzeigeeigenschaften sind: block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.

inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt. inline-

block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden

kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element"

wie img. list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor. run-in = bewirkt,

dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird. none

= Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

Diese Eigenschaften sind vor allem bei der Gestaltung von Navigationen mit List-Items wichtig. Also

z.B. #navibereich li { display:inline; }

Positionierung von Boxen

position: Positionsart; Festlegung der Positionsart (relative , absolute, fixed,…)

top: Abstand von oben; Abstand vom Fensterrand (fixed), übergeordneten positionierten

left: Abstand von links; Element (absolute) oder der Position an der das Element stünde

bottom: Abstand von unten; wenn es nicht positioniert würde (relative)

right: Abstand von rechts;

width: Breite; heigth: Höhe; Angabe der Abmessungen der Box

overflow: Art; Legt die Behandlung überragender Inhalte (bei vorgegebener Höhe

und Breite) fest. Hidden = Überragendes wird abgeschnitten,

scroll = Scrollbalken, visible = überragendes wird angezeigt,

auto=Browser entscheidet

float: [left,right]; Bestimmt einen Bereich (z.B. ein Bild) der vom Text umflossen wird

left bzw. right bestimmt wo der Bereich angeordnet wird.

Maßeinheiten in CSS Bei vielen Eigenschaften lassen sich Maßeinheiten angeben.

Relative Längenangaben

px … Pixel (abhängig von Bildschirmauflösung), em … Angabe relativ zur Schriftgröße

% … Angabe relativ zur Normalgröße des Elements


6

Absolute Längenangabe

cm, mm, in … nur geeignet für Druckausgabe

Verschachtelte Selektoren Will man Stylesheetänderungen nur auf gewisse Elemente oder in gewissen Bereichen (z.B. div

#Navigation) zulassen, verwendet man verschachtelte Selektoren. Z.B: #Navigation a ,…- um die

Formatierung der Hyperlinks im Navigationsbereich zu verändern.

Die Kaskade Grundsätzlich: Je näher die Stylesheet-Definition dem Element das sie verändern soll steht desto

höher ist seine Priorität.

Darüber hinaus entscheidet ein Punktesystem darüber welche Stylesheetdefinition im speziellen Fall

angewandt wird (bei gleichlautenden Anweisungen in unterschiedlichen Styledefinitionen).

Barrierefreie Gestaltung

Skiplinks z.B.zum Überspringen von Kopf und Navigationsbereichen

<div class=“myskiplink“><a href=“#ID-eines-Bereichs“>Zum Inhalt</a>

Class statt id um eventuell vorhandenen mehrfache Skiplinks gemeinsam zu behandeln (z.B.

auszublenden)

Horizontale Navigation (Registerkärtchen) Grundidee: Listelemente als Hyperlinks anlegen formatieren, mit display:inline; nebeneinander

anordnen und durch Rahmeneigenschaften (margin, padding, border) die Gestalt eines

Registerblattes nachahmen.

z.B.: Die Hyperlinks auf die einzelnen Seiten sind als li einer ul definiert. Der zugehörige Stylesheet:

#navibereich {

text-align: right;

background: #ffe574 url(farbverlauf.jpg)

repeat-y top left;

padding: 5px 10px 4px 10px;

border-bottom: 1px solid #8c8c8c;

}

#navibereich ul {

margin-bottom: 0;

}

#navibereich li {

display: inline;

list-style-type: none;

margin-right: 10px;

margin-left: 0;

}

#navibereich a,

#navibereich span {

background-color: #ffeda0;

color: black;

padding: 4px 8px 4px 8px;

border: 1px solid #8c8c8c;

}

#navibereich a:hover,

#navibereich a:focus {

background-color: white;

color: black;

border-bottom-color: white;

}

#startseite #navi01 span,

#kontaktseite #navi02 span {

background-color: white;

color: black;

border-bottom-color: white;

}


7

Javascript

Einbinden von Javascripts in HTML-Dateien direkt im HTML-Code <script type=“text/javascript“>

//<![CDATA[ <- bei Verwendung von XHTML sonst 

</script>

<noscript>

Meldung wenn kein JavaScript vorhanden ist

</noscript>

Javascripts aus einer externen Bibliothek einbinden <script language=“JavaScript“ src=“MyJavaScript.js“></script>

Achtung! Keine Leerzeichen zwischen den Tags!

Aufruf der JavaScript-Funktionen aus der externen Bibliothek erfolgt wieder wie oben gezeigt.

Grundstrukturen von Javascript

JavaScript ist CASE-Sensitiv

Groß-Kleinschreibung wird bei JavaScript unterschieden weshalb es sich empfiehlt eine

Namenskonvention (z.B. Alle Variablennamen werden kleingeschrieben) einzuhalten.

Strichpunkt nicht vergessen!

Jede Programmzeile in JavaScript MUSS mit einen Strichpunkt „;“ abgeschlossen werden!

Variablendefinitionen

Der Datentyp von Variablen wird in JavaScript bei der Zuweisung eines Wertes zu einer Variablen

deklariert. Es erfolgt also keine Typprüfung, was eine saubere Programmierung erschwert!

Es ist möglich mit var eine Variable (lokal!) zu deklarieren. Eine explizite Deklaration von Variablen

(gar mit Datentyp) ist aber nicht notwendig bzw. vorgesehen.

Datentypen

JavaScript kennt die Datentypen Boolean (mit den Werten true,false), Number (allgemeiner

Zahlentyp für ganzzahlige aber auch Fließkomma-Werte - Achtung), Object (allgemeiner Objekttyp),

String (für Textvariablen), undefined (Typ den eine Variable besitzt wenn sie definiert aber noch

keinen Wert zugewiesen bekommen hat), null (Typ für Objekte die keinen Wert zugewiesen

bekommen haben).

Wertzuweisungen

Zuweisungen von Werten zu Variablen erfolgen durch das =-Zeichen. Z.B. a=13*17; Bei jeder

Zuweisung wird der Datentyp der Variablen durch den Ergebnistyp der Elemente auf der rechten

Seite bestimmt. Es kann theoretisch zu Typveränderung kommen, ist aber nicht zu empfehlen.

Erzeugung von Objekten

Durch die Zuweisung: a = new Konstruktor(); wird in der Variablen a ein neues Objekt mit Hilfe des

Konstruktors erzeugt.


8

Datenfelder (Arrays)

Ein Datenfeld kann mittels Arrayname = new Array(); deklariert (z.B. a=new Array();).

Den einzelnen Elementen des Datenfeldes kann man mittels Arrayname[Index] = Wert; (z.B.

a[3]=17;} einen Wert zuweisen, wobei der index bei 0 beginnt und die Länge des Arrays durch den

höchsten Index der bei der Zuweisung verwendet wird bestimmt wird. Will man die Länge des

Datenfeldes ermitteln hilft Arrayname.length weiter (z.B. while(i < a.length) ,…-)

Anweisungen

Anweisungen sind die Gestaltungsblöcke von JavaScript. Jede Anweisung ist entweder eine

Wertzuweisung, ein Funktionsaufruf oder eine Kontrollstruktur. Jede Anweisung wird mit einem „;“

abgeschlossen. Mehrere Anweisungen können mit geschwungenen Klammern , … -

zusammengefasst werden.

Numerische Ausdrücke

… bestehen in der Regel aus einem Zuweisungsoperator und einer Kombination aus Literalen (z.B.

Zahlen) und arithmetischen Operatoren (+, -, *, /, % (Modulo=Restwertdivision)). Für die

Zuweisungen i=i+1 oder i=i-1 gibt es eine Kurzschreibweise i++ bzw. i—(auch die Schreibweisen ++i

bzw. --i sind möglich).

Logische Ausdrücke

… werden in der Regel in Bedingungen in Verbindung mit Vergleichen (== (Gleichheit), != (ungleich), <

(kleiner), <=(kleiner-gleich), >(größer), >= (größer-gleich), === (Identisch)) verwendet und liefern

einen Wahrheitswert (true, false) als Ergebnis. Der && Operator entspricht dem loglichen UND, der

|| Operator entspricht dem logischen ODER und der ! Operator entspricht dem logischen NOT.

Zuweisungsoperatoren

Der Standard-Zuweisungsoperator ist das Gleichheitszeichen „ =“. Es gibt aber auch für die

Zuweisung Variable = Variable [Operator] Wert; (z.B. a = a * 7;) die

Kurzschreibweise Variable [Operator]= Wert; (z.B. a *= 7;).

Kommentare

Einzeilige Kommentare werden in JavaScript durch // gekennzeichnet. Mehrzeilige Kommentare

beginnen mit /* und enden mit */.

Kontrollstrukturen

JavaScript verfügt über die Kontrollstrukturen if-else, switch-case, while

If (Bedingung) {

… Anweisungen im Falle dass die Bedingung true ist

}

else {

… Anweisungen im Falle dass die Bedingung false ist

}

switch (Testobjekt) {

case [Erster Testwert]: … Anweisung(en) wenn das Testobjekt dem ersten Testwert entspricht

case [Zweiter Testwert]:… Anweisung(en) wenn das Testobjekt dem ersten Testwert entspricht

…

default: … Anweisung(en) wenn das Testobjekt keine der Testwerte entspricht

}


9

Eine Besonderheit der Switch-Case Konstruktion ist es, dass sobald ein case erfüllt ist, ALLE

nachfolgenden Anweisungen (also alle nachfolgenden casees und default) ausgeführt werden. Will

man das nicht verwendet man den Befehl break; als letztes Element der jeweiligen case

Anweisungen.

while (Bedingung) {

… Anweisungen im Falle dass die Bedingung true ist

}

do {

… Anweisungen die mindestens einmal und dann im Falle dass die Bedingung true ist ausgeführt werden

} while (Bedingung);

for {Zählvariable = Startwert; Bedingung; Erhöhung der Zählvariable) {(z.B.: for (i=0; i>10; i++) {…})

… Anweisungen innerhalb der Schleife ausgeführt werden sollen

}

for {Zählvariable in Array) { (z.B.: for (i in myarray) { document.write(myarray[i]);})

… Anweisungen innerhalb der Schleife ausgeführt werden sollen

}

Schleifen kann man mit dem Befehl break; abbrechen. Mit continue; kann man direkt zum

nächsten Schleifendurchlauf springen.

Funktionen

In JavaScript werden Funktionen und Prozeduren nicht unterschieden. Die allgemeine Form der

Funktionsdeklaration ist:

Function (Parameterliste) {

… Anweisungen in der Funktion

… ggf. Return Wert;

}

Die Parameterliste kann leer sein oder aus beliebig vielen durch Komma , getrennten (für die

Funktion lokalen) Variablen bestehen. Auch hier ist eine Typdefinition nicht möglich! Mit der return-

Anweisung wird ein Wert als Funktionsergebnis zugewiesen und die Funktion verlassen.

Standardfunktionen von Javascript

Es gibt eine Reihe von vordefinierten Funktionen, die vor allem für Konvertierung (String(),

unescape(), decoderURI(), encodeURI(),parseInt(), parseFloat(),…) und Typprüfung (isFinite(),

isNaN(),…) verwendet werden.

Ereignisse (Events)

… sind alle Dinge, die beim benutzen einer Website auftreten. JavaScript benutzt für die

Ereignisbehandlung Eventhandler die die allgemeine Form on[Ereignisbezeichnung] (z.B. onload ..

beim Laden einer Website, onunload, onclick, onmousedown, onmouseup, onmouseover,

onmousemove .. wenn die Mouse in einem Bereich bewegt wird, onmouseout .. wenn sie den

Bereich verlässt, onkeydown, onkeyup, …) haben. Diese Eventhandler werden bei den jeweiligen

HTML-Elementen als Attribut der Tags angegeben. Also z.B.

<a href=“mylink.html“ onmouseover=“dosomething()“

onclick=“dosomethingelse()“>


10

Objekte & Methoden

Objekte sind all jene Elemente, die in JavaScript manipuliert werden können. Es gibt eine Reihe von

vordefinierten Objekten, die nach dem Schema Objektname.Methode(); angesprochen

werden können (z.B. window.alert(„Eine Meldung“); für das Anzeigen einer Dialogbox mit

dem Text „Meldung“ und einem OK-Button).

DOM – Document-Object-Model

.. beschreibt wie ein Dokument in einer Baumstruktur beschrieben werden kann. Es beinhaltet

folgende wichtige Objekte:

document -> die Webseite, event -> für die Ereignisverarbeitung, form -> die Formulare der

Webseite, history -> erlaubt den Zugriff auf den Verlauf des Browsers, image -> sind die Bilder der

Webseite, link -> gibt Zugang zu allen Hyperlinks der Webseite , location -> erlaubt den Zugriff auf die

Addresszeile des Browsers, navigator -> liefert Informationen über den Browser, node ->

repräsentiert alle Elemente des Webseite (allgemeiner Zugriffspfad), screen -> liefert Infos über die

verwendete Bildschirmauflösung, Farben, etc., window -> repräsentiert das Browserfenster.

Zugriff auf DOM-Objekte

Zugriff über Objektfelder erfolgt nach dem Format Objekt.Teilobjekt.Eigenschaft (z.B.

windows.document.images*0+.src=“bild.png“ um das erste Bild der Webseite zu wechseln). Der

Nachteil von Objektfeldern ist, dass sich bei Umstellung der Webseite die Reihenfolge der Elemente

ändern kann und somit der Zugriff via Index nicht mehr den gewünschten Effekt liefert.

Zugriff über Namen (z.B. document.getElementsByName(„xx“)*0+.elements*0+.value=“Text“ weist

dem ersten Formularelement eines Formulars mit dem Namen „xx“ den Wert „Text“ zu – dieses

Formular muss in HTML mittels <form name=“xx“> deklariert sein.

Besser (zumindest bei modernen Browsern) ist die Nutzung der Nodes in Verbindung mit HTML-Ids

(der Tag wird im HTML mittels <TAG id=“ID-Bezeichnung“> eindeutig markiert). Die Form des Aufrufs

ist dann z.B.: document.getElementById(„ID-Bezeichnung“).innerHTML =“Ersatztext“.

Mittels innerHTML lässt sich der gesamte Inhalt eines Tags (inklusive weiterer verschachtelter HTML

Tags) verändern. Mittels innerText lässt sich nur der Text eines Elements bearbeiten

Eine letzte und in allen bekannten Browsern funktionierende Variante die jedoch die gleiche

Nachteile aufweist wie der zugriff über Objektfelder geht über die Methode getElementsByTagName.

Z.B. document.getElementsByTagName(„h1“)*1+.innerHTML=“Neue Überschrift“ ändert den Text der

zweiten mit h1 formatierten Überschrift in „Neue Überschrift“.


11

Das Objekt window

… steht für das Browserfenster und kann in JavaScript in der Regel weggelassen werden, da durch

den Kontext klar ist, dass sich die angeführten Methoden auf das Browserfenster beziehen sollen.

Window verfügt über untergeordnete Objekte (z.B. document für die aktuelle Website) und

zugeordnete Methoden (z.B.

alert(); für die Anzeige einer Meldungsbox,

prompt(); für die Eingabe eines Wertes in einem Dialogfenster,

confirm(); ähnlich alert jedoch mit 2 Buttons „OK“ und „Abbruch“,

settimeout(„Anweisung“, “Zeitversatz“); für die Ausführung einer Anweisung nach einem

gewissen Zeitraum (in ms),

open(„URL der Datei“, „Fenstertitel“,…) öffnet ein neues Browserfenster mit „Fenstertitel“

und öffnet in ihm die Datei mit der angegebene URL es gibt noch weitere Parameter für die

Form und das Verhalten des Fensters

close() schließt das aktuelle Fenster.

Das Objekt document

... entspricht der aktuellen Website und verfügt über viele wichtige Methoden (z.B. write(„Text“) um

auf die Website direkt zu schreiben – hauptsächlich beim Öffnen der Seite). In ihm ist die gesamte

Webseite via JavaScript manipulierbar (siehe DOM).

Das date Objekt

… ist eine leistungsfähige Sammlung von Datumsinformationen (Jahr, Monat, Tag, Stunde, Minute,

Sekunde, Millisekunde ab dem 1.1.1900 0Uhr) und Methoden (getYear(), getDay(), setMinutes(),…).

Zu beachten ist dass das Monat ab 0 gezählt wird also der Monat 0 ist Jänner, 11 ist Dezember.

Das String Objekt

… ist eine Sammlung von Textbearbeitungsmethoden (length … Länge des Texts, charAt (x) zeigt das

Zeichen an der x-ten Position, concat(a,b); verknüpft Strings, indexof(Zeichen) bestimmt die Position

des Zeichens im String,…).

Die Klasse Math

.. ist eine Sammlung von mathematischen Methoden, die ohne Erzeugung einer Instanz mit new

verwendet werden kann und deshalb als Klasse bezeichnet wird. Wichtige Eigenschaften sind einige

mathematische Konstante(E, LN2, LN10,PI, SQRT2), wichtige Methoden sind: random (eine

Zufallszahl ziwschen 0 und 1), round (zum runden einer Zahl), die Winkelfunktionen

(sin,cos,tan,asin,acos,atan), abs (Absolutwert), pow (Zahl hoch Exponent), sqrt (Wurzel), min, max

Eigene Klassen und Objekte definieren

Mit Variable = new Klassenname(); kann mein ein neues Objekt der Klasse erzeugen.


12

Tipps

Interessante Seiten

Allgemeine Seiten

http://de.selfhtml.org – DIE erste Instanz in Webgestaltung

CSS

http://www.css4you.de

Sites mit fertigen Layouts

http://www.thenoodleincident.com (nicht aktuell aber trotzdem gute Ideen) –

http://www.oswd.org (Große Fülle) –

http://intensivstation.ch/templates (Übersichtlicher) -

http://blog.html.it/layoutgala (gute Erklärung mit 40 vorgegebenen Layouts) –

http://www.smashingmagazine.com (Fundgrube für Ideen, aber sehr umfangreich!)

http://www.yaml.de (Layout-Baukasten – etwas einarbeitungsintensiv, eher für

Fortgeschrittene) -

Nützliche Tools

Textorientierte HTML-Editoren

www.weaverslave.ws oder http://www.phase5.info/ aber auch

WYSIWYG-Editoren

http://kompozer-web.de/ oder

Nützliche Firefox-Add-Ons Der Firefox-Webbrowser ist für Web-Entwickler wegen seiner zahlreichen Add-Ons interessant.

Wichtige Add-Ons sind

der JavaScript-Debugger „venkman“,

der „DOM Inspector“ für die Untersuchung der Seitenstruktur und

„Web Developer“ als Sammlung nützlicher Web-Entwickler-Tools.

Weitere Tools

Hilfen

Self-HTML: Sidebars (HTML, CSS, Javascript) http://de.selfhtml.org

Farbauswahl

http://colorsontheweb.com oder http://colorshemer.com mit Farbvorschlägen

Gradienten

lassen sich unter http://tools.dynamicdrive.com/gradient/ erstellen

Validatoren

http://validator.w3.org für HTML und http://jigsaw.w3.org/css-validator/validator für CSS


http://www.css4you.de/

http://www.thenoodleincident.com/

http://www.oswd.org/

http://intensivstation.ch/templates

http://blog.html.it/layoutgala

http://www.smashingmagazine.com/

http://www.yaml.de/

http://www.weaverslave.ws/

http://www.phase5.info/

http://kompozer-web.de/


http://colorsontheweb.com/

http://colorshemer.com/

http://tools.dynamicdrive.com/gradient/

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/validator

Documents

Website-Gestaltung: Grundlagen und Tipps€¦ · Hyperlinks formatieren a { ….} Formatierung des Hyperlinks festlegen a:link {…} Formate für nicht besuchte Links a:visited {…}