Photoshop je dobrý nástroj na vytváranie obrazových prvkov na vašich webových stránkach , vrátane rollover tlačidlá , drop - down menu a grafikou , ktoré odkazujú na iné webové stránky . Avšak , Photoshop sám o sebe nie je tvorba www stránok náradie . Našťastie , to je relatívne ľahké exportovať prototyp do web - priateľský grafického formátu , a vytvoriť webové stránky vo formáte HTML , ktorý používa tieto prvky . Majte na pamäti , že interaktívne prvky , ako sú hypertextové odkazy , rollover tlačidiel a rozbaľovacích menu vyžadovať ďalšiu prácu . Pohybujúce sa nad základmi je veľmi závislá na aplikácii a môžu vyžadovať špecializované znalosti programovania . Veci , ktoré budete potrebovať Photoshop HTML editor webového prehliadača Zobraziť ďalšie inštrukcie základné webové stránky 1
Otvorte svoj prototyp vo Photoshope a exportovať do formátu webovej podporovanej obrazu . Zvoľte " Uložiť pre web a zariadenia " z menu Súbor . V dialógovom okne vyberte buď vo formáte JPEG , GIF alebo PNG . Vyberte kvalitu obrazu , pričom má na pamäti , že vyššia kvalita sa zvyšuje veľkosť súboru . 2
" Uložiť " súbor na disk , čo je názov , napríklad " myPrototype.jpg . "
3
Otvorte svoj HTML editor a vytvoriť novú webovú stránku . Väčšina HTML editory vytvorí webovú stránku kostru pre vás . 4
Pridať obrazový element priamo pod otvorom
značku . Obrazový prvok bude mať podobu : . 5
Uložte webovú stránku a nahrať do ľubovoľného prehliadača < . br > Beyond Basics Praha 6
Zlepšite svoj layout buď pomocou tabuľky alebo kaskádových štýlov ( CSS ) do polohy rozvrhnutie. Preferovaný spôsob je , aby sa jednotlivé vrstvy , alebo plátky , vytvorené vo Photoshope a umiestniť ich pomocou CSS . Vykonané správne , vytvára rozloženie " tekuté " , ktorá presunie rozloženie ako je prehliadač zmení veľkosť . 7
Zlepšenie rýchlosti pomocou opakujúcich sa prvkov pozadia . Vo Photoshope vytvoriť 5 - pixel - široký plátok vášho pozadia a uložte ju do súboru . Vo formáte HTML , môžete opakovať prvku pomocou atribútu pozadia vášho
,
alebo CSS štýl . Syntax pre každého prípadu líši , a tak skontrolovať HTML príručke . Uistite sa , že nastavenie pozadia atribút " opakovanie . " 8
Použitie obrazovej mapy vytvárať jednoduché odkazy z obrazu na inú webovú stránku . Podľa webovej vývojárov Gregory Hodges , vytvorte prvok v rámci
tagu, a potom definovať pre váš obrázok . Oblasť bude obsahovať súradnice obrazu prepojiť a odkaz na obrázok , ktorý chcete načítať . 9
Použite JavaScript pre vytvorenie efektu prechodu akcie a navigačné menu , ako sú rozbaľovacie zoznamy . Aj keď to môže byť náročnejšia úloha , profesionálne webové editory , ako je Dreamweaver a GoLive podporovať vytváranie rollover akcií a navigácie , takže nemusíte písať JavaScript rúk . 10
Pridať interaktívne mediálne prvky , ako sú Flash animácie , Java aplety a Shockwave súbory k zvýšeniu užívateľské skúsenosti . Použite
