View
18
Download
0
Category
Preview:
Citation preview
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
<!--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>
Website-Gestaltung: Grundlagen und Tipps
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“>
Website-Gestaltung: Grundlagen und Tipps
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
Website-Gestaltung: Grundlagen und Tipps
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)
Website-Gestaltung: Grundlagen und Tipps
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
Website-Gestaltung: Grundlagen und Tipps
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;
}
Website-Gestaltung: Grundlagen und Tipps
7
Javascript
Einbinden von Javascripts in HTML-Dateien direkt im HTML-Code <script type=“text/javascript“>
//<![CDATA[ <- bei Verwendung von XHTML sonst <!--
… Hier landet der Javascript-Code
//]]> <- 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.
Website-Gestaltung: Grundlagen und Tipps
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
}
Website-Gestaltung: Grundlagen und Tipps
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()“>
Website-Gestaltung: Grundlagen und Tipps
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“.
Website-Gestaltung: Grundlagen und Tipps
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.
Website-Gestaltung: Grundlagen und Tipps
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
Recommended