الاستخدام الرائع لقوائم HTML في تصميم المواقع

يمكنك العثور على قوائم مصممة بشكل جيد في جميع أنحاء الإنترنت. وقد المصممين استخدامها لعدة عقود ل تنسيق معلومات الصفحة والتخطيطات, وفي موقع الويب اليوم ، يمكنك رؤية الإبداع الكبير في كيفية استخدام مصممي الويب للقوائم. وتشمل هذه القوائم الملاحة ، وصلات الملف الشخصي ، والمحفوظات ، والمهام / قوائم المراجعة ، وأطنان من الاستخدامات الأخرى!

في هذا المنشور ، سأقدم أنواعًا مختلفة من قوائم HTML ، مع نصائح حول تصميمها ، خاصة حول كيفية القيام بذلك أضف ميزة فريدة إلى قائمتك. وسأخذك أيضًا إلى أمثلة قليلة من مواقع الويب ذات تصاميم قوائم رائعة ، وفي النهاية ستحصل على قائمة بمواقع الويب التي تحتوي على قوائم HTML مصممة بشكل جيد. ليس هناك شك في كيفية جعل قوائم مظهرك تبدو فريدة ، ودعونا نبدأ في تحقيق أقصى استفادة منها اليوم!

عناصر القائمة

يقفز مصممو الويب باستمرار من عربة إلى أخرى ، مما يتسبب في تغيير أنماط موقع الويب بمرور الوقت ، لكن القوائم صمدت أمام اختبار الزمن وقد تكون موجودة في ابتكار شبكة الويب العالمية في المستقبل.

قبل التحقق من الأمثلة ، أريد تغطية بضع نقاط بقوائم HTML. هناك بعض الأنواع المختلفة للقوائم التي يمكنك استخدامها في أعمال التصميم الخاصة بك. غالبية مصممي الويب يركزون على قوائم غير مرتبة التي تفتح مع

العلامة ، ولكن هناك أيضًا نوعان مختلفان أقل شيوعًا: قوائم مرتبة و تعاريف البيانات. لقد ذهبت إلى مزيد من التفاصيل أدناه.

قوائم غير مرتبة (

)

ربما أحد العناصر الأكثر استخدامًا في معايير HTML4 / HTML5. ستقوم القوائم غير المرتبة بإخراج البيانات بنفس طريقة قائمة الأوامر ، ومع ذلك أنت لن ترى أي علامات رقمية إلى الجانب. بدلا من ذلك يتم إعطاء كل عنصر دائرة صغيرة أو القرص وتقسيمها على خط جديد. هذا الرمز يمكن أيضًا تغييرها مع خاصية نوع قائمة القائمة وجدت في CSS.

فيما يلي رمز المثال للقائمة غير مرتبة:

 
 
البند 1
 
البند 2
 
البند 3
 
 

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

في الغالب ستجد قوائم غير مرتبة في منتصف مقالات الويب أو إرشادات التثبيت. لاحظ ذلك لا تقوم Google وبرامج البحث الأخرى بمعالجة محتوى صفحتك بشكل مختلف, بحيث يجب ألا تتأثر عملية تحسين محركات البحث بصرف النظر عن نوع القائمة التي تختارها.

قوائم مرتبة (

)

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

• ) سوف تملي كيف يتم تقديم البيانات.

  فيما يلي رمز المثال الخاص بالقائمة المطلوبة:

   
   
  البند 1
   
  البند 2
   
  البند 3
   
   

  من الممكن ايضا تغيير العداد من الأرقام العادية إلى حفنة من الخيارات الأخرى. وتشمل هذه حروف أبجدية و الأرقام الرومانية, على سبيل المثال لا الحصر. سيستخدم مصممو الويب قائمة مرتبة لقوائم المحتوى المحددة. وصفة البيانات, مهمات يوميه, المفضلة, أو أعلى / الأخيرة المستخدمين المسجلين هي مجرد أمثلة قليلة. كثيرا ما سترى تعليقات المدونة بنيت باستخدام قوائم مرتبة للحفاظ على كل تعليق في تسلسل مرقمة.

  قوائم تعريف البيانات (

  )

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

  ) غالبًا ما يساء فهمه المبرمجون اليوم. في HTML4.01 المواصفات استخدمت قوائم البيانات ل إقران العناصر مع أوصافها. هذه كانت تسمى قوائم التعريف.

  فيما يلي رمز المثال لقائمة تعريف البيانات:

   
   
  البند 1
   
  وصف
   
  البند 2
   
  وصف
   
  البند 3
   
  وصف
   
   

  ولكن مع HTML5 المواصفات الجديدة أعطيت قوائم البيانات نسخة. لا توجد أي اختلافات في بناء الجملة في كيفية استخدام العناصر ، ولكن تم تحديث الغرض منها كـ قائمة الوصف التي تتكون من واحد أو أكثر من مصطلحات البيانات (

  ) متبوعًا بتعريف واحد أو أكثر من البيانات (

  ).

  مثال قوي من مقال HTML5 الطبيب هو قائمة بيانات التعريف المنسقة. داخل واحد واحد دل عنصر القائمة كنت تحديد مصطلح, مثل اسمك ، ثم كل لاحقة علامة التعريف يمكن أن تصف البيانات عنك ، ربما عمرك ، والمهنة ، المدينة / المدينة الحالية ، وما إلى ذلك في نهاية المطاف أي مجموعة من البيانات مع أزواج المفتاح / القيمة تناسبها بشكل جيد في قائمة الوصف. يمكنك استخدام أكثر من مصطلح بيانات واحد في القائمة ، لكن W3C ينص على ذلك يجب أن يكون كل مصطلح فريدًا في القائمة.

  الآن بعد أن قمنا بتحديد أنماط القائمة الثلاثة الشائعة ، دعنا ننتقل إلى بعض الأمثلة! ابتكر مصممو الويب قوائمهم على مدار الأعوام الأخيرة. لقد فهرست 7 من مواقعي المفضلة أدناه مع التركيز بشكل خاص على استخدامهم الإبداعي للقوائم.

  قائمة غير مرتبة بسيطة الملاحة

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

  

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

  مباشرة أسفل هذا سترى روابط التنقل الفرعية الخاصة بهم. تؤدي قائمة التنقل هذه إلى فئات المدونات مثل Social Media أو Tech. وترد كل من القوائم غير مرتبة داخل HTML5