- lich Willkommen<br />Adobe Dreamweaver CS5 I<br />
Über mich<br />Begrüssung<br />Christian Zumbrunnen<br />Verheiratet<br />3 Kinder<br />Im Web unterwegs seit 1995<br />Wi...
Was ich gerne von Ihnen wissen möchte…<br />Begrüssung<br />Warum sind Sie hier?<br />Natürlich, um DW zu lernen, aber gib...
Quicktest<br />Begrüssung<br /><ul><li>Was kommt Ihnen bei folgenden Begriffen / Namen / Abkürzungen in den Sinn?</li></ul...
DOM
Blog
Web 2.0
Netscape
Firefox
Chrome
W3C
URL</li></li></ul><li>Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Website<br />Über Hyperlinks verbun...
Nächste SlideShare
Wird geladen in …5
×

1 dw-kv-baden

711 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
711
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

1 dw-kv-baden

  1. 1. - lich Willkommen<br />Adobe Dreamweaver CS5 I<br />
  2. 2. Über mich<br />Begrüssung<br />Christian Zumbrunnen<br />Verheiratet<br />3 Kinder<br />Im Web unterwegs seit 1995<br />Wirtschaftsinformatiker HF<br />Dozent, Lehrer, Webbegeistert<br />Biete auch Hosting* an<br />(* falls Sie nicht wissen, was Hosting ist: das erkläre ich gleich ;-) )<br />
  3. 3. Was ich gerne von Ihnen wissen möchte…<br />Begrüssung<br />Warum sind Sie hier?<br />Natürlich, um DW zu lernen, aber gibt es dazu einen besonderen Beweggrund?<br />Geschäftliche / Private Gründe?<br />Planen Sie eine Webseite oder haben Sie eine Website (die Sie pflegen dürfen, wollen, sollen)?<br />Welche Vorkenntnisse haben Sie?<br />Computer<br />Internet<br />HTML<br />CSS<br />
  4. 4. Quicktest<br />Begrüssung<br /><ul><li>Was kommt Ihnen bei folgenden Begriffen / Namen / Abkürzungen in den Sinn?</li></ul>Opera<br />404<br />FTP<br />Tim Berners-Lee<br />CERN<br />Mosaic<br />Wikipedia<br />HTTP<br />SWITCH<br /><ul><li>Facebook
  5. 5. DOM
  6. 6. Blog
  7. 7. Web 2.0
  8. 8. Netscape
  9. 9. Firefox
  10. 10. Chrome
  11. 11. W3C
  12. 12. URL</li></li></ul><li>Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Website<br />Über Hyperlinks verbundene Webseiten<br />Homepage = Startseite zur Site<br />Server oder Host<br />Webserver ist Software auf Hardware<br />Auf einem Server können mehrere Domains liegen<br />
  13. 13. Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Domain<br />Besteht aus TLD (Top Level Domain)<br />länderspezifisch<br />Generic<br />Eigentlicher, individueller Name<br />www oder andere Subdomain / Host<br />
  14. 14. Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Domainname muss bei Registrator erworben werden<br />.ch / .li SWITCH  www.nic.ch<br />Jahresgebühr: <br />SWITCHbasic CHF 17.– <br />SWITCHguard CHF 34.– <br />chruezundquer.ch CHF 15.- (basic)<br />.com, .net, .org, .biz, .info, .name, .de, .us, .ch, .li, .eu  z. B. http://inic.ch/ verschiedene Hoster<br />Übersicht aller TLDs: http://www.iana.org/domains/root/db/<br />
  15. 15. Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Domainname muss bei Registrator erworben werden<br />.ch / .li SWITCH  www.nic.ch<br />Jahresgebühr: <br />SWITCHbasic CHF 17.– <br />SWITCHguard CHF 34.– <br />chruezundquer.ch CHF 15.- (basic)<br />.com, .net, .org, .biz, .info, .name, .de, .us, .ch, .li, .eu  z. B. http://inic.ch/ verschiedene Hoster<br />Übersicht aller TLDs: http://www.iana.org/domains/root/db/<br />
  16. 16. Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Speicherplatz muss bei einem Hoster erworben werden<br />Vergleichen:<br />Zuverlässigkeit (Redundanz der Server, Stromversorgung, Backup, SLA, Anzahl virtuelle Hosts pro Server)<br />Anzahl Domainnamen (Alias, Subdomains) <br />Anzahl E-Mail-Adressen<br />Administrationskonsole<br />Grösse / Transfervolumen<br />PHP, MySQL, andere Programmiersprachen<br />Rootzugriff<br />
  17. 17. Ein Platz im Internet<br />Einführung - Internet Grundlagen<br />Weitere Möglichkeiten<br />Server in der Cloud, z. B. Amazon<br />Server Housing<br />Server zu Hause<br />
  18. 18. Die Sprachen des Web<br />HTML, CSS, JavaScript, Php<br />HTML – Hypertext Markup Language<br />Tags, die verschiedene Parameter haben können, zeichnen die einzelnen Teile einer Seite aus.<br />Struktur<br />Verschiedene Versionen <br />HTML 2.0 1995 HTML 3.2 1997<br />HTML 4.0 1998 HTML 4.01 1999<br />XHTML 1.0 2002 XHTML 1.1 2002<br />XHTML 2.0 2006 (Working Draft)  expired2009<br />HTML5 (Working Draft: 19.10.2010) Recommendation erwartet per Mai 2011<br />
  19. 19. Die Sprachen des Web<br />HTML, CSS, JavaScript, Php<br />CSS– Cascading Style Sheets<br />Während HTML die Struktur des Dokuments festlegt, dient CSS dazu die Struktur zu formatieren.<br />JavaScript (clientseitig)<br />HTML ist selber keine Programmiersprache.Seit der Version 4 von HTML wirdaber in derSpezifikation von HTML definiert, wiederZugriff auf Scriptsprachenzuerfolgen hat.<br />JavaScript bzw. ECMA Script<br />Erlaubt die Manipulation des DOM<br />AJAX (Asynchronous JavaScript and XML)<br />
  20. 20. Die Sprachen des Web<br />HTML, CSS, JavaScript, Php<br />PHP, ColdFusion, Java, Ruby, Python(serverseitig)<br />Für «dynamische Websites» (Datenbankzugriff etc.)<br />Im Gegensatz zu «statischen Websites» <br />
  21. 21. Übung - Starten Sie den Notepad Editor- Geben Sie diesen Code ein<br /><html><br /><head><br /><title>Hallo Welt - &Uuml;bung</title><br /></head><br /><body><br /><h2>Hallo Welt</h2><br /><p>Mein allererstes <strong>HTML</strong>-Dokument</p><br /></body><br /></html><br />- Speichern Sie das Dokument als hallowelt.html- Öffnen Sie es mit Doppelklick<br />
  22. 22. Struktur geben<br />HTML<br />Wichtige Tags (S. 38)<br />Blocklevel-Elemente (ganze Breite)<br /><h1>.. <h6><br /><p><br /><ul> <li><br /><ol> <li><br /><table> <tr> <td><br /><img><br />Inline-Elemente<br /><em>, <strong><br /><a><br />
  23. 23. Attribute<br />HTML<br />Wichtige Attribute<br />img<br />src<br />width, height<br />alt<br />a<br />href<br />title<br />generell<br />id, class<br />title<br />
  24. 24. Attribute - Beispiele<br />HTML<br /><imgsrc="arches-mittel.jpg" width="720" height="479" alt="Arches National Park"><br /><a href="hallowelt.html">Erste Seite</a><br />
  25. 25. Header und Body<br />HTML<br />Der Doctype bestimmt u. a. ob der Browser im Standards Mode oder Quirks Mode funktioniert.<br /> <!DOCTYPE HTML>  HTML5<br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
  26. 26. Unterschiede zwischen HTML 4 und XHTML <br />XHTML<br />Alle Tags müssen geschlossen werden<br />(Kurzschreibweise möglich: <br />)<br />Veraltete Tags im Strict-Mode nicht mehr erlaubt.<br />HTML 4<br />Weniger streng<br />HTML5<br /><ul><li>Wieder weniger streng
  27. 27. Zusätzliche Struktur-Tags wie:
  28. 28. article, header, footer
  29. 29. Neue Möglichkeiten für Video, Audio, Grafiken
  30. 30. video, audio, canvas</li></li></ul><li>HTML-Entities<br />HTML<br />Wichtige Attribute<br />img<br />src<br />width, height<br />alt<br />a<br />href<br />title<br />generell<br />id, class<br />title<br />
  31. 31. URLs<br />Empfehlenswerte Links<br />http://tv.adobe.com/de/product/dreamweaver/<br />http://jendryschik.de/wsdev/einfuehrung/<br />http://www.heise.de/netze/meldung/XHTML-2-wird-eingestellt-189090.html<br />http://scriptshit.de/blog/show/HTML5-Tag-bersicht-und-Dokumentaufbau<br />

×