Beispiel einer mobilen Website

Hier noch als Beispiel meiner mobilen Website eine vereinfachte Variante für die Bastler unter Euch.

Diese HTML-Seite habe ich nach den Anweisungen von jQuery-Mobile in HTML5 händisch in meinem Windows-Editor erstellt.

Die Smartphone Seite ist komplett dynamisch und wird sich jeder Auflösung anpassen, auch wenn man das Handy dreht.

Ich habe bei meinem Download-Beispiel meine Verlinkungen drin gelassen, damit Ihr eine Vorlage zum Nachstellen habt.

Hier könnt Ihr Euch diese HTML-Seite (im UTF-8 Zeichensatz) inklusive meiner dort verwendeten Bilder downloaden, die so aussieht:

Mobile-Site-Beispiel.zip - Downloads insgesamt seit 28.10.2013: 1288 

Download

Hier der Inhalt meiner mobilen Startseite “index.html”. Bitte ändert alle meine Texte und Verlinkungen und vergesst nicht die Meta-Tags anzupassen.

In meinem Download ist der Quelltext auch ordentlich eingerückt ;-)

<!DOCTYPE html>
<html lang="de">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Robots" content="index, follow">
<meta name="Description" content="Deine Seiten-Beschreibung">
<meta name="Keywords" content="Deine Keywords">
<title>Dein Titel der Seite</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
  a#meinlink:hover {color:red;}
</style>
</head>

<body>

<div data-role="page">

<!-- Header -->
<div data-role="header">
<h1>Dein Header Text</h1>
</div><!-- /header -->

<!-- Content -->
<div data-role="content">

<!-- Accordion -->
<div data-role="collapsible-set" data-content-theme="c">

<!-- Tab 1 Willkommen -->
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed="false">
<h3>Willkommen</h3>
<center>
<p><span style="color:blue"><b>Willkommen</b></span></p>
<p><span style="color:blue"><b>auf meiner mobilen Website</b></span><p>
</center>
<br>
<p>Dein Text</p>
<p>Dein Text</p>
<br>
<p style="text-align: center;">Hier geht es zu meiner</p>
<p style="text-align: center; margin-bottom: 0px;"><a href="http://www.nof-tutorials.com/" target="_blank">NetObjects Fusion Website</a></p>
<br>
</div>

<!-- Tab 2 Themen -->
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Themen Übersicht meiner Website</h3>
<span style="font-size:1.5em">
<ul>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php">Übersicht aller Tutorials</a></li>
<br>
<ul>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-neue-seiten.php">Neue Seiten</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-komponenten.php">Komponenten</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/StefanMenge/Komponenten/">SwissKnife for NOF</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-sichere-seite.php">Sichere Seite</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-multimedia.php">Multimedia</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-navigation.php">Navigation</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-sicherheit.php">Sicherheit</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-sonstiges.php">Sonstiges</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/go-links.php">Links</a></li>
<br>
<li><a id="meinlink" href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php">Gästebuch</a></li>
</ul>
</ul>
</span>
</div>

<!-- Tab 3 Tutorials -->
<div data-role="collapsible" data-theme="e" data-content-theme="d">
<h3>NOF Tutorials und NOF Forum</h3>
<center>
<p><a href="http://www.nof-tutorials.com/" target="_blank"><img id="Logo" height="144" width="165" src="./NOF-Hilfe-Tommy.png" alt="NOF Tutorials" title="NOF Tutorials und Hilfeseite" style="border: 0;"></a></p>
<p><a href="http://www.nof-tutorials.com/" target="_blank">NetObjects Fusion Hilfe Seite</a></p>
<br>
<p><a href="http://www.nof-schule.de/forum/" target="_blank">Bitte stellt Eure Fragen in unserem NOF Forum</a></p>
<br>
<p><a href="http://www.nof-schule.de/forum/" target="_blank"><img id="Forum" height="81" width="165" src="./Forum-Link.png" alt="NOF Forum" title="zu unserem NOF Forum" style="border: 0;"></a></p>
</center>
</div>

</div><!-- /collapsible-set -->

</div><!-- /content -->

<!-- Footer -->
<div data-role="footer" data-theme="a">
<center>
<a href="https://www.facebook.com/NOF.Tutorials" target="_blank"><img id="facebook" height="44" width="45" src="./facebook.png" alt="Facebook" title="Facebook" style="border: 0;"></a>
<a href="https://plus.google.com/110484875499307754970/posts" target="_blank"><img id="google" height="44" width="45" src="./google.png" alt="Google" title="Google" style="border: 0;"></a>
<a href="http://www.youtube.com/channel/UC4bOLym2XlmltUAIP8dGkLA" target="_blank"><img id="youtube" height="44" width="45" src="./youtube.png" alt="YouTube" title="YouTube" style="border: 0;"></a>
</center>
</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

Bemerkungen:

  • Bei data-theme="?" (Tab) und data-content-theme="?" (Inhalt) gibt es die Themen “a”, “b”, “c”, “d” oder “e”, die unterschiedliche Styles haben.
     
  • data-collapsed="false" öffnet beim Aufruf der Seite den Tab, bei dem diese Option hinzugefügt wurde.
     
  • Das Formular auf meiner Seite, habe ich mit dem Formular-Generator von Webbausteine.de erstellt.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik