Homepage aktiver Ottobrunner Senioren

Frühere Vorgehensweise

Ein sehr einfach zu bedienender Editor für HTML-Dateien ist Kompozer Download-Seite.
Das Erstellen eigener Internetseiten erfolgt ähnlich dem Erstellen eines Textdokumentes mit "MS-Word" oder "Open-Office".
Es gibt auch einen Kompozer-Kurs mit mehreren Lerneinheiten.

 Das Erstellen von Webseiten für SenOtto mit NVU bzw. Kompozer ist aber nicht optimal :-( 

• Es ist schwierig einen halbwegs einheitlichen Stil innerhalb SenOtto zu erreichen.
• Es hat sich herausgestellt daß die SenOtto-Besucher Bildschirme sehr unterschiedlicher Größe nutzen, und zwar hauptsächlich von 600*800 bis 1920*1200 !
  Smartphones haben teilweise noch kleinere Bildschirme, ess gibt aber auch schon erheblich größere Bildschirme.
  Wenn man nun statische Seiten mit fester Schriftgröße und fester Bildgröße hat wirken diese auf kleinen Schirmen zu groß oder aber auf großen Schirmen zu klein.

Es wurde daher für SenOtto ein Stylesheet "resize.css" und eine Javascript-Datei "resize.js" bereitgestellt, mit deren Hilfe es relativ einfach möglich ist, einen einheitlichen SenOtto-Seitenstil zu erreichen und das Seiten-Layout (Schrift-Größe, Bilder-Größe) an die Bildschirmgröße anzupassen.

 Empfohlene Vorgehensweise für SenOtto-Webseiten: 

• Man wählt eine Seite, die am besten als Muster für die eigene Seite geeignet ist.
• Diese Datei wird in das eigene Verzeichnis kopiert.
• Zum Anpassen dieser Seite nimmt man einen Texteditor
  Sieht vielleicht am Anfang kompliziert aus, ist aber gar nicht so schwer und man hat bald zufriedenstellende Ergebnisse.
  Einfache HTML-Grundkenntnisse sollte man mitbringen, siehe auch HTML-Einarbeitung.
  Beispiele: Ein Textblock steht zwischen <p>Textblock</p>, eine neue Zeile erzwingt man mit <br>, ...

 Ändern einer vorhandenen Seite: 

• Die aktuelle Seite runterladen.
• Die gewünschten Änderungen mit einem Texteditor durchführen.
  Beim Abspeichern darauf achten daß der korrekte Zeichensatz eingestellt wurde, meist UTF-8.
• Die geänderte Seite auf dem lokalen Rechner testen.
• Die geänderte Seite hochladen und nochmals testen (vorher Browsercache löschen).

 Beispieldatei: 

Es wird die .html-Datei angezeigt wie diese in einem Texteditor erscheint.
Kommentiert werden nur jene Zeilen die evtl. geändert werden müssen.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
  <html>
    <head>

      <title>Treffpunkt Ottobrunner Senioren</title>
      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
      <meta charset="utf-8">
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <meta http-equiv="content-language" content="de">
      <meta http-equiv="cache-control" content="no-cache">
      <meta http-equiv="pragma" content="no-cache">
      <meta name="robots" content="index,follow">
      <meta name="viewport" content="width=device-width, initial-scale=1, target-densitydpi=device-dpi" />
      <meta name="description" lang="de" content="Senioren Ottobrunn">
      <meta name="keywords" lang="de"
         content="Senioren,Ottobrunn,Radgruppe,Radfahren,Theatergruppe,Wandergruppe,Wandern,Internet, ... usw, " />
      <meta name="DC.Title" content="Senioren Ottobrunn">
      <meta name="DC.Subject" content="Senioren Ottobrunn">
      <meta name="DC.Description" content="Senioren Ottobrunn">
      <meta name="DC.Date" content="2009-11-11">
      <meta name="DC.Type" content="Text">
      <meta name="DC.Format" content="text/html">
      <meta name="DC.Identifier" content="https://www.senotto.de">
      <meta name="DC.Source" content="Senioren Ottobrunn">
      <meta name="DC.Language" content="de">

      <link rel="stylesheet" type="text/css" href="../Impressum/resize.css">

      <script type="text/javascript" src="../Impressum/browser.js"></script>
      <script type="text/javascript" src="../Impressum/resize.js"></script>

    <script type="text/javascript">
      <!--
      function mailForm () {
        var Titel = "Nachricht an Peter";                                   // Formular Überschrift
        var mailTo = "_peter_@senotto.de";                                  // Empfänger eMail-Adresse (erlaubt NUR @senotto.de !!!)
        var subject = "Tipps => Senotto-Webseite: Nachricht an Peter";   // Subject
        var antwSeite = "/relaunch/kontakt";  // Relaunch-Kontaktseite
        mailWin (Titel, mailTo, subject, antwSeite);
      }
      -->
    </script>

      <body onload="resize.ResizeFont(1);resize.ResizeClass('picSize',0.9,0.6);resize.ResizeId('picSize|800|460',0.9,0.6)">
      .....
      <img class="picSize" src="HausDerSenioren.jpg" alt="HausDerSenioren.jpg" width="800" height="460">
      .....
      <img id="picSize|800|460" src="anderesBild.jpg" alt="anderesBild.jpg" width="0" height="0">

      <div class="navi">
        <a href="Javascript:location.replace('/relaunch/tipps-und-tricks')">Tipps_Tricks</a> &raquo;
        <a href="Javascript:location.replace('/relaunch/tipps-und-tricks/senotto')">Senotto</a> &raquo;
        Senotto Webseite erstellen
        <span class="bookmark"><a href="Javascript:location.replace(resize.getBookmark())">Lesezeichen</a></span>
      </div>

      <div class="disp">
        ....
        Rest der Seite
        ....
      </div>

      <h3 class="Seitentitel">
        Treffpunkt Ottobrunner Senioren:
      </h3>
      Seit 1984 ist die ehemalige Villa des Komponisten Ermanno Wolf-Ferrari in der Mozartstraße 68
      das Ottobrunner <b>Haus der Senioren</b>:

      <h3 class="Untertitel">
        Unser Treffpunkt vor dem Haus . . .
      </h3>

      <img class="picSize" src="HausDerSenioren.jpg" alt="HausDerSenioren.jpg" width="800" height="460">

      <a class="button" href="Senotto/Senotto.html">&nbsp;Senotto Webseite erstellen&nbsp;</a>
      <a class="button" href="GoogleMaps/GoogleMaps.html">&nbsp;Senotto Tourenseite erstellen&nbsp;</a>
      <br>

    Fragen an <a href="mailto:isidor@mnet.de"> Isidor </a>

    Fragen an <a href="/relaunch/tipps-und-tricks/senotto/webseite" onclick="mailForm()"> Peter </a>

Beispiel für Tourenbericht:

Als Muster für einen einfachen Tourenbericht eignet sich die Bergwanderung auf den Hasentalkopf