Lekcja XIII :: Dodawanie grafiki - WebSS Studio - Projektowanie stron www
Dodawanie grafiki w CMS Joomla 1.0.x Dodawanie grafiki w CMS Joomla 1.0.x

Lekcja XIII - Dodawanie grafiki

Skąd wziąć grafiki do umieszczenia w witrynie?
Ogólne, ale bardzo dobre pytanie. Bo dotyka ważnej kwestii - pochodzenia grafiki publikowanej w serwisach. Najpierw jednak odpowiedź na pytanie "bez podtekstów".

Wszelkiego typu materiały graficzne, które chcesz wykorzystać w swojej witrynie, musisz przesłać najpierw na serwer. Jest to równie prosta czynność, jak każda inna w zarządzaniu witryna opartą na joomli. Przygotowane wcześniej grafiki przesyłasz na serwer za pomocą przeglądarki internetowej do specjalnego obszaru zasobów, który nazywamy Biblioteką mediów [ang. Media manager].

Po zainstalowaniu joomli w Bibliotece mediów znajduje się kilkanaście przykładowych obrazów, które możesz opublikować w swoim serwisie! Są one udostępnione użytkownikom joomli na warunkach bezpłatnie na warunkach Powszechnej Licencji Publicznej GNU GPL.

W ten sposób nawiązaliśmy do drugiej, nieco ukrytej treści pytania: praw własności.

Publikując cokolwiek w Internecie, musisz przestrzegać przepisów prawa, w tym jednego z podstawowych praw człowieka - praw własności. Dostępność różnorodnych materiałów w Internecie i łatwość kopiowania powoduje, niestety, że bardzo częste są sytuacje naruszania autorskich praw własności.

Zanim więc zaczniesz publikować cokolwiek w Internecie, zapoznaj się np. z krótkim artykułem Michała Paluchowskiego: Prawo autorskie opublikowanym w serwisie NetHut.PL.

Tak więc druga odpowiedź na tytułowe pytanie brzmi: możesz stworzyć obrazki, wykonać zdjęcia, otrzymać je od kogoś, kupić z prawem do publikacji. Nie możesz natomiast np. pobrać obrazu z innej witryny i opublikować go u siebie, jeśli nie uzyskasz na to zgody właściciela.

Jakie grafiki można umieszczać w witrynie?
Ilustracje przeznaczone do umieszczenia na stronie internetowej różnią się nieco od tworzonych w innych celach. Kilka właściwości ma znaczenie w przypadku ilustracji przeznaczonych do publikacji w Internecie. Poszukaj informacji na ten temat w Sieci lub w podręcznikach. Na początku powinieneś wiedzieć, że jedna z tych właściwości jest format graficzny.

Najpowszechniej stosowanymi współcześnie formatami obrazów są: JPG, PNG i GIF, a w przypadku animacji SWF.

W Bibliotece mediów możesz przechowywać pliki w 9 standardowych formatach, nie tylko graficznych:

  • .jpg - plik obrazu.
  • .png - plik obrazu.
  • .gif - plik obrazu.
  • .bmp - plik obrazu.
  • .swf - plik animacji Flash.
  • .doc - dokument Microsoft Word.
  • .xls - arkusz Microsoft Excel.
  • .ppt - prezentacja Power Point.
  • .pdf - dokument Adobe Acrobat.

Raz wczytany do Biblioteki mediów dokument może być wykorzystany wielokrotnie. Może być wstawiony do dowolnego artykułu, a także udostępniony do pobrania np. w katalogu linków.

Jak przesłać pliki z grafikami na serwer do Biblioteki mediów?
Aby przesłać pliki z grafikami lub jakiekolwiek inne do Biblioteki mediów:

  • W panelu administracyjnym wybierz w menu opcje Witryna => Biblioteka mediów [Site => Media Manager]. Otworzy się okno zarządzania plikami.
  • Z listy rozwijanej wybierz katalog, do którego chcesz wczytać nowy plik.
  • Kliknij przycisk Przeglądaj [Browse] obok pola Wczytaj [Upload]. Znajdziesz się w standardowym oknie przeszukiwania dysku swojego komputera.
  • Przejdź do katalogu, w którym znajduje się obraz lub inny plik, który chcesz przesłać. Zaznacz go wskaźnikiem myszki. Kliknij przycisk OK lub Otwórz.
  • Powrócisz do okna Biblioteki mediów. Kliknij przycisk Wczytaj [ang. Upload] znajdujący się pod belką górnego menu. Wybrany obraz lub dokument zostanie wczytany i od tego momentu będzie dostępny w bibliotece w katalogu, do którego został wczytany.

