Lag en Tilpasningsdyktig Work med HTML5

February 7  by Eliza

Før du oppretter et rammeverk for et nettsted som vil bli vist på iPhone og iPad, er det nyttig å tenke fremover om hvordan du vil at sidene dine for å se når du legger stilene. Det er der trådmodeller kan virkelig hjelpe.

I de følgende tallene, ser du tre ulike trådramme design for forsiden av en enkel blogg nettside - den første er for iPhone, og følgende to er for iPad (en for liggende modus og den andre for portrettmodus).

Lag en Tilpasningsdyktig Work med HTML5
Lag en Tilpasningsdyktig Work med HTML5
Lag en Tilpasningsdyktig Work med HTML5


La oss utforske tre relativt enkle wireframe design som ville være ideelt for en grunnleggende blogg. Rammeverk design, for eksempel de som vises, kan bidra til å guide deg som du oppretter et rammeverk for nettstedet i HTML.

Som du bestemmer deg for hvordan du kan utvikle nettstedet ditt, må du huske på at du kan lage tre helt forskjellige HTML-sider, hver med sin egen stil ark for å oppnå disse tre forskjellige skjermer.

Hvis du tok den ruten, vil du trenger å bruke en detektor manus, et komplisert program som kan oppdage hvilken type enhet som brukes av besøkende til nettstedet ditt, og deretter henvise dem til den beste versjonen av hver side for den enheten. Hvis du designer en mobil nettsted som trenger å nå bredest publikum, det er den beste veien å gå.

Fordelen med å fokusere på iPhone og iPad er at du ikke trenger å gå til alle bryet med å lage en enhet-gjenkjenning script. Det er fordi Safari-nettleseren på iPhone og iPad kan lese flere CSS-filer, noe mange andre mobiltelefon nettlesere er ikke i stand til.

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

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

Nå her er den delen som kan virke litt gal hvis du ikke allerede er kjent med alle de tingene du kan gjøre med CSS. Den samme HTML-kode kan benyttes for å lage alle de tre utførelser som er vist i figurene. Posisjoneringen av elementene, slik som til siden, er gjort med CSS.