Hvordan konvertere en Photoshop Prototype til Web HTML
Photoshop er et godt verktøy for å utforme bildeelementer av nettstedet ditt , inkludert rollover-knapper , drop- down menyer og grafikk som lenker til andre nettsider . Imidlertid er Photoshop i seg selv ikke en web - side verktøy for oppretting. Heldigvis er det relativt enkelt å eksportere prototypen til en web - vennlig grafikk format , og bygge en HTML- side som bruker disse elementene . Husk at interaktive komponenter som hypertekst lenker , rollover-knapper og drop- down menyer krever ekstra arbeid. Flytte utover det grunnleggende er svært avhengig av programmet, og kan kreve spesialisert kunnskap om programmering . Du trenger Photoshop HTML Editor nettleser Vis mer Instruksjoner Basic Web Page en
Åpne prototype i Photoshop og eksportere til en web -støttet bildeformat. Velg " Lagre for Web og enheter" fra Fil-menyen . I dialogboksen velger du enten JPEG, GIF eller PNG . Velg en bildekvalitet , husk at høyere kvalitet øker filstørrelsen. 2
" Lagre" filen til disk, gi den et navn som " myPrototype.jpg . "
3
Åpne HTML editor og lage en ny nettside . De fleste HTML redaktører vil skape et skjelett nettside for deg . 4
Legg et bilde element rett under åpningen . Bildet element vil ta form : . . 5
Lagre nettsiden din og last inn alle nettlesere
Utover det grunnleggende 6
Forbedre layout ved hjelp av enten tabeller eller Cascading Style Sheets ( CSS ) til å plassere din layout. Den foretrukne metoden er å ta de enkelte lag , eller skiver , laget i Photoshop og plassere dem ved hjelp av CSS . Utført på riktig måte , skaper dette en "flytende " layout som repositions oppsettet som leseren er endret. 7
forbedre hastigheten ved hjelp av gjentatte bakgrunnselementer . I Photoshop , lage en 5 -pixel bred bit av bakgrunnen din og lagre den til fil . I HTML , kan du gjenta element ved hjelp av bakgrunnen egenskap av din , eller CSS stil . Syntaks for hvert tilfelle varierer, så sjekk din HTML guide. Sørg for å sette bakgrunnen attributt til " gjenta ". 8
bruke image maps å lage enkle linker fra et bilde til en annen nettside . Ifølge webutvikler Gregory Hodges , lage en
tag , deretter definere for bildet . Området vil inneholde koordinatene for bildet for å knytte og referere bildefilen å laste. 9
Bruk JavaScript for å skape rollover handlinger og navigasjonsutstyr menyer som drop-downs . Selv om dette kan være en mer utfordrende oppgave , profesjonelle web redaktører som Dreamweaver og GoLive støtte opprettelsen av rollover handlinger og navigasjon , slik at du ikke trenger å skrive JavaScript for hånd . 10
Legg interaktive medier elementer som Flash animasjoner , Java- applets og Shockwave filer for å forbedre brukeropplevelsen. Bruk
