يعد إنشاء التنقل في الموقع أحد العناصر المهمة لتطوير الويب. يساهم التنقل المصمم جيدا في سهولة استخدام الموقع ، كما يساعد الزوار في العثور بسرعة على المعلومات التي يحتاجون إليها. في هذا الدليل خطوة بخطوة ، سننظر في الخطوات الأساسية وعلامات هتمل اللازمة لإنشاء تنقل وظيفي وأنيق لموقع الويب.
تتمثل الخطوة الأولى في إنشاء التنقل في تحديد بنية الموقع ووضع عناصره في مستند هتمل. عادة ما يتم وضع التنقل في الرأس أو أسفله. يمكن أن يتكون التنقل من روابط لأقسام أو صفحات مختلفة من الموقع. يمكن تخصيص مظهر الملاحة باستخدام كس.
واحدة من علامات هتمل الرئيسية المستخدمة لإنشاء التنقل هي
في هذا المثال ، يتم إنشاء تنقل يتكون من أربعة عناصر: الصفحة الرئيسية ، عنا ، جهات الاتصال والخدمات. كل عنصر هو رابط إلى الصفحة المقابلة للموقع. يمكنك استخدام كس لتعيين أنماط التنقل. يمكنك أيضا إضافة وظائف إضافية ، على سبيل المثال ، نمط نشط لصفحة محددة أو قائمة منسدلة لأقسام الموقع.
- كيفية إنشاء موقع على شبكة الإنترنت الملاحة في أتش تي أم أل: دليل خطوة بخطوة للمبتدئين
- 1. باستخدام قائمة العناصر غير مرتبة (
- )
- 2. باستخدام قائمة العناصر المطلوبة (
- )
- 3. باستخدام الجدول (
- )
- اختيار هيكل الملاحة
- 1. القائمة الرئيسية
- 2. لوحة جانبية
- 3. القائمة العلوية
- 4. فتات الخبز
- 5. القائمة المنسدلة
- 6. القائمة السفلية
- 7. الروابط في النص
- إنشاء قائمة التنقل
- تطبيق الروابط
- إضافة الأنماط
- التكيف مع الأجهزة المحمولة
- الاختبار والتحسين
- سؤال وجواب
كيف يمكنني إنشاء التنقل في الموقع في أتش تي أم أل?
ما هي العلامات التي يجب استخدامها لإنشاء التنقل في الموقع في أتش تي أم أل?
كم عدد الروابط التي يمكنني إضافتها إلى التنقل في الموقع في أتش تي أم أل?
يعد التنقل في الموقع جزءا مهما من صفحة الويب التي تساعد المستخدمين على التنقل عبر محتوى الموقع بشكل فعال. هناك عدة طرق لإنشاء قائمة التنقل في الموقع في هتمل. في هذا البرنامج التعليمي خطوة بخطوة للمبتدئين ، سننظر في الطرق الرئيسية.
1. باستخدام قائمة العناصر غير مرتبة (
معلومات عنا
جهات الاتصال
2. باستخدام قائمة العناصر المطلوبة (
معلومات عنا
جهات الاتصال
3. باستخدام الجدول (
معلومات عنا
الخدمات
جهات الاتصال
في هذا الدليل التفصيلي ، قمنا بتغطية الطرق الأساسية لإنشاء قائمة تنقل على صفحة الويب. يمكنك اختيار أي من الخيارات المقترحة حسب احتياجاتك وتفضيلاتك. كن مبدعا وأضف أفكارك إلى التنقل في الموقع لجعلها مريحة وجذابة للمستخدمين.
اختيار هيكل الملاحة
عند إنشاء التنقل لموقع الويب الخاص بك ، من المهم اختيار الهيكل الصحيح الذي سيسمح للمستخدمين بالتنقل بسهولة عبر الموقع والعثور على المعلومات التي يحتاجون إليها. فيما يلي بعض أنواع هياكل التنقل التي قد تكون مفيدة:
1. القائمة الرئيسية
القائمة الرئيسية هي بنية التنقل الرئيسية وعادة ما توجد في أعلى الصفحة. يحتوي على روابط إلى الأقسام الرئيسية لموقعك ويسهل العثور على معلومات محددة.
2. لوحة جانبية
يمكن أن يكون الشريط الجانبي مفيدا للتنقل الإضافي. غالبا ما يحتوي على روابط لأقسام مهمة ، بالإضافة إلى ميزات إضافية مثل البحث أو المرشحات.
3. القائمة العلوية
يمكن استخدام القائمة العلوية للتنقل عبر الأقسام الثانوية لموقعك أو للوصول إلى وظائف مهمة مثل جهات الاتصال أو عربة التسوق.
4. فتات الخبز
تظهر فتات الخبز المسار من الصفحة الرئيسية إلى الصفحة الحالية وهي طريقة مفيدة لتوجيه المستخدمين في بنية موقعك.
5. القائمة المنسدلة
يمكن استخدام القائمة المنسدلة لتنظيم الأقسام الفرعية لأقسامك الرئيسية. يسمح لك بإخفاء معلومات إضافية وتقسيم التنقل إلى مجموعات أكثر ملاءمة.
6. القائمة السفلية
تحتوي القائمة السفلية على روابط لأقسام إضافية من موقعك ، مثل الصفحات التي تحتوي على معلومات قانونية أو سياسة الخصوصية.
7. الروابط في النص
يمكن استخدام الروابط في النص للانتقال إلى المواد ذات الصلة أو لتسهيل التنقل داخل الصفحة. إنها تسمح للمستخدمين بالحصول على معلومات أكثر تفصيلا حول موضوع معين.
,
و
معلومات عنا
يمكنك أيضا إنشاء قائمة تنقل بمستويات فرعية عن طريق إضافة قوائم متداخلة. للقيام بذلك ، يمكنك داخل العنصر
إنشاء قوائم متداخلة باستخدام نفس العلامات
البعثة
الخدمات
جهات الاتصال
نتيجة لذلك ، سنحصل على قائمة تنقل تحتوي على عنصر "من نحن" ، والذي يحتوي على العناصر الفرعية "السجل" و "الفريق" و "المهمة".
بعد إنشاء قائمة التنقل ، يمكنك تعيين الأنماط والتخطيط لها على صفحة ويب باستخدام كس.
تطبيق الروابط
- الروابط هي أحد العناصر الرئيسية للتنقل عبر الويب وتستخدم للتنقل من صفحة أو موقع إلى آخر. إنها تسمح للمستخدمين بالتنقل بسرعة وسهولة عبر أقسام مختلفة من موقعك أو الانتقال إلى موارد الويب الأخرى.
العلامة الرئيسية لإنشاء روابط في هتمل هي ، حيث هو اختصار للكلمة الإنجليزية" مرساة "، وهو ما يعني"مرساة".
مثال على إنشاء ارتباط:
- فيما يلي أبسط مثال على إنشاء ارتباط:
- هذا هو الرابط
- في هذا المثال:
- يفتح الرابط مع علامة
تحدد سمة هريف عنوان ورل الهدف الذي يجب أن يؤدي إليه الارتباط. في هذه الحالة ، ورل هو "https://www.example.com "
يتم وضع النص بين علامتي الفتح والإغلاق ، والتي سيتم عرضها على الصفحة كرابط. في هذه الحالة ، يكون النص "هذا رابط"
يتم إغلاق الرابط مع علامة إغلاق
يمكن أن تؤدي الروابط إلى صفحات وأقسام خارجية داخل موقعك. يمكن أن تحتوي أيضا على سمات مختلفة ، على سبيل المثال ، السمة الهدف للإشارة إلى نوع فتح الرابط (في نافذة جديدة ، في نفس النافذة ، إلخ.).
من المهم أن تتذكر أن الرابط يجب أن يكون مفيدا ومفهوما للمستخدم. تجنب استخدام عبارات غير مفيدة مثل" انقر هنا "أو"اذهب". قدم للمستخدم رابطا يصف سياق الانتقال.
- إضافة الأنماط
- لإضافة أنماط إلى التنقل في الموقع ، يمكننا استخدام أنماط مضمنة أو ملف كس خارجي.
المدمج في الأساليب:
- استخدم العلامة في قسم مستند هتمل.
- داخل العلامة ، حدد الفئات والأنماط للتنقل الخاص بك. على سبيل المثال:
ملف كس الخارجي:
إنشاء ملف كس منفصل ، على سبيل المثال الأنماط.المغلق.في مستند هتمل ، أضف السطر التالي في الكتلة:
في الأنماط.ملف المغلق ، وتحديد أنماط للملاحة الخاصة بك. فمثلا:.الملاحة المجمع {
لون الخلفية: # إف 2 إف 2 إف 2;
الحشو: 10 بكسل;
نصف قطر الحدود: 5 بكسل;
}
.رابط التنقل {
اللون: # 333;
زخرفة النص: لا شيء;
وزن الخط: غامق;
الهامش الأيمن: 10 بكسل;
}
بعد إضافة الأنماط ، سيبدو التنقل الخاص بك أكثر جاذبية وسهولة في الاستخدام.
التكيف مع الأجهزة المحمولة
- يعد تكييف موقع ويب للأجهزة المحمولة جانبا مهما من تصميم الويب الحديث. بعد كل شيء ، يستخدم المزيد والمزيد من المستخدمين الآن الأجهزة المحمولة لزيارة مواقع الويب. لذلك ، من الضروري إنشاء تنقل في الموقع يكون مناسبا للاستخدام على الشاشات الصغيرة.
- فيما يلي بعض التوصيات لتكييف الملاحة:
- استخدم رمز القائمة. تشغل مساحة أقل من القائمة الكاملة ، لذا فهي توفر مساحة على الشاشة.
- قم بإنشاء قائمة تكيفية. هذا يعني أن القائمة يجب أن تبدو جيدة على كل من الشاشات الكبيرة والصغيرة. في الوقت نفسه ، يجب أن يكون مناسبا للاستخدام بأصابعك على الأجهزة المحمولة.
- استخدم القوائم المنسدلة. سيسمح لك ذلك بعرض العديد من عناصر القائمة بشكل مضغوط دون شغل مساحة كبيرة على شاشة صغيرة.
ضع القائمة في الجزء العلوي من الشاشة. هذا المكان هو الأكثر سهولة للمستخدمين ، وسوف يرون على الفور الصفحات المتاحة على الموقع.
استخدم أسماء عناصر قائمة واضحة ومفهومة. سيساعد هذا المستخدمين على العثور بسرعة على الصفحة الصحيحة.
باستخدام هذه التوصيات البسيطة ، يمكنك إنشاء تنقل سهل الاستخدام وبديهي للمستخدمين الذين يزورون موقعك من الأجهزة المحمولة.
- الاختبار والتحسين
- بعد إنشاء التنقل على موقعك ، تحتاج إلى اختبار تشغيله وتحسينه للحصول على أداء أفضل. فيما يلي بعض الخطوات المهمة في هذه العملية:
- اختبار الروابط والتحولات. انقر فوق كل رابط في قائمة التنقل للتأكد من أنها تعمل بشكل صحيح وتؤدي إلى الصفحات المناسبة.
- التحقق من التوافق عبر المتصفح. اختبار الملاحة الخاص بك في متصفحات مختلفة (على سبيل المثال ، جوجل كروم ، وموزيلا فايرفوكس ، وسفاري ، وإنترنت إكسبلورر) للتأكد من أنه يعرض بشكل صحيح وعلى قدم المساواة على جميع المنصات.
- تحسين تحميل الصفحة. تأكد من أن التنقل الخاص بك لا يبطئ تحميل الصفحات. تحسين حجم وتنسيق الصور ، واستخدام ضغط الملفات وتقليل عدد الطلبات الخارجية.
تحسين إمكانية الوصول. تأكد من أن التنقل الخاص بك في متناول جميع المستخدمين ، بما في ذلك أولئك الذين يستخدمون تقنية التكيف أو لديهم قدرات محدودة. استخدام عناوين كافية ، إضافة سمات البديل إلى الصور ، وتوفير وسائل بديلة للملاحة.
تحليل الأداء. استخدم أدوات التحليلات ومراقبة الأداء لتحديد كيفية تأثير التنقل على تجربة المستخدم. قم بتقييم وقت تحميل الصفحة ووقت الاستجابة وعدد الأخطاء والمؤشرات الأخرى لتحسين الموقع.
من خلال الاختبار والتحسين والدعم ، يمكنك إنشاء التنقل الذي يوفر وصولا سهلا إلى المعلومات ويحسن تجربة المستخدم على موقع الويب الخاص بك.
كيف يمكنني إنشاء التنقل في الموقع في أتش تي أم أل?
لإنشاء التنقل في الموقع في هتمل ، يمكنك استخدام عنصر
ما هي العلامات التي يجب استخدامها لإنشاء التنقل في الموقع في أتش تي أم أل?
و
تستخدم لإنشاء قائمة من الروابط.