Share
I denne opplæringen skal vi være et nettsted for Mobile Safari Browser (funnet på iPhone og iPod Touch). Vi starter fra scratch i Photoshop og arbeider vår vei, trinnvis, til et ferdig produkt komplett med en animert jQuery bildeskli.
Med millioner av iPhone-brukere som får tilgang til nettet daglig, er det avgjørende for firmaet eller merkevaren å kunne tilby mobil. Brukerne bruker Mobile Safari-nettleseren, med et nettsted som er designet for enheten. I stedet for å slite med små skrifttyper, vanskelig å trykke på linker og andre bruksproblemer på nettstedet som følger med en mobil nettleser, kan vi gi våre besøkende en interaktiv opplevelse som de vil nyte.
Det er viktig for oss å gi brukerne en opplevelse de vil nyte, eller vi vil ende opp med å frustrere våre besøkende og muligens til og med føre til at de forlater nettstedet vårt og aldri kommer tilbake. Vi skal skape et nettsted som fokuserer på noen få viktige punkter. Vår side bør:
Hvis du er på en Mac, kan du laste ned iPhone SDK fra Developer.Apple.com. Registrer deg for en gratis konto med dem og last ned den nyeste versjonen av iPhone SDK med leveres med iPhone-simulatoren. En ekte iPhone eller ipod Touch vil alltid være den beste løsningen, men simulatoren fungerer bra for utviklingsformål.
Last ned denne sementteksturen fra Flickr. Ta bildet inn i et Photoshop-dokument som er 320px (bredde) med 480px (høyde). Endre bakgrunnsfargen til # 1D1D1D. Endre lagstilen på tekstur til "Multiply" og legg til en hvit til svart gradientmaske.
Høyreklikk på et lag og flatt bildet. Kopier og lim inn i et nytt vindu, slik at vi kan gjøre dette til et gjentatt bilde. Gå til Filter> Annet> Offset. Still inn horisontalverdien til +162. Bruk helbredelsesverktøyet til å rydde opp problemområdet. Lagre bildet som en jpg angi kvaliteten til 60%.
Åpne et annet Photoshop-dokument og sett det til 195px (bredde) med 75px (høyde). Lag to lag hver med en linje tegnet med linjeprogrammet. Separat linjene med en piksel. Topplinjen skal være hvit, bunnen er mørkegrå. Eksporter bildet som vi gjorde i forrige trinn. Begge bildene skal lagres under en mappe som heter "bilder"
Nå er det på tide å kode hjemmesiden. Vi skal legge til grunnkoden og deretter stil den i neste trinn. Lagre dette som index.html. Følgende kode vil gi oss grunnleggende html på hjemmesiden og lenke til et stilark som vi vil opprette.
Lorum Ipsum mobilnettsted Lorum ipsum
- Hjem
- Handle om
- Ta kontakt med
Lorem ipsum dolor
Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis autentisk irriterende i fullstendig vellyse esse cillum dolore eu fugiat nulla pariatur. Unntak sint occaecat cupidatat ikke sunt i culpa qui officia deserunt mollit anim id er laborum. Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Du er her, og du er sikker på at du er i stand til å oppnå en god tid, og du vil ikke være raskere enn du er ute etter..
Les mer…Copyright 2009
Hjem | Om | Ta kontakt med
La oss legge til litt stil ved å opprette en ny fil som heter styles.css. Følgende kode vil gi oss stil for html-koden til hjemmesiden.
Accentsconagua
html, h2, h3, h4, h5, h6, p, blockquote, pre, en, adresse, kode, img, liten, sterk, dl, dt, dd, ol, ul, li, fieldset, form, label margin: 0; polstring: 0; grense: 0; oversikt: 0; skriftstørrelse: 100%; vertikaljustering: basislinje; bakgrunn: gjennomsiktig; / * Hovedstiler * / kropp bakgrunn: # 1d1d1d url ('images / background.jpg') repeat-x; farge: #FFF; font-familie: "Arial", sans-serif; linjehøyde: 20px; skriftstørrelse: 13px; -webkit-tekststørrelsesjustering: ingen; p polstring: 10px 5px; h1 farge: # b5b5b5; skriftstørrelse: 26px; margin: 10px 5px; h1 span color: # d5ac55; h2 farge: # d5ac55; skriftstørrelse: 18px; font-weight: normal; margin-topp: 10px; polstring-venstre: 5px; # skjult display: none; .show display: inline; #readmore høyde: 30px; # readmore-knappen bakgrunn: # 000; farge: # d5ac55; skjerm: blokk; flyte: høyre; polstring: 5px 7px; tekst-align: center; tekst-dekorasjon: ingen; bredde: 76px; / * Meny stiler * / #menu ul border-bottom: 1px solid #FFF; høyde: 23px; listestil: none; margin: 0 5px; #menu ul li float: left; margin-høyre: 30px; #menu ul li a color: #FFF; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; #menu ul li.selected border-bottom: 3px solid #FFF; / * Sideshow-stiler * / #slideshow border: 1px solid # 786334; grensebunn: 1px solid # 22201d; margin-bunn: 20px; margin-topp: 10px; #lideshow ul li høyde: 174px; listestil: none; bredde: 316px; #controls posisjon: absolutt; margin-topp: -40px; listestil: none; #controls li (bakgrunn: rgb (0,0,0); bakgrunn: rgba (0,0,0,0,9); border: 2px solid # 202020; border-bottom: 1px solid # 797979; flyte: venstre; tekst-align: center; #controls li a display: block; farge: #FFF; høyde: 20px; polstring: 7px; tekst-dekorasjon: ingen; bredde: 20px; / * Footer Styles * / #footer bakgrunn: # 000; høyde: 40px; margin-topp: 10px; #footer p # copyright float: right; bredde: 100px; #footer p # sitemap bredde: 200px; #footer en color: #FFF; tekst-dekorasjon: ingen; Lagre bildet av brannbilen til en mappe som heter "imageslider" inne i mappen "bilder". Lagre bildet som img1.jpg. Dette vil bli et bilde som vises i bildetrykkeren.
Last ned Easy Slider 1.7 jQuery Slider og kopier "js" -mappen til samme mappe som vår index.html-fil. Kopier følgende kode i hodetakene dine på index.html-filen.
Du vil nå ha en fungerende hjemmeside.
Hvis du vil fjerne adressefeltet, erstatter du kroppstegnet med følgende:
Og legg til følgende metatag i hodet ditt for å håndtere zooming og tekststørrelsesproblemer.
Kopier index.html siden for å lage om siden. Fjern koden som er spesifikk for glidebryteren jQuery. Legg til følge under Les mer-knappen for å lage "sidebar".
om meg
p 123.456.7890 e [email protected] en 123 someplace ST
fugiat nulla pariatur. Unntak sint occaecat cupidatat ikke sunt i culpa qui officia deserunt mollit anim id er laborum. Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Du er her, og du er sikker på at du er i stand til å oppnå en god tid, og du vil ikke være raskere enn du er ute etter..
sosiale medier
fugiat nulla pariatur. Uncepteur sint occaecat cupidatat ikke sunt i culpa qui officia deserunt mollit anim id er laborum.
- YouTube
- Screenr
- Min plass
Lagre følgende bilde i bildemappen. Gi det navnet cat.jpg.
Deretter er det på tide å legge til noen stil på elementene inne i sidefeltet. Vi må gjøre det med noen CSS. Legg til følgende i style.css-filen din.
/ * Sidebar Styles * / #sidebar bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0.0, # e1d9ce), fargestopp (0.1, # e6e6e6)); farge: # 000; margin-topp: 10px; polstring: 0px 5px 5px 5px; #sidebar p.fade bakgrunn: url ('images / fade.jpg') repeat-x; #sidebar h2 farge: # 000; skriftstørrelse: 18px; font-weight: normal; polstring: 7px 0; #sidebar img border: 1px solid #FFF; margin: 5px 10px; .contactinfo border-bottom: 3px dotted # 656565; skjerm: blokk; farge: # 2f2f2f; skriftstørrelse: 20px; margin-venstre: 10px; .contactinfo a display: block; bakgrunn: # 646363; farge: # efaa19; flyte: høyre; tekst-dekorasjon: ingen; # sosiale lenker listestil: square; polstring: 10px 0 10px 20px; bredde: 95%; # sosiale lenker li float: right; bredde: 33%; # sosiale linker li a bakgrunn: # 646363; farge: # efaa19; polstring: 2px 4px; tekst-dekorasjon: ingen; .clear clear: both; 
Kopier siden om og kaller den kontakt.html. Legg til følgende kode i hodet på html. Det er kode for å utvide google kartet ved hjelp av APIen sin. Du trenger en Google Maps API-nøkkel hvis du skal bruke dette på en live-server. Du kan bruke en onlinetjeneste til å produsere koden hvis du ikke er komfortabel med å skrive det selv.
Bare legg til følgende kode hvor du vil at kartet skal vises.
Du er velkommen til å oppdatere menyen din slik at den passer til hver side ved å flytte den "valgte" klassen til riktig listeelement.
For videre forskning er du velkommen til å se på Engage Interactive artikkelen, samt Nettuts + tutorial.
