Skip to main content

Hogyan hozzunk létre egy címkefelhőt a webhelyen CSS használatával

Jason Pontin: Can technology solve our big problems? (Lehet 2024)

Jason Pontin: Can technology solve our big problems? (Lehet 2024)
Anonim

A címkefelhő a tételek listájának vizuális ábrázolása. Gyakran láthatja a címkék felhőit a blogokon. A Flickr oldalakkal népszerűvé vált.

A címkefelhők egy olyan listák listája, amelyek méretekben és súlyokban (néha színben is) módosulnak bizonyos mérhető attribútumtól függően. A legtöbb címkefelhő a népszerűség vagy az adott címkével ellátott oldalak számán alapul. De létrehozhat címkefelhőt a webhelyen található olyan elemek listájából, amelyeknek legalább két megjelenítési módja van. Például:

  • A cikkek listája abc sorrendben a cikkek népszerűségét jelző stílusokkal.
  • A webhelyek listája ábécés sorrendben a stílusokkal, jelezve, hogy melyik tetszik legjobban.
  • A webes szerkesztők felsorolása az árrendben szerepel a stílusokkal, jelezve, hogy a közelben minden egyes előre meghatározott kritériumkészletet tartalmaz.
  • A baráti listát a stílusok jelzik a távolság a házat az övék.

Mit kell felépíteni egy tagfelhőt?

Könnyű felépíteni egy címkefelhőt, csak két dolgod van:

  • Az elemek listája (például webes cikkek, webhelyek vagy barátai)
  • Minden elemre vonatkozó mérés (például napi oldalnézetek, 1-10-es rangsor, vagy távolság a házadhoz).

A legtöbb címkefelhő a linkek listája, így segít, ha minden elemhez hozzá van rendelve egy URL. De ez nem szükséges vizuális hierarchiát létrehozni.

A népszerű linkek címkefelhőinek létrehozásához szükséges lépések

Webhelyünk olyan cikkeket tartalmaz, amelyek minden nap megtekinthetik az oldalnézeteket, és ez egy egyszerű metrika, amellyel létrehozhatunk címkefelhőt. Tehát ehhez a példához hozzon létre egy címkefelhőt a cikkem listájából, amely a webhelyem legfontosabb 25 cikke a 2007. január 1-jei héten.

  1. Határozza meg, hány szintet szeretne a hierarchiában.

    Bár lehet, hogy annyi szint van a felhőben, mint a listán szereplő elemek, ez fárasztóan kódolt, és a különbségek nagyon minimálisak lehetnek. Azt javaslom, hogy a hierarchiában legfeljebb 10 szint legyen.

  2. Határozza meg az egyes szintek vágási pontjait.

    Lehet, hogy olyan egyszerű, mint az oldalnézeteinek naponta történő vágása 1/10 szeletbe - pl. ha a webhelyének legnagyobb oldala naponta 100 oldalmegtekintést kap, akár 100+, 90-100, 80-90, 70-80, stb. szeletelhetnénk. Az oldalnézeteimet ilyen módon vágtam fel.

  3. Sorolja fel az elemeket az oldalnézeti sorrendben, és adjon nekik egy rangot a 2. lépés alapján

    Ne aggódjon, ha nincsenek olyan elemei a résidőkben, amelyek csak a felhő érdekesebbé teszik.

  4. A listát ábécé sorrendben (vagy bármilyen másfajta rendezést szeretne használni) használja.

    Ez teszi az érdeklődést a felhőnek. Ha elhagyja rangsorolás szerint, akkor csak egy lista lesz a legmagasabb tételekkel a legalsóbb alján.

  5. Írja be a HTML-kódot úgy, hogy a rang egy osztályszám.

    class = "tag4"> Streaming audio fájlok hozzáadása

  6. Ez az!

Miután megadta a HTML-t az egyes elemek listájához és a megjeleníteni kívánt sorrendhez, akkor döntést kell hoznia. A hivatkozásokat egy bekezdésbe teheti, és készen áll. De ez nem szemantikailag megjelölve, és bárki, aki nem érte el a CSS címke felhőjét, csak egy nagy hivatkozási bekezdést látna. Az ilyen típusú lista HTML-je így fog kinézni:

Ehelyett javasoljuk, hogy hozzon létre címkefelhőt egy rendezetlen listával. Ez még egy sor HTML és CSS kód, de biztosítja, hogy a tartalom olvasható legyen, függetlenül attól, hogy kik érkeznek hozzá. A HTML így fog kinézni:

De hol vannak a Stílusok a Tag Cloud számára

Most jutunk el a szórakoztató részhez - a CSS stílusokhoz. Amikor megcímkéz egy címkefelhőt, általában megváltoztatja a betűméretet és a betűk súlyát. Módosíthatja a betűtípus színét, a hátteret vagy bármilyen más stílusú attribútumot is, de a méret és a tömeg hagyományos.

10 stílusosztályra van szükséged, egy minden rangsorban:

Szeretnénk néhány stílust magába foglalni a felhőben is: központosítsuk a felhő szövegét, állítsuk be a vonalmagasságot úgy, hogy a felhő olvasható legyen, és győződjön meg róla, hogy a horgonycímkéknek nincsenek kitöltve:

Végül, ha a szemantikus stílusmódot használja (pl. A rendezetlen listát), akkor még két sor CSS-t kell hozzáadnia ahhoz, hogy a lista ne legyen golyó, és nem indítva: