Erstellen Sie ein Adaptable Framework mit HTML5

Bevor Sie einen Rahmen für eine Website zu erstellen, die auf dem iPhone und iPad angezeigt wird, ist es hilfreich, voraus zu denken, wie Sie möchten, dass Ihre Seiten zu suchen, wenn Sie die Stile hinzufügen. Dies ist, wo Wireframes kann wirklich helfen.

In den folgenden Figuren finden Sie drei verschiedene Drahtgitter-Designs für die Titelseite eines einfachen Blog-Website - die erste für das iPhone ist, und die beiden folgenden sind für das iPad (eine für Landscape-Modus und die andere für Portrait-Modus).

bild0.jpgimage1.jpgimage2.jpg

Lassen Sie uns drei relativ einfachen Drahtmodell-Designs erforschen, die für eine grundlegende Blog wäre ideal. Wireframe-Designs, wie die, die sehen, können Sie helfen, führen, wie Sie einen Rahmen für Ihre Website in HTML erstellen.

Wie Sie entscheiden, wie Sie Ihre Website zu entwickeln, denken Sie daran, dass Sie drei völlig verschiedene HTML-Seiten zu erstellen, von denen jedes mit einem eigenen Stylesheet diese drei verschiedenen Displays zu erreichen.

Wenn Sie diesen Weg nahm, müssten Sie ein Gerät Erkennungsskript verwenden, ein kompliziertes Programm, das den Typ des Geräts durch die Besucher Ihrer Website verwendet erkennen kann und sie dann für das Gerät die beste Version jeder Seite lenken. Wenn Sie eine mobile Website sind zu entwerfen, das breiteste Publikum zu erreichen muss, das ist der beste Weg zu gehen.

Der Vorteil der Fokussierung auf das iPhone und iPad ist, dass Sie kein Gerät-Erkennung zu schaffen Skript, um alle die Mühe machen müssen. Das ist, weil die Web-Browser Safari auf dem iPhone und iPad können mehrere CSS-Dateien, was viele andere Handy-Browser sind nicht in der Lage zu lesen.

So können Sie CSS verwenden, um Designs zu erstellen, die gut auf Desktop- und Laptop-Computern auf den neuesten Browsern funktionieren, sowie das iPhone und iPad.

Obwohl Sie ganz andere Seiten für die Anzeige in jedem Gerät zu erstellen, ist die effizienteste Möglichkeit, eine Seite in HTML zu erstellen und dann drei verschiedene Sätze von Stylesheets verwenden, um das Design anzupassen. Mit diesem Ziel vor Augen, erstellen Sie zuerst eine Seite Framework und dann CSS verwenden, um verschiedene Designs aus, dass ein HTML-Seite erstellen.

Nun, hier ist der Teil, der ein wenig verrückt erscheinen können, wenn Sie nicht bereits vertraut mit all den Dingen, die Sie mit CSS tun können. Die gleiche HTML-Code kann alle drei der Designs in den Figuren dargestellt zu schaffen verwendet werden. Die Anordnung der Elemente, wie die Seite, ist mit CSS getan.

Menü