Share
În acest tutorial, vom proiecta un site web pentru browserul Safari Mobile (găsit pe iPhone și iPod Touch). Vom începe de la zero în Photoshop și vom lucra, pas cu pas, către un produs finalizat, cu un slider de imagine animat jQuery.
Cu milioane de utilizatori de iPhone care accesează zilnic web-ul, este esențial pentru compania sau brandul dvs. să poată furniza dispozitive mobile. utilizatorii care utilizează browserul Mobile Safari, cu un site web creat pentru dispozitivul lor. În loc să se lupte cu fonturi mici, greu de apăsat pe link-uri și alte probleme de utilizare a site-ului care vin împreună cu un browser web mobil, putem oferi vizitatorilor noștri o experiență interactivă pe care o vor bucura.
Este important pentru noi să oferim utilizatorilor noștri o experiență pe care o vor bucura sau vom ajunge să-i frustrăm pe vizitatori și, eventual, chiar să-i facem să părăsească site-ul nostru și să nu se mai întoarcă niciodată. Vom crea un site care se concentrează pe câteva puncte-cheie. Site-ul nostru ar trebui:
Dacă sunteți pe Mac, puteți descărca aplicația SDK iPhone de la Developer.Apple.com. Înscrieți-vă pentru un cont gratuit împreună cu aceștia și descărcați cea mai recentă versiune a setului de instrumente iPhone SDK, livrat împreună cu simulatorul iPhone. Un adevărat iPhone sau ipod Touch va fi întotdeauna cea mai bună soluție, dar simulatorul funcționează bine în scopuri de dezvoltare.
Mai întâi descărcați această textură de ciment de pe Flickr. Aduceți imaginea într-un document Photoshop dimensiuni 320px (lățime) de 480px (înălțime). Modificați culoarea de fundal la # 1D1D1D. Modificați stilul stratului pe textură în "Multiplicați" și adăugați o mască de gradient alb-negru.
Faceți clic dreapta pe un strat și aplatizați imaginea. Copiați și lipiți într-o fereastră nouă pentru a putea transforma această imagine într-o imagine repetată. Accesați Filtrare> Altele> Offset. Setați valoarea orizontală la +162. Utilizați instrumentul de vindecare pentru a curăța zona cu probleme. Salvați imaginea ca jpg setați calitatea la 60%.
Deschideți un alt document Photoshop și setați-l la 195px (lățime) cu 75px (înălțime). Creați câte două straturi fiecare cu o linie desenată cu instrumentul de linie. Separați liniile cu un pixel. Linia de sus trebuie să fie albă, iar fundul este gri închis. Exportați imaginea așa cum am făcut în pasul anterior. Ambele imagini trebuie salvate sub un dosar numit "imagini"
Acum este momentul să codificați pagina de pornire. Vom adăuga codul de bază și apoi îl vom schimba în pasul următor. Salvați aceasta ca index.html. Următorul cod ne va oferi html de bază al paginii de pornire și vom conecta la o foaie de stil pe care o vom crea.
Site-ul mobil Lorum Ipsum lorum ipsum
- Acasă
- Despre
- a lua legatura
Lorem ipsum dolor
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure în reprimarea în voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care se consideră că nu se află în culpa qui officia deserted mollit anim id est laborum. Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Lorem ipsum dolor stați amet, consecutiv de adipiscare elit, sed do eiusmod temporar incididunt ut labore și dolore magna aliqua.
Citeste mai mult…Copyright 2009
Acasă | Despre | a lua legatura
Să adăugăm un anumit stil creând un nou fișier numit styles.css. Următorul cod ne va da stil pentru codul HTML al paginii de pornire.
Accentsconagua
html, body, div, span, obiect, h1, h2, h3, h4, h5, h6, p, blockcote, pre, adresa, cod, img, li, forma de câmp, forma, eticheta marja: 0; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; aliniere verticală: linia de bază; fundal: transparent; / * Principalele stiluri * / corp fundal: # 1d1d1d url ('images / background.jpg') repeat-x; culoare: #FFF; font-family: "Arial", sans-serif; linia-înălțime: 20px; font-size: 13px; -webkit-text-size-adjust: nici unul; p padding: 10px 5px; h1 culoare: # b5b5b5; font-size: 26px; margine: 10px 5px; h1 span culoare: # d5ac55; h2 culoare: # d5ac55; font-size: 18px; font-weight: normal; margin-top: 10px; padding-left: 5px; #hidden display: none; . afișați display: inline; #readmore height: 30px; # readmore-button fundal: # 000; culoare: # d5ac55; afișare: bloc; float: dreapta; padding: 5px 7px; text-align: centru; text-decoration: nici unul; lățime: 76px; / * Stiluri de meniu * / #menu ul border-bottom: 1px solid #FFF; înălțime: 23px; listă: nu există; margine: 0 5px; #menu ul li float: stânga; margin-dreapta: 30px; #menu ul li a culoare: #FFF; text-decoration: nici unul; text-transform: majuscule; #menu ul li.selected border-bottom: 3px solid #FFF; / * Stiluri de vederi laterale * / #slideshow border: 1px solid # 786334; frontieră-fund: 1px solid # 22201d; margin-bottom: 20px; margin-top: 10px; #slideshow ul li înălțime: 174px; listă: nu există; lățime: 316px; #controls position: absolute; margin-top: -40px; listă: nu există; #controls li fundal: rgb (0,0,0); fundal: rgba (0,0,0,0,9); frontieră: 2px solid # 202020; frontieră de fund: 1px solid # 797979; plutește la stânga; text-align: centru; #controls li a display: bloc; culoare: #FFF; înălțime: 20px; padding: 7px; text-decoration: nici unul; lățime: 20px; / * Stiluri de subsol * / #footer background: # 000; înălțime: 40px; margin-top: 10px; #footer p # copyright float: right; lățime: 100px; #footer p # sitemap lățime: 200px; #footer a culoare: #FFF; text-decoration: nici unul; Salvați imaginea camionului de incendiu într-un dosar denumit "imageslider" din interiorul directorului "imagini". Salvați imaginea ca img1.jpg. Aceasta va fi imaginea afișată în cursorul de imagini.
Descărcați cursorul Easy Slider 1.7 jQuery și copiați folderul "js" în același director ca fișierul index.html. Copiați următorul cod în etichetele capului din fișierul index.html.
Acum veți avea o pagină de pornire funcțională.
Pentru a elimina bara de adrese, înlocuiți eticheta corporală cu următoarele:
Și adăugați următoarea meta-tag în capul tău pentru a rezolva problemele de zoom și de redimensionare a textului.
Copiați pagina index.html pentru a crea pagina aproximativă. Eliminați codul specific pentru glisorul jQuery. Adăugați următoarea sub butonul citiți mai mult pentru a crea "bara laterală".
despre mine
p 123.456.7890 e [email protected] un 123 Someplace ST
fugiat nulla pariatur. Cu excepția cazului în care se consideră că nu se află în culpa qui officia deserted mollit anim id est laborum. Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Lorem ipsum dolor stați amet, consecutiv de adipiscare elit, sed do eiusmod temporar incididunt ut labore și dolore magna aliqua.
social media
fugiat nulla pariatur. Cu excepția cazului în care persoanele care se află în culpa nu dispun de ofițer de muncă.
- Stare de nervozitate
- YouTube
- Screenr
- Spatiul meu
Salvați următoarea imagine în folderul cu imagini. Denumire cat.jpg.
Apoi este timpul să adăugați un anumit stil elementelor din interiorul barei laterale. Va trebui să facem acest lucru cu unele CSS. Adăugați următoarele în fișierul dvs. styles.css.
/ * Stiluri bara laterală * / #sidebar fundal: -webkit-gradient (liniuță, stânga sus, fund stânga, stop color (0.0, # e1d9ce), oprire color (0.1, # e6e6e6)); culoare: # 000; margin-top: 10px; umplutură: 0px 5px 5px 5px; #sidebar p.fade (fundal: url ('images / fade.jpg') repeat-x; #sidebar h2 culoare: # 000; font-size: 18px; font-weight: normal; umplutura: 7px 0; #sidebar img frontieră: 1px solid #FFF; margine: 5px 10px; .contactinfo border-bottom: 3px punctat # 656565; afișare: bloc; culoare: # 2f2f2f; font-size: 20px; margin-stânga: 10px; .contactinfo a display: bloc; fundal: # 646363; culoare: # efaa19; float: dreapta; text-decoration: nici unul; # linkuri sociale list-style: square; umplutură: 10px 0 10px 20px; lățime: 95%; # linkuri sociale li float: right; lățime: 33%; # linkuri sociale li a background: # 646363; culoare: # efaa19; padding: 2px 4px; text-decoration: nici unul; . clar clar: ambele; 
Copiați pagina aproximativă și denumiți-o contact.html. Adăugați următorul cod în capul html-ului dvs. Este codul de extindere a hărții Google utilizând API-ul acestora. Veți avea nevoie de o cheie API Google Maps dacă doriți să o utilizați pe un server live. Puteți utiliza un serviciu online pentru a produce codul dacă nu vă este confortabil să-l scrieți singur.
Pur și simplu adăugați următorul cod în care doriți să apară harta dvs..
Nu ezitați să vă actualizați meniul pentru a se potrivi fiecărei pagini prin mutarea clasei "selectate" la elementul de listă corespunzător.
Pentru mai multe cercetări, nu ezitați să consultați articolul Engage Interactive, precum și tutorialul Nettuts +.
