Codierung - hausgaertner

Wer sich für den Code der mobilen Startseite Interessiert ‐ oder für seine Seite selbst benötigt – kann ihn hier einsehen und übernehmen. Viel Spaß – Gruß Jonny Winter. <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC "‐//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml‐mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> <!‐‐ TemplateBeginEditable name="doctitle" ‐‐> <title>Unbenanntes Dokument</title> <!‐‐ TemplateEndEditable ‐‐> <!‐‐ TemplateBeginEditable name="head" ‐‐> <!‐‐ TemplateEndEditable ‐‐> <style type="text/css"> <!‐‐ body { /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body‐Elements auf 0 einzustellen, um unterschiedlichen Browser‐Standardeinstellungen Rechnung zu tragen. */ background‐position: 0% 0%; font: 100% Verdana, Arial, Helvetica, sans‐serif; margin: 0; padding: 0; text‐align: center; /* Hierdurch wird der Container in IE 5*‐Browsern zentriert. Dem Text wird dann im #container‐Selektor die Standardausrichtung left (links) zugewiesen. */ color: #000000; background‐color: #33333; background‐repeat: repeat; background‐attachment: scroll; } .oneColFixCtrHdr #container { width: 780px; /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser‐Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */ background: #FFFFFF; margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */ border: 1px solid #000000; text‐align: left; /* Hierdurch wird die Einstellung text‐align: center im Body‐Element überschrieben. */ } .oneColFixCtrHdr #header { background: #DDDDDD; padding: 0 10px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */ } .oneColFixCtrHdr #header h1 { margin: 0; /* Wenn Sie den Rand des letzten Elements im #header‐div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */ padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */ background‐color: #33333; } .oneColFixCtrHdr #mainContent { padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div ‐Box. */ background: #FFFFFF; } .oneColFixCtrHdr #footer { padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */ background:#DDDDDD; } .oneColFixCtrHdr #footer p { margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */ padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */ } .Stil1 { color: #FFFFFF; font‐family: Georgia, "Times New Roman", Times, serif; } .Stil2 {font‐family: Georgia, "Times New Roman", Times, serif} .Stil3 {color: #000000; font‐family: Georgia, "Times New Roman", Times, serif; } .Stil6 { font‐size: 18px; font‐family: Georgia, "Times New Roman", Times, serif; } .auto‐style1 { font‐size: x‐large; } .auto‐style2 { background‐color: #000000; } .auto‐style3 { color: #FFFFFF; } .Stil7 { color: #FFFFFF; font‐family: Georgia, "Times New Roman", Times, serif; font‐size: large; } .Stil8 { color: #ECFFFF; font‐family: Georgia, "Times New Roman", Times, serif; } ‐‐> </style> <script type="text/javascript"> <!‐‐ function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } // ‐‐> </script> </head> <body class="oneColFixCtrHdr" onload="FP_preloadImgs(/*url*/'button9.gif',/*url*/'buttonA.gif',/*url*/'button1B.gif',/*url*/'butto
n1C.gif',/*url*/'button3.gif',/*url*/'button4.gif')" style="background‐image: url('bg.jpg')"> <div id="container"> <div id="header"> <h1 align="center" class="Stil7">Hier können Sie Entscheiden wie Sie unsere Seiten einsehen möchten.</h1> <h1 align="center" class="Stil1"><a href="index.htm"><img id="img1" alt="Mobile" height="20" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonA.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button8.gif')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button9.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button9.gif')" src="button8.gif" style="border: 0" width="100" /> <!‐‐ MSComment="ibutton" fp‐style="fp‐btn: Simple Line 3; fp‐font‐size: 18; fp‐font‐color‐
normal: #0000FF; fp‐font‐color‐hover: #FFFFFF; fp‐font‐color‐press: #0000FF; fp‐transparent: 1" fp‐
title="Mobile" ‐‐> </a> <span class="auto‐style1">&lt;&gt;</span> <a href="index.htm"> <img id="img2" alt=" Labtop" height="20" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button1C.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button1A.gif')" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button1B.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button1B.gif')" src="button1A.gif" style="border: 0" width="100" /><!‐‐ MSComment="ibutton" fp‐style="fp‐btn: Simple Line 3; fp‐font‐size: 18; fp‐
font‐color‐normal: #0000FF; fp‐font‐color‐hover: #FFFFFF; fp‐font‐color‐press: #0000FF; fp‐
transparent: 1" fp‐title=" Labtop" ‐‐> </a></h1> <h1 align="center" class="Stil1">Haus &amp; Gartenservice Reichardt GbR</h1> <h1 align="center" class="Stil8">Willkommen in der Zukunft </h1> <h1 align="left" class="Stil1">Sie befinden sich auf den optimierten Seiten für Mobil‐Server. <!‐‐ end #header ‐‐> </h1> </div> <div id="mainContent"> <h1 class="Stil3"> Warum eine optimierte Webseite?</h1> <h1 class="Stil6">Durch die Programmierung und Codierung der Webseite ‐ wird die Benutzerfreundlichkeit auf Geräten wie Apple iPad ‐ Microsoft Surface ‐ Amazon Kindle und in anderen modernen Browsern ‐ auf kleineren Bildschirmen erhöht. </h1> <p class="Stil2">Leider sind die Webseiten für die Nutzung von Smartphones und Tablets anders gestrickt (programmiert) als herkömliche Webseiten. Deshalb mussen die Webseiten für die Nutzung von Mobilen Geräten spezifisch optimiert werden. Ungeachtet dessen ‐ dass es noch wenige andere Möglichkeiten gegeben hätte.</p> <p><span class="Stil2">Ihrem Verständnis vorausgesetzt ‐ haben wir uns kurzum Entschieden ‐ zu unserer bisherigen Webseite für Laptops und PC ‐ unseren Kunden und Interessenten eine Webseite für die Mobile Anwendung zur Verfügung zu stellen. </span><br /> </p> <h2>Auch die neuen Seiten sind unserem Standard treu geblieben.</h2> <p>Unser Service und Angebote im handwerklichen Bereich sind geblieben ‐ die wir seit 2002 stetig ausgebaut haben. </p> <p>Die Umstellung hat uns jedoch inspiriert unser Wissen über die Bereitstellung unserer schnellen Seiten ‐ auch dem zukünftigen Markt auf Online‐Nivau weiter anzupassen.</p> <p><strong>Was hat uns dazu veranlasst.</strong></p> <p>In den letzten Jahren ‐ haben sich immer mehr Spam‐Mails in unseren E‐Mail‐Konten breit gemacht. Unsere Seiten haben wir deshalb als Maßnahme verschlüsselt. Hierfür bitten wir um Mithilfe und Verständnis. </p> <!‐‐ end #mainContent ‐‐></div> <div id="footer"> <p class="auto‐style2">©<span class="auto‐style3">2012 Dienstleistungsservice Reichardt GbR ‐ Alle Rechte vorbehalten &lt;&gt;&nbsp; <a href="mailto:[email protected]?subject=Anfrage"> <img id="img3" alt="Kontakt" height="20" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button4.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button2.gif')" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button3.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button3.gif')" src="button2.gif" style="border: 0" width="100" /><!‐‐ MSComment="ibutton" fp‐style="fp‐btn: Simple Line 3; fp‐font: Times New Roman, Times, serif; fp‐font‐size: 18; fp‐font‐color‐normal: #0000FF; fp‐font‐color‐hover: #FFFFFF; fp‐
font‐color‐press: #0000FF; fp‐transparent: 1" fp‐title="Kontakt" ‐‐></a></span></p> <!‐‐ end #footer ‐‐></div> <!‐‐ end #container ‐‐></div> </body> </html>