Lag en tilpassbar ramme med HTML5 - dummies

Før du lager en ramme for et nettsted som vil bli vist på iPhone og iPad, er det nyttig å tenke fremover om hvordan du vil at sidene dine skal se når du legger til stilene. Dette er hvor wireframes virkelig kan hjelpe.

I de følgende figurene ser du tre forskjellige wireframe-design på forsiden av en enkel bloggwebside. Den første er for iPhone, og de følgende to er for iPad (en for liggende modus og den andre for portrett modus).

La oss utforske tre relativt enkle wireframe-motiver som ville være ideelle for en grunnleggende blogg. Wireframe-design, som de som vises, kan hjelpe deg når du lager en ramme for nettstedet ditt i HTML.

Når du bestemmer deg for hvordan du skal utvikle nettstedet ditt, må du huske på at du kan opprette tre helt forskjellige HTML-sider, hver med sitt eget stilark for å oppnå disse tre forskjellige skjermer.

Hvis du tok den ruten, må du bruke enhetsdeteksjonsskript, et komplisert program som kan oppdage typen enhet som besøkende bruker på nettstedet ditt, og deretter henvise dem til den beste versjonen av hver side for den enheten. Hvis du designer et mobilnettsted som trenger å nå det bredeste publikum, er det den beste måten å gå.

Fordelen med å fokusere på iPhone og iPad er at du ikke trenger å gå til alle problemer med å opprette enhetsdeteksjonsskript. Det er fordi Safari-nettleseren på iPhone og iPad kan lese flere CSS-filer, noe som mange andre mobiltelefonbrowsere ikke klarer.

Så du kan bruke CSS til å lage design som fungerer bra på de nyeste nettleserne på stasjonære og bærbare datamaskiner, samt iPhone og iPad.

Selv om du kan opprette helt forskjellige sider for visning i hver enhet, er det mest effektive alternativet å lage en side i HTML og deretter bruke tre forskjellige sett med stilark for å justere designet. Med det målet i tankene, må du først opprette en side Framework, og bruk deretter CSS til å lage forskjellige design fra den ene HTML-siden.

Nå er det den delen som kan virke litt gal hvis du ikke allerede er kjent med alt du kan gjøre med CSS. Den samme HTML-koden kan brukes til å lage alle tre designene vist i figurene. Plasseringen av elementene, som for eksempel, er gjort med CSS.