Jak umieścić obraz lub zdjęcie w artykule?
Do umieszczania obrazków w tekście służy przycisk: Wstaw obraz [ang. Insert Image], umieszczony poniżej każdego pola tekstowego w edytorze tekstów.

Ważna uwaga: W pasku narzędzi edytora tekstu również znajdziesz przycisk Wstaw/Edytuj obraz. Choć możesz z niego także skorzystać, raczej wystrzegaj się tej "pokusy". To nie jest standardowy sposób wstawiania obrazów do artykułów!

Właściwy, standardowy sposób wstawiania obrazu do tekstu polega na:

  • oznaczeniu miejsca, w którym ma być umieszczony obrazek, specjalnym znacznikiem - możesz go wpisać ręcznie albo skorzystać z przycisku Wstaw obraz
  • określeniu w zakładce Grafika właściwości obrazka, który ma być wstawiony w oznaczone miejsce.

Aby wstawić obraz w artykule:

  1. Ustaw kursor myszki w tym miejscu tekstu, w którym chcesz umieścić obraz,
  2. Kliknij przycisk Wstaw obraz lub wpisz kod znacznika: {mosimage} - słowo mosimage w nawiasach klamrowych, bez żadnych spacji.
  3. Przejdź po prawej stronie ekranu do zakładki Grafiki [Image]
  4. Na liście rozwijanej Podkatalog [Sub-folder] zaznacz katalog, w którym znajduje się potrzebny Ci obraz. W polu listy powyżej ukaże się wykaz dostępnych obrazów.
  5. Zaznacz ten, który chcesz wstawić do artykułu. Na dole pojawi się jego miniatura.
  6. Kliknij przycisk Dodaj [Insert]. Nazwa obrazu zostanie wstawiona do wykazu Grafiki w artykule [Content Images].
  7. Kliknij nazwę dodanego obrazu. Do pola tekstowego Źródło [Source] zostanie wpisana nazwa i położenie pliku z obrazem.
  8. W kolejnych polach sprecyzuj właściwości wyświetlania obrazu:
    • Określ Wyrównanie [Align] względem tekstu. Pierwsza opcja - brak [none] spowoduje umieszczenie obrazu miedzy blokami (akapitami) tekstu. Druga opcja - lewa [Left] umieszcza obraz po lewej stronie tekstu, trzecia - środek [Center] - umieszcza obraz w tekście, w miejscu wstawienia znacznika {mosimage}, a czwarta - prawa [Right] - umieszcza obraz po prawej stronie akapitu.
    • Wpisz Tekst zastępczy [Alt Text]: np. tytuł ilustracji. Tekst alternatywny jest wyświetlany, gdy kursor myszki znajdzie sie nad obrazem oraz w przypadku, gdy użytkownik wyłączy w swoje przeglądarce wyświetlanie obrazów albo gdy z jakichś powodów obraz nie zostanie prawidłowo odczytany. Tekst zastępczy jest również odczytywany przez mechanizmy wyszukiwarek internetowych.
    • W polu Obramowanie [Border] określ w pikselach grubość ramki wokół obrazu.
  9. Możesz także:
    • wypełnić pole Podpis [Caption] tekstem objaśniającym, który ukaże się przy ilustracji,
    • określić w polu Polożenie [Position] umiejscowienie podpisu.
    • określić Wyrównanie [Caption Align] podpisu.

 

W następnej lekcji znajdziesz odpowiedzi na pytania:

  • Jak przygotować Joomla 1.0.x do Exportu bazy
  • Jak wykonać standardowy Export i Import bazy SQL z phpMyAdmin
  • Jak ustawić poprawnie kodowanie języka w phpMyAdmin
  • Dobry sposób na Bazę
  • Jak przygotować bazę do niestandardowego importu
  • Specyficzna edycja pliku SQL.
  • Import tabel do bazy SQL.
  • Skrypt PHP do importu zawartości tabel.

Administratorem marki WebSS Studio jest
Polish Business Club Sp. z o.o.

Adres do korespondencji
Świętojańska 11 lok. 4
08-110 Siedlce

WebSS Studio ©2016 All rights reserved.