كيفية تصميم علامة سحابة

استخدم CSS لوضع نمط سحابة الكلمات

سحابة العلامة هو تصوير مرئي لقائمة من العناصر. سترى في الغالب سحبا للعلامات على المدونات. تم جعلها شعبية من قبل مواقع مثل Flickr.

سحابة العلامات هي قائمة بالارتباطات التي تتغير في الحجم والوزن (أحيانًا اللون أيضًا) اعتمادًا على بعض السمات القابلة للقياس. يتم إنشاء معظم علامات السحب استنادًا إلى الشعبية أو عدد الصفحات التي تم وضع علامات عليها باستخدام هذه العلامة المحددة. ولكن يمكنك إنشاء سحابة علامة من أي قائمة من العناصر على موقعك تحتوي على طريقتين لعرضها على الأقل. فمثلا:

• قائمة بالمقالات بترتيب أبجدي مع الأنماط التي تشير إلى شعبية المقالات.
• قائمة بمواقع الويب بترتيب أبجدي مع الأنماط التي تشير إلى تلك التي تفضلها.
• قائمة من محرري الويب المدرجة في ترتيب الأسعار مع الأنماط التي تشير إلى مدى قرب كل منها من مجموعة محددة مسبقًا من المعايير.
• قائمة الأصدقاء مع الأنماط التي تشير إلى المسافة من منزلك إلى منزلهم.

ماذا تحتاج لبناء سحابة بطاقة؟

من السهل إنشاء سحابة علامات ، فأنت تحتاج إلى أمرين فقط:

• قائمة بالعناصر (مثل مقالات الويب أو مواقع الويب أو أصدقائك)
• قياس لكل من العناصر (مثل مشاهدات الصفحة في اليوم ، أو ترتيبك 1-10 ، أو المسافة إلى منزلك).

معظم سحابة العلامات هي قوائم روابط ، لذلك يساعد إذا كان لكل عنصر عنوان URL مرتبط به. لكن هذا ليس مطلوبًا لإنشاء تسلسل هرمي مرئي.

خطوات لبناء علامة سحابة من وصلات شعبية

يحتوي موقعي على مقالات تحصل على مشاهدات الصفحة كل يوم ، وهذا مقياس سهل الاستخدام لإنشاء سحابة للعلامات. لذلك في هذا المثال ، سننشئ سحابة علامات من قائمة مقالات ، أهم 25 مقالة على موقعي للأسبوع من 1 يناير 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 لهذا النوع من القوائم كما يلي:

إضافة ملفات صوتية متدفقة العلامات الأساسية لموقع ويب أفضل برامج تصميم مواقع الويب إنشاء صفحة ويب لـ Lost Totally Color Symbolism

بدلاً من ذلك ، أنصحك بإنشاء سحابة العلامات باستخدام قائمة غير مرتبة. إنها بضعة أسطر من شفرة HTML و CSS ، ولكنها تضمن أن المحتوى سيكون قابلاً للقراءة بغض النظر عمن يأتي لمشاهدته. سيبدو HTML كما يلي:

• إضافة ملفات صوتية متدفقة
• العلامات الأساسية لموقع ويب
• أفضل برامج تصميم مواقع الويب
• إنشاء صفحة ويب للفقدان تمامًا
• Color Symbolism

  ولكن أين هي الأنماط لسحابة العلامات

  الآن نصل إلى الجزء الممتع — أنماط 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؛ خط الطول: 3em ؛ محاذاة النص: مركز؛ } #cloud a {padding: 0px؛ }

  أخيرًا ، إذا كنت تستخدم أسلوب التصميم الدلالية (أي القائمة غير مرتبة) ، فستحتاج إلى إضافة سطرين آخرين من CSS بحيث لا تحتوي القائمة على رموز نقطية ولا يتم وضع مسافة بادئة لها:

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