UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Zaczynamy arrow Ilustrowanie tekstów
Ilustrowanie tekstów Drukuj Email
Redaktor: Stefan Wajda [zwiastun]   
09.02.2006.
Spis treści
Ilustrowanie tekstów
Biblioteka mediów
Nie tylko grafika
Grafiki dla WWW
Dodawanie i publikowanie artykułów to najczęstsze zadanie. I chociaż nie jest skomplikowane, może wprawiać początkujących w zakłopotanie ze względu na ogromną ilość opcji udostępnianych przez Joomla! i edytor tekstów.

Ilustrowanie tekstów

Internet uwielbia obrazy. No… może nie Internet, ale internauci. Sieć zapewne życzyłaby sobie jak najmniej obrazów. Zilustrowany tekst przykuwa uwagę, a dobra ilustracja potrafi niekiedy zastąpić dziesiątki słów. Gromadzenie i przechowywanie ilustracji umożliwia w Joomla! Biblioteka mediów, a umieszczanie obrazków w tekstach funkcja Wstaw obraz [Insert Image].

Cztery kroki

Ilustrowanie tekstów w Joomla! wymaga czterech kroków:

  • wczytania pliku z grafiką,
  • oznaczenia w tekście miejsca wstawienia obrazka,
  • dodanie obrazka,
  • określenia parametrów jego prezentacji.

Krok 1: Wczytanie obrazka

Aby wczytać obrazek do zilustrowania artykułu:

  1. W edytorze artykułów kliknij w pasku narzędzi przycisk Wczytaj [Upload Image]
    Przycisk: Wczytaj
  2. W oknie dialogowym kliknij przycisk Przeglądaj [Browse]
    Wczytywanie obrazka
  3. W kolejnym oknie dialogowym wskaż plik grafiki, którą chcesz wczytać.
    Wskazanie pliku do wczytania
  4. W oknie dialogowym kliknij przycisk Wczytaj [Upload].
    Wczytanie pliku grafiki
  5. W edytorze artykułów kliknij w pasku narzędzi przycisk Zastosuj [Apply]

Obrazki zostanie umieszczony w Bibliotece mediów i od tej chwili będzie można go wykorzystać do zilustrowania dowolnego artykułu. Pliki z grafikami można umieścić w Bibliotece mediów wcześniej, o czym piszemy w dalszej części.

Krok 2: oznaczenie w tekście miejsca wstawienia obrazka

Do oznaczania w tekście miejsca, w którym chcemy umieścić obrazek służy magiczny przycisk Wstaw obraz: [Insert Image]: Przycisk: Wstaw obraz . Jest on dostępny zawsze, bez względu na to, czy korzystamy ze zwykłego edytora tekstu czy też z edytora typu WYSIWYG. Przycisk ten umieszczany jest przy dolnych krawędziach pól tekstowych.

Przycisk ten wstawia w miejscu obrazka specjalny znacznik {mosimage}, który można także wpisać ręcznie. Skorzystanie z przycisku jest jednak wygodniejsze i chroni przed popełnieniem błędu.

Aby oznaczyć miejsce, w którym ma być wstawiony obrazek:

  1. Ustaw kursor myszki w tym miejscu tekstu,
  2. Kliknij przycisk Wstaw obraz lub wpisz kod znacznika: {mosimage}

Słowo {mosimage} musi być umieszczone w nawiasach klamrowych, bez żadnych spacji.

Krok 3. Dodanie obrazka

Teraz trzeba wskazać Joomla!, który z obrazków dostępnych w Bibliotece mediów ma wstawić w miejscu znacznika {mosimage}. W tym celu:

Image

  1. Kliknij w edytorze artykułu zakładkę Grafiki [Image]
  2. Zaznacz na liście rozwijanej: Wybierz plik obrazu z galerii obrazek, który chcesz wstawić do tekstu. Na dole pojawi się jego miniatura.
  3. Kliknij przycisk Dodaj [Add]. Nazwa pliku z obrazem zostanie wstawiona do wykazu Dodane grafiki [Content Images].
  4. Jeśli dodajesz więcej, niż jeden obrazek, ustal kolejność, w jakiej mają się pojawiać w tekście. Zaznacz w tym celu nazwę obrazka i użyj jednego z przycisków: w górę [up] lub w dół [down].

