Ako pridať obrázky na svoj web v Dreamweaveri

Pridanie obrázka na vašu webovú stránku sa môže na prvý pohľad zdať takmer magické, pretože proces je s Dreamweaverom taký jednoduchý. Výzvou webovej grafiky nie je jej pridávanie na vaše stránky, ale vytváranie dobre vyzerajúcich obrázkov, ktoré sa rýchlo načítavajú v prehliadači vášho diváka.

Na vytváranie, konverziu, úpravu a optimalizáciu obrázkov potrebujete ďalší program, napríklad Photoshop, Photoshop Elements alebo Fireworks. Optimalizácia obrázkov zmenší veľkosť súborov, aby sa vaše obrázky stiahli rýchlejšie. Dreamweaver poskytuje niektoré základné nástroje na úpravu obrázkov, ale väčšinou používate Dreamweaver na vkladanie a umiestnenie obrázkov na stránku.

Dreamweaver zjednodušuje umiestňovanie obrázkov na vaše webové stránky a poskytuje niekoľko spôsobov, ako to urobiť:

• Kliknite na ikonu Obrázky na paneli Bežné vkladanie a potom vyberte obrázok pomocou dialógového okna Vložiť obrázok.

• Na paneli Súbory kliknite na názov obrázka a presuňte ho na stranu, na ktorej sa má obrázok zobraziť.

• Použite ponuku Vložiť.

Ak nemáte po ruke obrázok JPEG, GIF alebo PNG optimalizovaný pre web, môžete si stiahnuť bezplatné obrázky, ktoré sú už optimalizované.

Ak chcete umiestniť obrázok na webovú stránku pomocou ponuky Vložiť, postupujte podľa týchto pokynov:

Otvorte existujúcu stránku alebo vytvorte a uložte novú stránku.

Umiestnite kurzor na miesto, kam chcete vložiť obrázok na stránke.

Obrázky môžete vložiť do ľavého horného rohu nového prázdneho súboru a obrázky môžete vložiť do

značky a prvky na webovej stránke, ale nemôžete len umiestniť obrázok do stredu stránky bez použitia ďalších značiek HTML alebo formátovania CSS na jeho umiestnenie.

Vyberte Vložiť → Obrázok → Obrázok.

Zobrazí sa dialógové okno Select Image Source.

Prejdite a nájdite obrázok, ktorý chcete vložiť.

V závislosti od vášho počítačového systému si môžete obrázky pri vkladaní zobraziť rôznymi spôsobmi. Tu sú tri bežné možnosti:

• Na počítači so systémom Windows XP vyberte položku Miniatúry z rozbaľovacieho zoznamu ponuky Zobraziť napravo od poľa Hľadať, čím zobrazíte verzie miniatúr všetkých obrázkov v ľubovoľnom otvorenom priečinku. Môžete tiež zobraziť jeden náhľad ľubovoľného vybratého obrázka úplne vpravo v dialógovom okne.

• Na počítači so systémom Windows Vista alebo Windows 7 vyberte možnosť ikony (Malé ikony, Stredné ikony, Veľké ikony alebo Extra veľké ikony) z rozbaľovacieho zoznamu ponuky Zobraziť napravo od poľa Hľadať, aby sa zobrazili miniatúry všetky obrázky v ľubovoľnom otvorenom priečinku. Môžete tiež zobraziť jeden náhľad ľubovoľného vybratého obrázka úplne vpravo od dialógového okna.

• Na Macu vyberte v ľavom hornom rohu dialógového okna možnosť Zobraziť ako stĺpce. Úplne vpravo v dialógovom okne si môžete pozrieť jeden náhľad ľubovoľného vybratého obrázka.

  

  Kredit: Fotografie od Casey Stoll

Ak chcete vložiť obrázok, dvakrát kliknite na názov obrázka alebo kliknite raz a potom kliknite na tlačidlo OK.

Ak vložíte obrázok na stránku a obrázok sa neuloží do priečinka lokálnej lokality, Dreamweaver vás vyzve s dialógovým oknom s upozornením a ponúkne skopírovanie obrázka do priečinka lokálnej lokality. Mnohí dizajnéri vytvárajú podpriečinok s názvom obrázky v priečinku lokálnej lokality, kde ukladajú všetky obrázky na svojej lokalite, ale ak chcete, môžete obrázky usporiadať do viacerých podpriečinkov.

Ak chcete zobraziť a upraviť vlastnosti obrázka, vyberte obrázok na svojej webovej stránke.

Možnosti obrázka sa automaticky zobrazia v inšpektorovi vlastností v spodnej časti stránky, keď je vybratý obrázok.

Kredit: Fotografia Casey Stoll

Keď vložíte súbor obrázka na stránku, v skutočnosti nepridáte kópiu obrázka na stránku; vytvoríte odkaz na obrázok. Základný kód vyzerá podobne ako kód odkazu z jednej stránky na druhú.

Odkazy na obrázky aj odkazy zahŕňajú názov súboru a cestu zo stránky k tomuto súboru. V podstate vytvárate pokyn pre webový prehliadač, aby našiel obrázok, keď zobrazí stránku.

Ak chcete zobraziť obrázok na svojej webovej stránke, musíte pri publikovaní webovej lokality odovzdať stránku aj obrázok. Ak vaše obrazové súbory a stránky, ktoré na tieto súbory odkazujú, nie sú v rovnakom relatívnom umiestnení na vašom pevnom disku ako na vašom webovom serveri, porušíte odkaz na vaše obrázky a na vašej stránke sa zobrazí škaredá ikona Pokazený obrázok. .

Najlepším spôsobom, ako zabezpečiť, aby vaše obrázky a súbory zostali tam, kde majú vo vzájomnom vzťahu zostať, je nechať Dreamweaver, aby ich za vás sledoval. Preto je také dôležité dokončiť proces nastavenia lokality a uistiť sa, že obrázok nikdy nepresuniete ani nepremenujete, s výnimkou panela Súbory.