A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Szia, kedves olvasók SdelaemBlog.ru blog. Ma beszéljünk arról, hogyan kell optimalizálni a blog vagy website letöltési sebesség, kombinálva a képeket egy internetes projekt az úgynevezett sprite.







A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Amire szüksége van, hogy optimalizálja a letöltési sebesség az oldalakon az erőforrás? Jelenleg keresők egyre változtatásokat annak érdekében, hogy a szóban forgó több releváns. És az egyik olyan tényező, amely befolyásolja a helyzet a kérdés, csak a sebesség oldalak betöltése a projektben, mert a felhasználó nem akarja megvárni, amíg a letöltés tartalmát, egyszerűen bezárja az erőforrás, és keresni egy másik forrás a megfelelő információkat, és a keresők megérteni ezt, ezért vegye véve ez a paraméter oldalakon. Ezért érdemes figyelni rá, és növeli a letöltési sebességet.

Milyen pontokat figyelembe vesszük ezt a cikket:

Mi az a CSS-sprite (sprite)?

CSS-sprite - egy grafikus fájlt (kép), mely otthont ad számos más képeket, amelyek viszont megjelenik az oldalon, a fájl style.css. Azt hiszem, már tudta, hogy mit sprite-t? Hogy csökkentsék a forgalmat, és felgyorsítja oldal betöltése oldalon.

Milyen eszközök szükségesek, hogy hozzon létre egy css-sprite?

Ahhoz, hogy a sprite, meg kell csak két eszközt: ez a Google Chrome böngésző és a bővítmény Sprite Me, erre a böngésző, amely segít nekünk létre a kívánt grafikai eleme.

Hogyan kell telepíteni a böngészőt, azt hiszem, meg fogja érteni, és talán még a már telepített Google Chrome, akkor csak meg kell telepíteni a bővítményt.

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

láthatjuk a demo (demonstráció a beépített modul) ezen az oldalon. Olvasd Gyakran Ismételt Kérdések (GYIK). Is, próbáld ki a munka ezt a kiegészítést, a Futtatás SpriteMe gombra.

És annak érdekében, hogy telepítse a bővítményt csak húz, tartva a bal egérgombot, SpriteMe linket a böngésző könyvjelzőit bar.

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Most, hogy kész vagyunk, és létrehozhat css-sprite.

Hogyan lehet css-sprite?

Létrehozásához, el kell menni, hogy egy weboldal vagy blog. amely optimalizálni kell. És mivel az oldalon, akkor jobb, ha a belső, mint a cikket, rá kell kattintani a lap SpriteMe.







A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Azaz, a felső ablakban tudjuk hozzáadni vagy eltávolítani a képeket a jövőben css-sprite egyszerű drag and drop linkeket. Mégis, drag and drop, akkor kényszeríteni a képeket nem tartoznak egyetlen fájlba. Ehhez egyszerűen húzza a linket aljáról az ablak tetején.

Most, hogy hozzon létre egy fájlt, akkor kell kattintani a gombra «hogy minden», vagy a top-box - «hogy sprite», és várjon, amíg a Sprite jön létre.

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Amint ezzel elkészült, le kell töltenie egy grafikai elem létre a számítógépen. Ehhez kattintson a linkre létrehozott képeket.

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

A fényképek megnyílik egy új lapon kell kinéznie. Most, egy kattintás az egér jobb gombjával, meg kell hívni egy böngésző párbeszédpanelt és válassza ki a „Kép mentése más néven ...”. és mentse az elem a számítógépen.

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Minden készen áll css-sprite, akkor csak töltsd fel a szerverre, és csatlakoztassa a szükséges css-stílus.

Hogyan lehet csatlakozni a css-sprite az oldalon?

Ahhoz, hogy a fájl kezdett dolgozni a helyszínen, szükséges az ingyenes ftp-kliens. Hogy lehet képet feltölteni a szerverre a mappában, amely tartalmazza az összes sablon képek. Ezt követően meg kell, hogy menjen vissza a böngészőt, és kattintson a gombra «kiviteli css».

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Megnyílik egy új lap, amelyet keresztbe style.css fájlt stílusok amelyeket le kell cserélni újakra, az alábbiakban felsorolt.

A fényképek Optimization, vagy hogyan lehet egy css-sprite, létrehozása, testreszabása és támogatása oldalak

Most, hogy csatlakozni egy grafikai elem, meg kell, hogy kövesse az utasításokat, hogy átírják a css-stílus. Keresse stílusok áthúzott, és helyébe újak, a helymeghatározás.

Ezt követően törölheti a képeket már nem szükséges. Így optimalizálja a képeket, és ezáltal felgyorsítja a letöltési az oldalakat az interneten projekt.

@ Gulnara:
Helló
Köszönöm.
Ahhoz, hogy ezt a témát nem használom sprite, például a kéz nem éri el a teljes normális mintát. De a jövőben, azt tervezem. Az utolsó téma a sprite használni.
Blog nem elhagyott, de a sablon igényel jelentős fejlesztése és optimalizálása.
Pro-előfizetés, nem érti. Ha nem kapott visszaigazoló levelet előfizetés, próbálja megkeresni azt a spam mappába. Úgy kellett volna jönni.

és még egy kérdés: Ha jól értem, ez a módszer magában foglalja felíró stílusok idegen fajta kapcsolat

hogy lehet-e valahogy nélküle?




Kapcsolódó cikkek