Jak... po prostu zajrzyj

Na stronach z dużą ilością grafiki (lub po prostu na dużych stronach) obrazki zapisywane są do jednego pliku, a następnie z niego odczytywane, pracuję nad projektem z dosyć dużą ilością grafiki i chciałbym, żeby wszystkie ikony zapisane były do jednego pliku, jak np.

Kod:

http://net.tutsplus.com/wp-content/themes/tuts/images/global/sprite-switcher.png

.

Może mi ktoś wytłumaczyć (to się chyba indeksowanie nazywa?) jak zapisywać takie pliki i jak później je otwierać w CSS, albo chociaż jak je zapisywać, bo niestety nie znam się na graficy ani trochę, ani też z tym nie miałem do czynienia wcześniej.

Uwaga: To jest stary temat Ta dyskusja jest starsza niż 90 dni. Informacje w niej zawarte mogą już nie być aktualne

Powiem Ci jak to wygląda ze strony kodera / osoby tnącej layouty.

Tworzysz komplet ikon (i innych drobnych elementów) umieszczając je w systemie siatki (może to być jedna linia pion/poziom lub układ wielokolumnowy)
Dla wygody kodowania dobrze jest, jeśli siatka ma równe wymiary pól - ale nie jest to tak istotne.

Podczas pisania kodu w arkuszu .css przypisuje się elementom taką grafikę jako tło z odpowiednio ustawioną pozycją.
np.:

Kod html:

.ikona { background:url(obraz_ikon.png) no-repeat -30px -60px; }

No właściwie widziałem inny sposób 'rozłożenia' takiego pliku, w każdym razie dzięki.