Menu >> Strona Startowa
Witam... Gry |

Licznik

Zegar

Webmaster-info

Webmaster

Grafika...

Grafika

O rozdziale: Trudno sobie wyobrazić strony internetowe bez grafiki, gdyż często jest ona z jednej strony niezbędnym elementem informacyjnym, z drugiej zaś nadaje stronom efektowny wygląd, jeśli tylko autor umie nią zręcznie operować. W rozdziale prezentujemy niebędne techniki dotyczące wstawiania ilustracji.

Uwagi ogólne

Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów, bez udziału samej grafiki.

W Internecie zostały przyjęte trzy podstawowe standardy graficzne - GIF, JPG, a w ostatnich latach także PNG (Portable Network Graphics) - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Warto też zwrócić uwagę na fakt, że Internet Explorer akceptuje formaty BMP i WMF - nie powinno się ich jednak umieszczać w Internecie, ale mogą być z powodzeniem stosowane w archiwach HTML Help opartych na kontrolce Internet Explorera. W ostatnim okresie spotyka się też grafiki w wektorowym, opartym na XML formacie SVG (Scalable Vector Graphics), aczkolwiek na razie (2006 r.) obsługuje je natywnie jedynie Opera, zaś inne przeglądarki wymagają zewnętrznych wtyczek.

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać:

<img src="plik_graficzny" alt="nazwa alternatywna">

Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki.

 

Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka.

Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np.

<img src="xxxxxxx" width="342" height="353" alt="xxxxx">

Jeśli z jakichś powodów zależy nam na deformacji oryginalnych wymiarów, możemy je ręcznie zmienić, podając arbitralnie inne rozmiary, na przykład:

<img src="xxxxxxxx" height="150" width="200" alt="tekst">

 

Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy również o malejącej rozdzielczości obrazka na ekranie przeglądarki.

 

Obramowania i odstępy

W starszych wersjach HTML stosowano atrybut border, za pomocą którego nadawano grafice obwódkę. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS, o znacznie większych możliwościach - obramowanie border lub obwódka outline.

<img src="../grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="border: 5px red solid; ">

<img src="../grafika/sufinka.jpg" width="171" height="177" alt="teks" style="outline: 5px green double; ">

 

Poprzednio stosowano atrybuty hspace i vspace, za pomocą których tworzono dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami. Obecnie są to atrybuty przestarzałe, które zastąpiono stylami CSS - marginesem globalnym (margin) lub cząstkowym (margin-top, margin-bottom, margin-left, margin-right).

<img src="sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-left: 50px; margin-right: 50px; ">

Ten tekst  jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten  o 100 pikseli

<img src="sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-top: 50px; margin-bottom: 50px; ">

Pozycja grafiki

W starszych wersjach HTML stosowano atrybut align (left, center, right), za pomoca którego ustawiano grafikę przy lewym lub prawym marginesie, względnie na środku wiersza. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS.

Grafika jako blok

Przede wszystkim zwróć uwagę, że grafika nie jest elementem blokowym, zajmującym na wyłączność miejsce w wierszu, lecz tzw. zastępowanym, i możliwe jest ustawienie kilku grafik obok siebie.

Sufi w tulipanachSufi w tulipanach

Chcąc umieścić grafikę jako samodzielny element w wierszu, można by ją umieścić w elemencie blokowym div, ustawionym po lewej czy prawej stronie lub na środku wiersza.

<div style="text-align:center; ">
<img src="../grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach">
</div>

Sufi w tulipanach

Jeśli nie zapewnisz osobnego miejsca grafice, sąsiadująca z nią inna grafika zostanie ustawiona w tym samym wierszu.

Możesz też nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z polecenia stylów display:block;

<img src="http://hitech-net.pl/images/iconki/Internet%20Explorer%207.png" width="171" height="176" alt="Sufi w tulipanach" style="display:block; ">

Pozycjonowanie poziome

Grafikę często umieszcza się w ramach akapitu, a wtedy ujawnia swój naturalny charakter, czyli ukazuje się w jednym wierszu w treścią akapitu.

Przykład:

Najpierw rozpoczniemy akapit, potem umieścimy w nim zdjęcie IE Sufi w tulipanach i wreszcie zakończymy akapit.

Oczywiście takie rozwiązanie jest rażące z estetycznego punktu widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku), natomiast treść akapitu oblewa ilustrację. Więcej informacji znajdziesz w dziale o stylach - przepływanie elementów.

Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ".

<img src="http://hitech-net.pl/images/iconki/Internet%20Explorer%207.png" width="171" height="176" alt="IE" style="float: right; ">

I rezultat:

Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Sufi w tulipanachTreść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku.

Analogicznie, aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl style="float: left; ".

<img src="http://hitech-net.pl/images/iconki/Internet%20Explorer%207.png" width="171" height="176" alt="IE" style="float: left; ">

Sufi w tulipanachTreść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku.

Jak widać, ilustracja jest wtedy swobodnie oblewana z lewej strony przy definicji float:right i z prawej strony przy definicji float:left.





Komentarze do tej strony:
Komentarz pochodzi od Solotuya, 08.04.2012, o 22:08 (UTC):
C'est en effet niais. Les emballages oenndnt vers la subtilite9, voire la discre9tion, alors que la pub francophone est carre9ment grossie8re. (Cela dit la pub anglophone donne dans la lourdeur...)Un de mes profs e0 la maeetrise rappelle souvent que mieux un objet/produit/discours est cone7u, moins son promoteur aura besoin des outils publicitaires pour le diffuser efficacement dans un marche9. Il argumente que d'autres facteurs (re9putation par exemple) viendront agir et cre9er une aura de de9sirabilite9 et d'inte9grite9 autour de l'artefact. La publicite9 est souvent pere7ue comme un subterfuge et plus elle en beurre e9pais , plus c'est un signe que l'on a voulu nous masquer quelque chose .Vivement, les discours promotionnels honneates et simples. Que l'on nous donne une pause des ces niaiseuses me9taphores et re9cits infantiles!



Dodaj komentarz do tej strony:
Twoje imię:
Twoja wiadomość:

desing Webmaster-info

 
 
=> Chcesz darmową stronę ? Kliknij tutaj! <=