چگونه یک ابر برچسب طراحی کنیم

استفاده از CSS به سبک ابر برچسب

ابر برچسب یک تصویر بصری از یک لیست از موارد است. شما اغلب ابرهای تگ را در وبلاگ ها خواهید دید. این توسط سایت هایی مانند فلیکر ساخته شده است.

ابر برچسب ها یک لیست از لینک هایی است که در اندازه و وزن تغییر می کنند (گاهی اوقات رنگ نیز) بسته به برخی ویژگی های قابل اندازه گیری. اکثر ابر برچسب ها براساس محبوبیت یا تعداد صفحاتی که با آن برچسب خاص برچسب گذاری شده اند ساخته شده اند. اما شما می توانید ابر برچسب را از هر لیستی از موارد موجود در سایت خود که حداقل دو روش برای نمایش آنها وجود دارد ایجاد کنید. مثلا:

• لیست مقالات به ترتیب حروف الفبا با سبک هایی که نشان دهنده محبوبیت مقالات هستند.
• لیستی از وب سایت ها به ترتیب حروف الفبا با سبک هایی که نشان می دهد کدامیک از بهترین ها را دوست دارید.
• لیستی از سردبیران وب که در سفارشات قیمت گذاری شده اند با سبک هایی که نشان می دهد که هر کدام از آنها یک مجموعه از معیارهای از پیش تعریف شده است.
• لیستی از دوستان با سبک هایی که نشان دهنده فاصله از خانه شما به دیگران است.

چه چیزی نیاز به ساخت ابر برچسب دارید؟

آسان ساخت یک ابر برچسب، شما فقط نیاز به دو چیز دارید:

• لیستی از موارد (مانند مقالات وب، وب سایت ها یا دوستانتان)
• اندازه گیری برای هر یک از موارد (مانند بازدید از صفحه در روز، رتبه بندی 1-10، و یا فاصله خود را به خانه).

بیشتر ابرهای تگ لیستی از لینک ها هستند، بنابراین اگر هر آیتم دارای یک URL مرتبط با آن باشد، کمک می کند. اما لازم نیست که یک سلسله مراتب بصری ایجاد کنید.

مراحل ساخت یک ابر برچسب از لینک های محبوب

سایت من دارای مقالاتی است که روزانه بازدید می کنید و این یک متریک آسان برای استفاده از یک ابر برچسب است. بنابراین برای این مثال، یک ابر تگ از لیست مقالات، 25 مقاله برتر در سایت من برای هفته اول ژانویه 2007 ایجاد خواهد شد.

1. تعیین تعداد سطوح که شما در سلسله مراتب خود می خواهید.
   1. در حالی که ممکن است سطوح مختلفی در ابر شما وجود داشته باشد، زیرا مواردی را در لیست خود دارید، برای کد بسیار مشکل است، و تفاوتها میتوانند بسیار کم باشند. توصیه می کنم داشتن بیش از 10 سطح در سلسله مراتب خود داشته باشید.
2. تصمیم گیری در نقاط قطع برای هر سطح.
   1. این ممکن است به همان اندازه ساده است که بازه های نمایش صفحه خود را در هر روز به 1/10 تکه کنید - یعنی. اگر بزرگترین صفحه در سایت شما روزانه 100 صفحه نمایش داشته باشد، می توانید آن را 100 +، 90-100، 80-90، 70-80، و غیره تزیین کنید. من به این ترتیب نمایشهای صفحه خود را خرد کردم.
3. فهرست اقلام خود را در نظر نمایش صفحه، و به آنها رتبه بر اساس مرحله 2 را
   1. نگران نباشید اگر شما در برخی از اسلات ها هیچ موردی نداشته باشید، این فقط باعث جذابیت بیشتر ابری می شود.
4. لیست خود را به ترتیب حروف الفبا (و یا هر دسته دوم که می خواهید استفاده کنید) را مرتب کنید.
   1. این چیزی است که ابر را جالب می کند. اگر شما آنرا بر اساس رتبه مرتب کنید، آن را فقط یک لیست با بزرگترین موارد بالا در پایین تا کوچکترین در پایین.
5. HTML خود را بنویسید تا رتبه یک عدد کلاس باشد. class = "tag4"> اضافه کردن فایل های صوتی جریان داده

هنگامی که شما HTML برای هر آیتم لیست فردی دارید و منظور شما می خواهید آنها را نمایش دهید، باید تصمیم بگیرید. شما می توانید لینک ها را در پاراگراف قرار دهید و شما می توانید انجام دهید. اما این به معنای معناشناختی نیست، و هر کس بدون CSS به ابر برچسب شما فقط یک پاراگراف بزرگ از پیوندها را میبیند. HTML برای این نوع لیست به نظر می رسد:

اضافه کردن فایل های صوتی صوتی برچسب های پایه برای یک وب سایت ساخت یک صفحه وب برای کاملا از دست رفته Symbolism رنگ

در عوض، من توصیه می کنم ابر برچسب خود را با استفاده از یک لیست غیر ارادی ایجاد کنید. این چند خط دیگر از کد HTML و CSS است اما تضمین می کند که محتوای قابل خواندن بدون توجه به اینکه چه کسی می آید برای مشاهده آن. HTML مانند این است:

• اضافه کردن فایل های صوتی جریان
• بهترین نرم افزار طراحی وب
• ساخت یک صفحه وب برای کاملا از دست رفته
• نمادگرایی رنگ

  اما کجا هستند سبک برای ابر برچسب

  حالا ما به بخش سرگرم کننده سبک های CSS می رویم. هنگامی که یک ابر برچسب ایجاد می کنید، معمولا اندازه فونت و وزن فونت را تغییر می دهید. شما همچنین می توانید رنگ فونت یا پس زمینه یا هر ویژگی دیگر را تغییر دهید، اما اندازه و وزن سنتی است.

  شما نیاز به 10 کلاس سبک، یکی برای هر رتبه برچسب:

  #cloud a.tag1 {font-size: 0.7em؛ فونت وزن: 100؛ } #cloud a.tag2 {font-size: 0.8em؛ وزن فونت: 200؛ } #cloud a.tag3 {font-size: 0.9em؛ وزن فونت: 300؛ } #cloud a.tag4 {font-size: 1.0em؛ وزن فونت: 400؛ } #cloud a.tag5 {font-size: 1.2em؛ فونت وزن: 500؛ } #cloud a.tag6 {font-size: 1.4em؛ وزن فونت: 600؛ } #cloud a.tag7 {font-size: 1.6em؛ وزن فونت: 700؛ } #cloud a.tag8 {font-size: 1.8em؛ فونت وزن: 800؛ } #cloud a.tag9 {font-size: 2.2em؛ وزن فونت: 900؛ } #cloud a.tag10 {font-size: 2.5em؛ وزن فونت: 900؛ }

  من دوست دارم برخی از سبکها را در اطراف خود قرار دهم: مرکز متن ابر، ارتفاع خط را تنظیم کنید تا ابر قابل خواندن باشد و مطمئن شوید که برچسبهای لنگر هیچ کدام از آنها را ندارند:

  #cloud {padding: 2px؛ خط ارتفاع: 3m؛ متن تراز: مرکز؛ } #cloud a {padding: 0px؛ }

  در نهایت، اگر شما با استفاده از روش یکنواخت معنایی (یعنی لیست غیر ارادی)، شما باید دو خط دیگر از CSS را اضافه کنید تا لیستی از گلوله نداشته باشند و از هم جدا نشوند:

  #cloud {margin: 0؛ } #cloud li {display: inline؛ }