Dreamweaver – Preloading grafičkih elemenata

Ako kreirate složeniji web-site sa puno grafičkih elemenata, možete kao rezultat dobiti stranice koje se veoma sporo učitavaju. A ovo može da „otera“ potencijalne posetioce jer ne žele da čekaju na duga učitavanja stranica. Jedan od načina da zaobiđete ovaj problem je tzv „preloading“ (prethodno učitavanje) grafičkih elemenata.

Pokrenite Dreamweaver i idite na početnu – index.htm stranicu, ovde se nalazi mapa vašeg sajta (većina linkova). Recimo, da smo odlučili da na osnovnoj stranici imamo „roll-over“ dugmiće (dugmići kojima se menja slika kada dođete pokazivačem miša iznad njih). A za dodavanje druge slike iskoristićemo novi layer (sloj).

• Sa menija „Insert“ izaberite opciju „Layer“.
• Koristeći ručice (handlers) na ivicama sloja, postavite odgovarajuću veličinu.
• Te, izaberite meni „Insert> Roll Over Image“.

Otvoriće vam se novi dijalog prozor u kome ćemo definisati slike i gde ćemo ih povezati.

• Kliknite u polje „Original Image“ i kliknite dugme „Browse“.
• Pronađite grafički fajl na disku i pritisnite „Select“.
• Potom kliknite u polje „Roll Over Image“ i kliknite dugme „Browse“.
• Pronađite sliku i kliknite dugme „Select“.
• I na kraju, u polje „URL“ ukucajte link-adresu do željene stranice.
• Kliknite na „OK“.

Kada dodajete bilo koji grafički element stranici, pre svega ih optimizujte i na taj način smanjite potrebno vreme učitavanja. Kada ste snimili i slike, upotrebite taster „F12“ da bi učitali stranicu u browser i proverili roll-over efekat.

Da omogućili preloading ovih grafičkih elemenata, koristićemo alatku „Timeline“. Zbog ovoga dodaćemo novu stranicu našem sajtu.

• U Dreamweaver-u idite na index stranicu, kliknite desnim tasterom iznad Index stranice i izaberite „Link to new file““.
• U novom dijalog prozoru, dajte naziv fajlu (ne zaboravite da dodate ekstenziju „htm“).
• Otvorite tu novu stranicu i izaberite „Insert> Layer“.
• Kliknite unutar layer-a i izaberite „Insert> Image“.
• Pronađite sliku na disku i izaberite „Yes“ kada dobijete upit, da li želite da se fajl presnimi u root folder.
• Izaberite meni „Window> Timelines“ i „Window> Behaviors“.

Na radnoj površini će se pojaviti prozorčići „Timelines“ i „Behaviors“. Koristeći Timeline (Vremensku liniju) podesićemo da se druga slika download-uje dok posetilac gleda prvu.

Da bi se neka slika učitala pre prikaza, mora da ima određeni „behavior“, koji govori šta će da se uradi i kada.

• Kliknite sliku i u Properties prozorčiću, dajte naslov slici.
• Vratite se u prozor „Timelines“ i kliknite u liniju „behavior“ (linija ima slovo B, sa leve strane).
• Idite u prozor „Behaviors“ i kliknite znak (+), iz menija izaberite „Preload Images“.
• U novom dijalog prozoru kliknite „Browse“ i pronađite željenu sliku.
• Vratite se u prozor „Timelines“ i klinite u liniju „behavior“, ali na mesto vremena od 20 sekundi.
• U prozoru „Behaviors“ kliknite znak (+), i iz menija izaberite „Swap Image“.
• Potvrdite još opciju „Autoplay“.

Pritisnite taster „F12“ da bi videli kako sve ovo funkcioniše.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.