Ako pridať obrázky do textu webstránky?

Verzia pre tlač

Čo by ste mali vedieť, pred pridávaním obrázkov?

Obrázky, ktoré chcete nahrať na web musia byť menšieho rozmeru, než ako napr. nafotí Váš digitálny fotoaparát. Skontrolujte, či obrázok, ktorý chcete nahrať na Vašu webstránku má malé rozmery a veľkosť. Odporúčame:

  • Odporúčané rozmery obrázka ŠxV: 1920×1080 (formát 16:9) alebo 1920×1200 (formát 16:10)
  • Odporúčané rozmery obrázka na stojato - ŠxV: 563x1000 alebo 647x1150

Ak obrázky budú mať podobné parametre, nahrajú sa Vám rýchlo, a návštevníkovi sa tiež načítajú veľmi rýchlo.

Kde ich môžete upravovať?

  1. Vo vašom obľúbenom grafickom editore
  2. Skúste si stiahnúť bezplatný program XnView na úpravu obrázkov (aj hromadne môžete upravovať)
  3. Skúste po jednom v on-line grafickom editore Pixlr, bez inštalácie na Váš počítač. (Len vyberiete obrázok z Vášho počítača, upravíte romzery a uložíte)

Pridanie obrázku sa skladá z troch hlavných častí:

A. Úprava obrázka

Upravte obrázok vo vašom obľúbenom grafickom editore. Dbajte na maximálnu širku obrázka. Nesmie byť šírka väčšia, než je širka obsahu web stránky!

B. Nahratie obrázka na web stránku

  1. Prihláste sa
  2. Po prihlásení kliknite na záložku "File browser"
  3. Kliknite na tlačidlo "Nahrať"
  4. Kliknite na tlačidlo "Prehľadávať" a vyhľadajte si obrázok z vášho pevného disku počítača
  5. Vyberte si obrázok a stlačte "Otvoriť/Open"
  6. Na webstránke kliknite na "Nahrať"
  7. Obrázok sa nahrá na server a musí sa zobraziť v zozname pod tlačítkami
  8. Takýmto spôsobom nahrajte všetky obrázky, ktoré potrebujete

Poznámka: Zapamätajte si názvy súborov a ich príponu (napr. mojobrazok.jpg), pretože ich budete potrebovať pri vkladaní do textu!

C. Vloženie obárzka do textu - Drupal 7

  1. Vyhľadajte a vyberte z menu stránku, ktorú chcete upravovať
  2. Kliknite na záložku upraviť pod nadpisom danej stránky
  3. Kliknite na miesto v texte, kde chcete vložiť obrázok (ak obrázok existuje, kliknite na daný obrázok 2x)
  4. Na editore medzi ikonami vyhľadajte ikonu "Insert/edit image" (ak obrázok existuje,toto okno ihneď sa zobrazilo)
  5. V riadku URL kliknite na Prehliadať server (Browse server)
  6. Otvorí sa nové okienko kde môžete nahrať obrázok. Preto kliknite vpravo hore na tlačidlo Nahrať (Upload), vyhladajte obrázok z vášho počítača a potvrdte.
  7. Do kolónky "Alternative Text" zadajte názov obrázka
  8. V zozname "Alignment" nastavte pozíciu obrázka. Zmysel má nastaviť zarovnaniek ľavému okraju (left), k pravému okraju (right) alebo do stredu (center).
  9. Stlačte "OK"
  10. Obrázok sa zobrazí v texte. Takýmto spôsobom môžete vložiť všetky obrázky do textu
  11. Nepovinne kliknite pre zobrazenie náhľadu, na náhľad na spodku stránky 
  12. Po ukončení práce kliknúť na potvrdiť na spodku stránky

 

D. Vloženie obrázka do textu - Drupal 6

  1. Vyhľadajte a vyberte z menu stránku, ktorú chcete upravovať
  2. Kliknite na záložku upraviť pod nadpisom danej stránky
  3. Kliknite na miesto v texte, kde chcete vložiť obrázok
  4. Na editore medzi ikonami vyhľadajte ikonu "Insert/edit image" 
  5. Do kolónky "Image URL" napíšte cestu a názov obrázka v tvare /files/mojobrazok.jpg, kde:
    /files - je cesta, kde ste uložili obrázok. V prípade, že ste vytvárali podpriecinok pri nahrávaní pridajte k ceste takto:
    /files/podpriecinok/mojobrazok.jpg
    mojobrazok - je presný nazov suboru
    .jpg - je prípona súboru
  6. Do kolónky "Image description" zadajte názov obrázka
  7. V zozname "Alignment" nastavte pozíciu obrázka. Zmysel má nastaviť zarovnaniek ľavému okraju (left), k pravému okraju (right) alebo do stredu (center).
  8. Stlačte "Insert"
  9. Obrázok sa zobrazí v texte. Takýmto spôsobom môžete vložiť všetky obrázky do textu
  10. Nepovinne kliknite pre zobrazenie náhľadu, na náhľad na spodku stránky 
  11. Po ukončení práce kliknúť na potvrdiť na spodku stránky

 

 
Video: http://vimeo.com/20325055

Pridať nový komentár

Filtered HTML

  • Povolené sú HTML značky: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>

Plain text

  • Nie sú dovolené žiadne HTML značky.
  • Webové a e-mailové adresy sú automaticky zmenené na odkazy.
  • Riadky a odstavce sa zalomia automaticky.

Najnovší príspevok v Blogu