Uwaga: Obrazki mogą być umieszczone w różnych katalogach Biblioteki mediów. Stąd poniżej listy Wybierz plik obrazu z galerii [Gallery Images] najduje się lista rozwijana Podfolder [Sub-folder] zaznacz katalog, w którym znajduje się plik obrazka. W polu listy powyżej ukaże się wykaz dostępnych obrazów.

Uwaga: Aby powtórzyć jakiś obrazek dwukrotnie, trzeba najpierw ustalić parametry prezentacji pierwszej kopii. Dopiero potem będzie możliwe dodanie kolejnej kopii tego obrazka.

Krok 4: Określenie parametrów prezentacji obrazka

W kolejnym kroku trzeba ustalić parametry prezentacji każdego obrazka:

Karta: Grafiki

  1. Kliknij w polu Dodane grafiki nazwę pliku z obrazkiem. W polu źródło [Source] poniżej zostanie umieszczona ścieżka dostępu do pliku z obrazkiem.
  2. Określ w polu Wyrównanie [Align] położenie obrazka względem tekstu:
    • brak [none] - zaznacz tę opcję, gdy umieszczasz niewielki obrazek wewnątrz akapitu,
    • lewa [Left] - zaznacz tę opcję, gdy chcesz umieścić obrazek w bloku tekstu po jego lewej stronie,
    • środek [Center] - zaznacz tę opcję, gdy chcesz umieścić obrazek między blokami tekstu i wyśrodkować go,
    • prawa [Right] - zaznacz tę opcję, gdy chcesz umieścić obrazek w bloku tekstu po jego prawej stronie.
  3. Opisz zwięźle obrazek w polu Tekst zastępczy [Alt Text]. Tekst ten jest wyświetlany w miejscu obrazka, gdy użytkownik wyłączy w swoje przeglądarce wyświetlanie grafiki albo gdy z jakichś powodów obraz nie zostanie prawidłowo odczytany. Tekst zastępczy jest również odczytywany przez mechanizmy wyszukiwarek internetowych.
  4. Ustal w polu Obramowanie [Border] grubość ramki wokół obrazka. Rozmiar określamy w pikselach.
  5. Kliknij przycisk Zastosuj [Aply].

Aby opatrzyć obrazek podpisem, ustal jego parametry:

  1. W polu Podpis [Caption] wpisz tekst podpisu
  2. W polu Położenie [Position]: określ miejsce podpisu - nad czy pod obrazkiem.
  3. W polu Wyrównanie [Caption Align] ustal sposób justowania podpisu:
    • brak - ustawienie domyślne, podpis będzie wyjustowany zgodnie z właściwościami określonymi w arkuszu stylów dla bloku div, zwykle od lewej,
    • środek [center] - podpis zostanie wyśrodkowany,
    • lewa [left] - podpis zostanie wyrównany do lewej krawędzi bloku z obrazkiem,
    • prawa [right] - podpis zostanie wyrównany do prawej krawędzi bloku z obrazkiem,
  4. W polu Szerokość [Width] określ w pikselach szerokość podpisu. Jeśli szerokość będzie większa, niż szerokość obrazka, po lewej i prawej stronie obrazka pojawią się marginesy.
  5. Kliknij przycisk Zastosuj [Aply].

Osadzanie grafik i animacji w edytorach tekstów

Edytory typu WYSIWYG dostarczają także własne narzędzia osadzania grafiki (ikona Wstaw obraz lub Wstaw animację Flash w edytorze TinyMCE). Dane obrazka lub animacji można również wpisać w zwykłym edytorze lub w trybie HTML edytora WYSIWYG, wg poniższych wzorów:

Znacznik obrazka lub animacji GIF:

<img src="ścieżka dostępu" alt="tekst alternatywny" 
title="tytuł obrazka" longdesc="opis obrazka" width="szerokość w pikselach" 
heigth="wysokość w pikselach" caption="Podpis" border="0" />

Znacznik animacji Flash:

<object type="application/x-shockwave-flash"
data="ścieżka_dostępu/nazwa.swf"width="100%" height="100%">
   <param name="movie" value="ścieżka_dostępu/nazwa.swf" />
   <param name="wmode" value="transparent" /></object>

Uwaga: Teksty w edytorze TinyMCE (oraz innych) można też ilustrować, korzystając z przycisku (ikony) w pasku narzędzi edytora Wstaw obraz. Niektóre z edytorów - w tym TinyMCE - pozwalają także na wstawianie do tekstu artykułów animacji Flash.



 
« poprzedni artykuł   następny artykuł »