Ako vkladať obrázky do Dreamweaveru

Minimalistické nástroje na úpravu obrázkov Dreamweaveru vám umožňujú vykonávať základné úpravy obrázkov, ako je zmena veľkosti a orezanie. Tieto nástroje nájdete v Inšpektorovi vlastností.

V Dreamweaveri nevytvárate obrázky. Na tento účel poskytuje Adobe Illustrator (pre umelecké diela, grafický text, obrázky na pozadí stránky, navigačné ikony atď.) a Photoshop (na prípravu fotografií pre web), ako aj ďalšie nástroje. Vo všeobecnosti sa držte pri príprave obrázkov pre web v týchto programoch.

Ak chcete vložiť obrázky, uistite sa, že pracujete v zobrazení Návrh (alebo v zobrazení Rozdelené s kurzorom na strane okna Návrh). Máte dve základné cesty: Vložiť zo zariadenia alebo použiť techniku ​​kopírovania a vkladania. V oboch prípadoch musíte byť v zobrazení Návrh (vyberte Zobraziť → Návrh; alebo v prípade rozdeleného zobrazenia vyberte Zobraziť → Kód a návrh), aby ste videli obrázky pri ich vkladaní alebo vkladaní.

Je pravdepodobné, že stránka HTML, do ktorej vkladáte obrázok, bude obsahovať nejaký text. Prvým krokom je teda zistiť, kde chcete, aby sa obrázok zobrazil.

Na rozdiel od tlačového dizajnu nie sú obrázky na webových stránkach umiestnené na konkrétnych miestach. To privádza dizajnérov do šialenstva.

Ak teda chcete vložiť súbor obrázka z počítača na otvorenú webovú stránku HTML v aplikácii Dreamweaver, postupujte takto:

Kliknite v okne dokumentu na miesto, kam chcete vložiť obrázok.

V tomto kroku zistíte, kam vo vašom HTML kóde bude vložený obrázok. Opäť, kde a ako sa obrázok zobrazí, bude definované pomocou CSS.

Vyberte Vložiť → Obrázok.

V dialógovom okne Vybrať zdroj obrázka, ktoré sa otvorí, prejdite na ľubovoľný súbor vo svojom počítači a vyberte ho.

Ak sa vybratý obrázok nachádza mimo priečinka lokality, zobrazí sa užitočné dialógové okno s výzvou na uloženie kópie obrázka do koreňového priečinka lokality Dreamweaver.

Kliknite na tlačidlo Áno.

Kliknite na tlačidlo Uložiť v dialógovom okne Kopírovať súbor ako.

Definujte atribúty prístupnosti.

V predvolenom nastavení sa pred konečným vložením obrázka na stránku zobrazí dialógové okno Atribúty zjednodušenia ovládania obrázkových značiek v aplikácii Dreamweaver.

Pole Alternatívny text je najdôležitejšou z dvoch možností v tomto dialógovom okne. Zobrazuje text, ktorý sa číta nahlas v čítacom softvéri pre návštevníkov so zrakovým postihnutím, a tiež sa zobrazuje v prostrediach prehliadania, kde je zobrazovanie obrázkov zakázané. Alternatívny text môže a často by mal obsahovať veľké a malé písmená, medzery a špeciálne znaky.

Ak sú súčasťou vašej cieľovej skupiny návštevníci so zrakovým postihnutím alebo ľudia v prostrediach prehliadania, ktoré nepodporujú obrázky, môžete zvážiť vytvorenie súborov HTML s podrobnejšími popismi obrázkov. Takéto súbory sú prepojené s obrázkom definovaním prepojenia v poli Dlhý popis v dialógovom okne Atribúty prístupnosti značiek obrázka.

Kliknutím na OK vložte obrázok.

V tomto bode ste vložili iba obrázok. Dizajn stránky, vrátane umiestňovania obrázkov a plynulého textu okolo nich, sa riadi pomocou CSS