• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Fortbildung Schulwebsite: Technische Grundlagen
 

Fortbildung Schulwebsite: Technische Grundlagen

on

  • 2,352 views

 

Statistics

Views

Total Views
2,352
Views on SlideShare
1,643
Embed Views
709

Actions

Likes
1
Downloads
0
Comments
0

8 Embeds 709

http://herr-kalt.de 374
http://herr-kalt.wikispaces.com 207
http://www.rete-mirabile.net 108
http://ak.backpackit.com 10
url_unknown 7
http://www.ak.backpackit.com 1
http://wiki.herr-kalt.de 1
https://ak.backpackit.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Fortbildung Schulwebsite: Technische Grundlagen Fortbildung Schulwebsite: Technische Grundlagen Presentation Transcript

    • Benutzerfreundliches Webdesign Technische Grundlagen
    • InhaltWebstandards (X)HTML CSS
    • Webstandards
    • Was steckt dahinter? W3C (World Wide Web Consortium) Standardisierte Sprachen, u.a. HTML/XHTML XML Cascading Style Sheets (CSS) ECMAScript 262 („JavaScript“)
    • Worum geht es dabei? Zugänglichkeit und Nutzen Lebensdauer von Dokumenten Vereinfachen des Codes
    • Wie soll daserreicht werden?
    • Trennung von …Struktur (X)HTMLAussehen CSSVerhalten JavaScript
    • Valider CodeKontrollierteDarstellung
    • Was bringt das?Zunächst AnlaufwiderstandKontrollierte DarstellungKlarere Struktur des InhaltsLeichtere Pflege (v.a. im Team)Schnellere LadezeitenNutzbarkeit auch in Zukun
    • (X)HTML
    • Aufbau eines (X)HTML Tags
    • Wichtige Attribute<p class="hervorgehoben">WichtigerText</p><div id="inhalt"> … Inhalt … </div>
    • (X)HTML-Regeln Kleinschreibung Tags korrekt verschachtelt Tags immer geschlossen
    • Doctypes<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML-Version Info für den Browser, wie das Markup darzustellen ist Ohne Doctype: „uirks“-Mode beim IE
    • Semantisches Markup Nicht-semantisch Semantisch<font <h1>Hauptüberschrift</h1>size="7">Hauptüberschrift</font> <p>Dies ist ein Blindtext-Satz. Er<font size="3">Dies ist ein steht hier, damit überhaupt einBlindtext-Satz. Er steht hier, wenig Text hier steht</p>damit überhaupt ein wenig Text <h2>Unter-Überschrift</h2>hier steht</font> <p class="eingerueckt" >Dieser<font size="3">Unter- Abschnitt soll eingerückt sein.Überschrift</font> </p><blockquote>Dieser Abschnitt <p class="abstand-oben">Hier istsoll eingerückt sein.<blockquote> Abstand nötig</p><br><font size="3">Hier ist Abstandnötig</font>
    • Frames: nicht zu empfehlen Drucken URL & Bookmarks Webseite ≠ Webseite Suchmaschinen Mobile Browser
    • (X)HTML ist nurstrukturierter Inhalt
    • Komplette Website = (X)HTML + CSS
    • NEUHTML 5
    • Grundlage: HTML 4 – nichts vergessen,nur dazulernenAnpassung an heutige Bedürfnisse Direkte Videowiedergabe Layout-Elemente, z.B. <article>, <section>, <header>, <nav> Zusätzliche Formularelemente, z.B. Schieberegler, Datumauswahl, E-Mail-Feld etc. …
    • CSSCascading Stylesheets
    • XHTML ⚭ CSS<head>… <link rel="stylesheet" type="text/css" href="meinstylesheet.css" />…</head>
    • Wie funktioniert CSS?
    • h1 { font-size: 3em;}h1, h2, h3, h4, h5, h6, p { font-family: Verdana, Arial, sans-serif; }#inhalt { margin: 0 0 25px 0; }#inhalt .hervorgehoben { background-color:#ffffcc; }
    • Wichtige CSS Eigenschaftenfont-size, font-family … kurz: fontline-heightcolorbackground-color, background-image … kurz:background margin paddingmargin, padding, border Blindtext border Box Model
    • Ans Werk!