team.eliZZZa * webdesign * screendesign * xhtml * css * jQuery * ajax * fragen & antworten * tutorials * community

Kursmitschrift Webdesign 2009 Basiskurs Fortsetzung

KURSMITSCHRIFT 2

KURSMITSCHRIFT TEIL 2

/* Universalselektor: Für alle Elemente gilt */

margin:
0px  auto   0px   auto
Top   Right   Bottom   Left

(margin: top, right, bottom, left) werden gesetzt um auch in FIREFOX den Balken
mittig bzw. Zentriert zu setzen. Wird ins .css
geschrieben.

Das padding bezieht sich auf den Bereich innerhalb des Rahmens (border)
Das margin bezieht sich auf den äusseren Bereich des Rahmens (border)

Font Size in HTML (.css ganz oben eintragen)
62,5% für alle Browser = 10px (entspricht etwa 100%)

Durch den Fixbefehl von 62,5% + 10px Schriftgrösse muss man zusätzlich im
.css (body) folgendes definieren: 1,3em = quasi der Muliplikator ausgehend von
10px = 100% x 1.3em entspricht somit 13px Schriftgrösse!

Das BLOCKELEMENT “div”
Ein DIV (Blockelement) beginnt immer in einer neuen Zeile!
In .css sieht die Schreibweise des “div” so aus: div#..……
Wir haben ein zusätzliches div#header in unser .css eingebaut und zwar:

div#header: ul li {display:inline}   (ein “a”= Inline Element)

Webinfos : www.artzzz.net
www.overnightprints.de (Online Druckerei – 1.000 Stk. für € 9.-
www.printshop.de (Prägestempel – Standard Handmodell für € 89.-)

Transparenz erzwingen für .png24 = pngfix.js
Illustrative Grafik = .gif
Photos  = .jpg

DESIGN INFO: Der Gesamtinhalt in KB auf einer Seite sollte nicht 100KB
übersteigen.
pro Bild max. 40KB ideal sind 20-30KB!

Der Header darf etwas grösser sein.
Header von TEAM ELIZZZA besteht aus einem Farbbalken und der Schrift, die
aus tanzenden Personen besteht.

Die Ladezeit beträgt etwa 10-20 Sekunden.
Man orientiere sich nach der 3 KLICK Strategie: 3x klicken um jede INFO zu
finden.

Cache: (sprich-kasch) hierbei handelt es sich um einen Zwischenspeicher damit
Dreamweaver die links (Relationen der Datei) richtig aufreiht bzw. anreiht!
siehe

Dreamweaver Menüleiste einstellen:
Site verwalten od. Neue Site erstellen anklicken.
Einstellungen: FTP anwählen.

Klicke auf Neu…. in Sites verwalten!
Grafix1
Klicke auf FTP Server unterhalb von Site!

Grafix2+3

Der Upload würde unnötig lange dauern , deshalb die Meldung nur die jeweilige Seite
up(zu)loaden. Auch beim Download sollte man die Datei markieren die man vom Server
runterholen möchte, da ansonsten die gesamte Seite downgeloaded wird.

Die oben eingefügte Grafik wird bei Windows Usern wahrscheinlich nicht angezeigt
werden und diese sehen gleich diese Grafikbox mit FTP Konfigurationsmenü.

Grafix4+5

In unserem Fall wäre der Name des Servers : http://www.peoplezzz.net
FTP Host: ftp.peoplezzz.net
Host-Ordner: Kann in den meisten Fällen frei gelassen werden, sucht sich selbständig!
Anmeldung: bezieht sich auf den Namen der eigenen Seite: z.B. inge.peoplezzz.net oder
lissom.peoplezzz.net, hannes.peoplezzz.net, ferry.peoplezzz.net.
Kennwort: das jeweilige Kennwort

Wichtig: mittleres Kasterl  Grafix6

Dateien speichern, anklicken.

REMOTE – INFOS  (Mac Menü)
Grafix7

CODE FORMAT: UF (unix) einstellen,  (Windows Menü)
Grafix8

Windows Dreamweaver Menü
Radiobutton „Nach Eingabe der öffnenden Tags“ anklicken!
Grafix9

Weitere wichtige Voreinstellungen: links auswählen bzw. markieren
Grafix10

und rechts  mit + der Auswahl hinzufügen !
Grafix11

Kopieren und Einfügen: Radiobutton „nur Text“ anklicken.
Grafix12

Neues Dokument: HTML/XHTML 1.0 strict + Unicode (UTF-8)
Grafix13

Schriftarten: Unicode
Grafix14

Grafix15

BROWSWER VORSCHAU: Firefox als Primärbrowser wählen !
Grafix16

DESIGN NOTES: Nicht Anklicken!

Notiz: Wer über keine automatische Screenfunktion verfügt, hat die Möglichkeit bei
www.google.com in Suchfunktion MIREK’S FREE (MW SNAP) Kameraprogramm
runterzuladen. Wichtig nur den Mirek’s Link direkt verwenden or try www.snap.com !

Kurze Schreibweisen in .css
Für margin und padding:
Lange Schreibweise = (top)10px (right)20px (bottom)30px  (left)20px

Kurze Schreibweise=  (top)10px (r+l)20px  (bottom)30px
Border width=  10px (o+u) 20px(r+l)

Wenn bei margin steht: 40px (bezieht sich das auf alle 4 SEITEN!!)

Notiz: Kurzbefehl – STRG (APFEL) +D = Kopieren bzw. Duplizieren!

Audio und Videoprogramme finden wir auf: http://avs4you.com

MENÜPUNKTE mit Gummiband verlinken: Den Menüpunkt markieren und in der
Eigenschaftsleiste im Dreamweaver das Gummiband aktivieren und auf den markierten
Text ziehen um interne Verlinkungen auf der Seite herzustellen.

Linkdefinition im .css sheet !

a: link = Aussehen des gesetzten Links, zumeist in blauer Farbe, kann eingefärbt werden.
a: visited link = der bereits besuchte Link, kann beliebig gefärbt werden, zumeist violett.
a: hover = mouse_over link bzw. der Effekt der entsteht wenn man mit der Mouse streift.
a: active {outline:none} sieht man kaum, ist eine meist rot gestrichelte Linie wenn man
den Link aktiviert!

Notiz: Wenn eine Schrift aus mehr als einem Wort besteht, muss das in der .css immer in
Anführungszeichen stehen. Z.B. „Times New Roman“
Gute Menü und Navigationsvorlagen finden wir auf http://jazzz.biz

Geld verdienen mit Amazon: http://partnernet.amazon
Widgets von Amazon dazu direkt holen.

http://www.zanox.com  = Globales Online Marketing – we create partners!

3 WERTE SYSTEM !      Content = Inhalt = Inhalt lockt Besucher
1. UNIQUE VISITOR/VISITS
2. PAGE NEWS
3. TIME VISIT

Die Hälfte aller Besucher – monatlich – sollten NEU sein!

Notiz: Rumänien druckt Flyer/Stk. für 80 cent!

smashing magazine

DIE Autorität in Sachen Webdesign & Webproduktion. Wenn Du dich über die aktuellsten Trends informieren möchtest, dann bist Du hier richtig!

Linksammlung für Webdesigner

Hier finden Webdesigner alles, was für die Arbeit nützlich sein kann:

Quellen für Hintergrunddesigns
Wordpress- und CSS-Templates
lizenzfreie Bilder und Schriften
Tutorials für HTML, CSS und Photoshop
praktische Tools
Info-Plattformen
Webhosting-Anbieter
Infos zu Rechtsfragen
…. 

Viel Spaß damit!