Hvordan Design en nettside for en iPhone

Hvordan Design en nettside for en iPhone


Siden sin første utgivelse i 2007, har iPhone vært inspirerende webdesignere å lage sider spesielt utformet for den mobile enheten. IPhone kommer med Apples Safari nettleser. I tillegg kan du laste ned Opera nettleser for iPhone fra Apples App Store. Du trenger ikke å redesigne nettstedet for iPhone, begge nettlesere kan vise websider akkurat som om du var ute på dem på en hjemmedatamaskin. Det kan være i din interesse å skape en mer stream-lined Web design som vil laste raskt på en iPhone. Du vil trenge litt kjennskap til CSS, HTML og tilgang til en iPhone for å teste din design.

Bruksanvisning

1 Åpne din nåværende nettside ".html" fil ved hjelp av HTML og CSS redigering programvare. Du trenger ikke nødvendigvis trenger spesialisert programvare --- grunnleggende tekst redaktører kan redigere både HTML og CSS-filer. I Windows kan du bruke Notepad. På Mac kan du bruke TextEdit.

2 Legg en "<link>" element til "<head>" -delen av HTML-fil som viser til en ny "Css" fil som vi vil skape. Vi vil kalle den nye filen "iphone.css." Banen til filen bør være den samme som andre "CSS" filer som brukes av siden. Det vil definere hvor du laster opp din nye CSS-filen når du er ferdig. Du må også inkludere instruksjoner for siden å bare laste denne filen hvis det blir sett på en enhet med en maksimal bredde på 480px. Her er et eksempel:

<Link rel = "stylesheet" media = "bare skjermen og (max-enhet bredde: 480px)" href = "/ iphone.css" type = "text / css" />

3 Lag en ny "CSS" filen i HTML og CSS editor. Dette vil være den filen vi vil kalle "iphone.css." Du vil skrive dette som en normal "Css" og det bør faktisk speile normal CSS styling. Det kan være lurt å åpne hoved CSS-fil som skal brukes som en referanse.

For iPhone vil du generelt ønsker å ordne alt i en enkelt kolonne og angi bredden på kolonnen til 100% så det fyller iPhone-skjermen. Det kan være lurt å skjule visse ting helt --- du kan bruke "display: none" for å hindre at disse elementene fra lasting. Web-sider er lagt ut på en annen måte. Det vil ta litt eksperimentering før du får en ny design som er tilfredsstillende.

4 Last opp din nye CSS-filen til den delen av nettstedet utpekt i "<link>" element du har lagt til HTML-fil. Last opp din revidert HTML-fil for å erstatte den opprinnelige.

Hint

  • Dette er en svært grunnleggende tilnærming. The iPhone tilbyr noen mer avanserte funksjoner for de som er interessert i å lage web-applikasjoner spesielt utviklet for enheten. Hvis det er din interesse, må du bli med iPhone Developer Program, slik at du kan utforske mulighetene med Apples gitt verktøy og tutorials.
  • Denne prosessen beskriver et design ved hjelp av en HTML-fil og en CSS-fil som du kan laste opp. Det er mulig at nettstedet ditt bruker en tjeneste som ikke er kompatible med denne metoden. Snarere enn å åpne og opprette filer på datamaskinen din, kan du bli redigere dem i nettleseren din i "kontrollpanelet" på ditt nettsted. De generelle prinsippene er de samme. Du bør opprette en "iPhone.css" fil som er utformet iPhones spesielle skjermbredden og inkludere "<link>" element for å ha din side instruere Safari for iPhone å laste den CSS-fil.