Skapa en anpassningsbar Work med HTML5

March 1

Innan du skapar en ram för en webbplats som kommer att visas på iPhone och iPad, är det bra att tänka framåt på hur du vill att dina sidor att se ut när du lägger till stilar. Det är där wireframes verkligen kan hjälpa.

I följande figurer, ser du tre olika wireframe designer för första sidan av en enkel blogg hemsida - den första är för iPhone, och följande två är för iPad (en för liggande läge och den andra för stående läge).

Skapa en anpassningsbar Work med HTML5

Skapa en anpassningsbar Work med HTML5

Skapa en anpassningsbar Work med HTML5

Låt oss undersöka tre relativt enkla wireframe mönster som skulle vara perfekt för en grundläggande blogg. Wireframe konstruktioner, såsom de som visas, kan hjälpa dig när du skapar en ram för din webbplats i HTML.

Som du bestämmer hur du utvecklar din webbplats, kom ihåg att du kan skapa tre helt olika HTML-sidor, alla med sin egen formatmall för att uppnå dessa tre olika skärmar.

Om du tog den vägen, skulle du behöva använda en enhet upptäckt manus, ett komplicerat program som kan upptäcka den typ av enhet som används av besökare till din webbplats och sedan hänvisa dem till den bästa versionen av varje sida för den enheten. Om du designar en mobil webbplats som behöver nå bredast publik, det är det bästa sättet att gå.

Fördelen med att fokusera på iPhone och iPad är att du inte behöver gå till alla problem med att skapa en enhetsdetektering manus. Det beror på webbläsaren Safari på iPhone och iPad kan läsa flera CSS-filer, något som många andra mobiltelefon webbläsare inte kan.

Så kan du använda CSS för att skapa mönster som fungerar bra på de senaste webbläsarna på stationära och bärbara datorer samt iPhone och iPad.

Även om du kan skapa helt olika sidor för visning i varje enhet, är det mest effektiva alternativet för att skapa en sida i HTML och sedan använda tre olika uppsättningar av stilmallar för att justera designen. Med detta mål i sikte, först skapa en sida Work, och sedan använda CSS för att skapa olika mönster från att en HTML-sida.

Nu här är den del som kan verka lite galen om du redan är bekant med alla de saker du kan göra med CSS. Samma HTML-kod kan användas för att skapa alla tre av de mönster som visas i figurerna. Positioneringen av de faktorer, såsom den åt sidan, sker med CSS.