التذييل هو الكتلة السفلية على صفحة الويب التي تحتوي على معلومات حول الموقع ، وروابط لصفحات أخرى ، ومعلومات الاتصال ، وما إلى ذلك. من المهم جدا أن يظل التذييل دائما في مكانه ، حتى إذا كانت الصفحة تحتوي على القليل من المحتوى أو كمية صغيرة من المعلومات. في هذه المقالة ، سنلقي نظرة على بعض الطرق البسيطة لتثبيت تذييل الصفحة في أسفل الصفحة باستخدام هتمل.
الطريقة الأولى هي استخدام موقف خصائص كس وأسفل. يمكننا ضبط التذييل على الموضع المطلق وتعيين القيمة السفلية على 0 بكسل. بهذه الطريقة ، سيتم دائما الضغط على التذييل في أسفل الصفحة ، بغض النظر عن مقدار المحتوى أو حجم نافذة المتصفح.
الطريقة الثانية هي استخدام خاصية العرض ونموذج فليكسبوكس. يمكننا لف محتوى الصفحة بالكامل في الحاوية الرئيسية وتطبيق خاصية العرض:فليكس عليها. ثم نقوم بتعيين اتجاه فليكسبوكس إلى العمود باستخدام خاصية فليكس-ديركشن وتعيين الحد الأدنى للارتفاع: 100 فولت (حيث ف هو ارتفاع نافذة المتصفح). سيؤدي ذلك إلى أن يشغل التذييل كل المساحة المتبقية في أسفل الصفحة.
ضع في اعتبارك أن هذه الطرق قد تعمل بشكل مختلف في المتصفحات المختلفة وعلى الأجهزة المختلفة. لذلك ، يوصى باختبارها على منصات وأجهزة مختلفة للتأكد من أنها تعمل.
- لماذا أحتاج إلى تذييل ثابت?
- لحظات مربحة
- تحسين تجربة المستخدم
- طرق بسيطة لتأمين تذييل الصفحة
- باستخدام كس
- باستخدام جافا سكريبت
- استخدام الأطر
- توصيات لإصلاح تذييل الصفحة
- نسبة الحجم
- سؤال وجواب
- هل هناك أي طرق أخرى لتثبيت تذييل الصفحة في أسفل الصفحة?
- هل من الممكن أن يعلقوا تذييل الصفحة في أسفل الصفحة دون استخدام جافا سكريبت أو المغلق?
لماذا أحتاج إلى تذييل ثابت?
تذييل الصفحة هو عنصر مهم في صفحة الويب الموجودة في الأسفل. يحتوي على معلومات إضافية حول الموقع وغالبا ما يتضمن روابط أو معلومات اتصال أو حقوق نشر.
يحتوي التذييل الثابت على العديد من المزايا:
- زيادة قابلية الاستخدام: عندما يقوم المستخدمون بالتمرير لأسفل الصفحة ، فإنهم يرون دائما تذييل الصفحة ، مما يسمح لهم بالوصول بسرعة إلى الروابط أو المعلومات المهمة.
- تحسين التنقل: يمكن أن يحتوي التذييل على روابط لأقسام مختلفة من الموقع ، مما يساعد المستخدمين في العثور بسهولة على المعلومات التي يحتاجونها أو الانتقال إلى الصفحة الصحيحة.
- تعزيز العلامة التجارية: يمكنك وضع شعار أو عناصر تصميم أخرى في التذييل تساعد في تعزيز الوعي بالعلامة التجارية وإنشاء نمط موحد.
- التحسين لمحركات البحث: يمكن للتذييل المثبت تحسين تحسين محركات البحث ، لأنه يحتوي على معلومات حول الموقع أو روابط لصفحات مهمة يمكن فهرستها بواسطة محركات البحث.
بغض النظر عن الأسباب ، يمكن أن يكون استخدام تذييل مثبت مفيدا لتحسين تجربة المستخدم والوظائف العامة لصفحة الويب.
لحظات مربحة
يحتوي تثبيت التذييل في أسفل الصفحة على عدة نقاط مفيدة:
- يوفر تنقلا أفضل للمستخدمين ، حيث سيكون التذييل متاحا دائما بغض النظر عن موضع الصفحة.
- يحسن التجربة البصرية من خلال خلق شعور موحد من اكتمال تكوين الصفحة.
- يعزز تفاعل المستخدم مع الموقع ، حيث ستكون المعلومات الموجودة في التذييل مرئية دائما ويمكن أن تجذب انتباه المستخدمين.
- يسمح لك بنشر معلومات مهمة بسهولة مثل تفاصيل الاتصال أو روابط الشبكات الاجتماعية أو الروابط المفيدة.
استخدام تقنيات وأساليب مختلفة ، مثل استخدام كس ، موقف ثابت أو جافا سكريبت ، يسمح لك لإصلاح فعال تذييل في أسفل الصفحة وتحقيق هذه النقاط المفيدة.
تحسين تجربة المستخدم
يعد تحسين تجربة المستخدم إحدى المهام الرئيسية لمطور الويب. هذا يسمح لك لجعل الموقع أكثر ملاءمة ومفهومة وجذابة للمستخدمين.
فيما يلي بعض الطرق للمساعدة في تحسين تجربة المستخدم على موقعك:
- تصميم سريع الاستجابة-يتيح إنشاء موقع ويب سريع الاستجابة للمستخدمين عرض المحتوى على أي جهاز ، سواء كان أجهزة كمبيوتر أو هواتف ذكية أو أجهزة لوحية. هذا يضمن الراحة وسهولة الوصول بغض النظر عن الجهاز المستخدم.
- التنقل المريح — التنظيم المختص للقائمة وهيكل الموقع يجعل التنقل أكثر قابلية للفهم وبديهية للمستخدمين. يجب عليهم بسهولة العثور على المعلومات اللازمة والتنقل بين أقسام الموقع.
- تحميل سريع-يتيح تحميل الصفحة المحسن للمستخدمين عدم قضاء الكثير من الوقت في الانتظار. يمكن تحقيق ذلك عن طريق تقليل حجم الصور واستخدام ذاكرة التخزين المؤقت.
- طباعة واضحة وقابلة للقراءة-اختيار الخط المناسب وحجم النص ، وكذلك تنظيمه على الصفحات ، يجعل المحتوى أكثر قابلية للقراءة والفهم للمستخدمين.
- يساعد استخدام عناصر التمييز — تسليط الضوء على الأقسام والوظائف الرئيسية للموقع المستخدم على العثور بسرعة على المعلومات الضرورية والتركيز على المهام.
سيساعد استخدام هذه الطرق البسيطة في جعل موقعك أكثر سهولة في الاستخدام وجاذبية وسهولة في الاستخدام للمستخدمين ، مما سيؤثر بشكل إيجابي على انطباعهم العام.
لا تنس أن تحسين تجربة المستخدم عملية مستمرة. سيساعدك التحليل المنتظم لسلوك المستخدم وإدخال أفكار جديدة على جعل الموقع أفضل.
طرق بسيطة لتأمين تذييل الصفحة
يعد التذييل جزءا مهما من صفحة الويب ، والتي تحتوي عادة على معلومات حقوق النشر وروابط لصفحات أخرى ومعلومات الاتصال. يجب تثبيته في أسفل الصفحة ليكون مرئيا دائما للمستخدمين.
- استخدام موقف الملكية المغلق: ثابت;
- استخدام موقف الملكية المغلق: مثبت;
- استخدام جافا سكريبت
واحدة من أسهل الطرق لإصلاح تذييل هو استخدام موقف الملكية المغلق: ثابت. تعيين فئة أو معرف لهذا العنصر وإضافة رمز كس التالي:
| .تذييل { | موقف: ثابت; |
| اليسار: 0; | |
| أسفل: 0; | |
| العرض: 100%; | |
| لون الخلفية: # 0 0 0; | |
| الحشو: 20 بكسل; | |
| } |
إذا كنت تريد أن يظل التذييل مثبتا حتى يقوم المستخدم بالتمرير بعيدا بما فيه الكفاية ، يمكنك استخدام موضع خاصية كس: مثبت. قم بتطبيق هذا النمط على التذييل على النحو التالي:
| .تذييل { | موقف: لزجة; |
| أسفل: 0; | |
| لون الخلفية: # 0 0 0; | |
| الحشو: 20 بكسل; | |
| } |
إذا كنت بحاجة إلى طريقة أكثر مرونة لتثبيت تذييل الصفحة ، فيمكنك استخدام جافا سكريبت. فيما يلي مثال بسيط على شفرة جافا سكريبت التي تثبت التذييل في أسفل الصفحة:
| فار | تذييل = وثيقة.كيريسيليكتور ('.تذييل'); |
| وظيفة | ستيكيفوتر () { |
| فار نافذةارتفاع = نافذة.إينيرهايتي; | |
| فار بوديهايت = وثيقة.الجسم.أوفسيثيت; | |
| // حساب ارتفاع محتوى الصفحة الرئيسية | |
| // foo تذييل, foo, | |
| // foo تذييل foo | |
| إذا (ارتفاع الجسم < ارتفاع النافذة) { | |
| تذييل الصفحة.أسلوب.موقف = 'ثابت'; | |
| تذييل الصفحة.أسلوب.أسفل = '0'; | |
| تذييل الصفحة.أسلوب.العرض = ' 100٪'; | |
| تذييل الصفحة.أسلوب.الخلفية اللون = '# إف 0 إف 0 إف 0'; | |
| تذييل الصفحة.أسلوب.الحشو = '20 بكسل'; | |
| // Дополнительные стили | |
| وثيقة.الجسم.أسلوب.بادينجبوتوم = ' {{تذييل الصفحة.بعيدا عن الارتفاع} بكسل`; | |
| // Foo تذييل foo بادينجبوتوم | |
| } | |
| } | |
| ستيكيفوتر(); | |
| نافذة.أديفينتليستينر ('تغيير الحجم' ، ستيكيفوتر); |
باستخدام كس
كس (أوراق الأنماط المتتالية) هي لغة نمط تستخدم لتحديد مظهر وتنسيق صفحات الويب. تسمح لك أنماط كس بتغيير اللون والحجم والخط والسمات الأخرى للعناصر على الصفحة.
لتطبيق أنماط كس على عناصر الصفحة ، يتم استخدام محدد ، متبوعا بأقواس مجعد {}. داخل الأقواس المتعرجة ، يتم تحديد الخصائص والقيم التي تحدد مظهر العنصر.
هناك عدة طرق لتوصيل أنماط كس إلى صفحة هتمل:
- . على سبيل المثال:
- . على سبيل المثال:
- سمات النمط المدمج: يمكن تعريف أنماط كس باستخدام سمات عنصر هتمل. على سبيل المثال:
هذه الفقرة لها لون أحمر وحجم خط 18 بكسل.
عند استخدام كس ، فمن المستحسن اتباع مبادئ المتتالية والميراث. المتتالية يسمح لك لتحديد قواعد نمط متعددة لعنصر واحد ، والميراث يسمح لك لتطبيق أنماط من العناصر الأم لأحفادهم.
باستخدام كس ، يمكنك إنشاء تأثيرات ورسوم متحركة مختلفة ، وكذلك تكييف صفحات الويب مع أجهزة وشاشات مختلفة باستخدام استعلامات الوسائط.
يسمح لك استخدام أنماط كس بإنشاء صفحات ويب جميلة وجمالية ، كما يسهل دعمها وتطويرها.
باستخدام جافا سكريبت
طريقة واحدة لتثبيت تذييل الصفحة في أسفل الصفحة على موقع ويب باستخدام هتمل هي استخدام جافا سكريبت. جافا سكريبت يسمح لك لإضافة وظائف إضافية لصفحات الويب والتلاعب في محتوى وهيكل الصفحة.
فيما يلي بعض الأمثلة على كيفية استخدام جافا سكريبت لتثبيت تذييل الصفحة في أسفل الصفحة:
- حساب ارتفاع الصفحة: يمكنك استخدام جافا سكريبت لحساب ارتفاع الصفحة وتعيين الحد الأدنى للارتفاع للحاوية الرئيسية بحيث لا يتداخل المحتوى مع التذييل.
- التمرير: يمكن استخدام جافا سكريبت لتتبع تمرير الصفحة وإصلاح التذييل في الأسفل عندما يقوم المستخدم بالتمرير حتى النهاية.
- فئات ديناميكية: يمكن أيضا تنفيذ تثبيت التذييل عن طريق إضافة فئة خاصة إلى التذييل ، بشرط أن يكون محتوى الصفحة صغيرا جدا لملء الشاشة بأكملها.
مثال على استخدام جافا سكريبت:
| جافا سكريبت | أتش تي أم أل |
|---|---|
كائن المستند.كيريسيليكتور
للبحث عن عنصر
تذييل الصفحة
. استخدام المتغيرات
ارتفاع النافذة
- و
- ارتفاع الصفحة
- يتم حساب ارتفاع نافذة المتصفح وارتفاع الصفحة ، على التوالي. ثم ، إذا كان ارتفاع الصفحة أقل من ارتفاع النافذة ، إلى العنصر
تذييل الصفحة
يتم إضافة الطبقة
لزجة تذييل
.
واحدة من الطرق لإصلاح تذييل الصفحة في أسفل الصفحة في هتمل هو استخدام الأطر. الأطر هي مجموعة من الأنماط والمكونات الجاهزة التي تسهل تطوير صفحات الويب.
هناك العديد من الأطر التي تقدم طرقا مختلفة لإصلاح التذييل في أسفل الصفحة. وفيما يلي بعض منها:
واجهة المستخدم الدلالية: إطار يوفر أيضا فئات كس جاهزة لإنشاء تصميم سريع الاستجابة. لإصلاح التذييل في أسفل الصفحة في واجهة المستخدم الدلالية ، يمكنك استخدام فئة "القاع الثابت المقلوب".
كل من هذه الأطر لها خصائصها الخاصة وتتطلب بعض الوقت للدراسة والإتقان. ومع ذلك ، فإن استخدام الأطر يمكن أن يبسط بشكل كبير تطوير صفحات الويب ويسمح لك بتحقيق النتيجة المرجوة بشكل أسرع.
موقف: ثابت;
. سيسمح هذا للتذييل بالبقاء مرئيا دائما في أسفل الشاشة ، بغض النظر عن تمرير الصفحة.
3. استخدام فليكسبوكس أو تخطيط الشبكة
إذا كنت ترغب في إنشاء تصميم متجاوب وتريد أن يتم الضغط على تذييل الصفحة دائما إلى أسفل الصفحة ، فمن المستحسن استخدام كس فليكسبوكسيس (
عرض: فليكس;
) أو شبكة (
عرض: الشبكة;
- ). بمساعدتهم ، يمكنك بسهولة توزيع المحتوى على الصفحة وإصلاح التذييل تلقائيا في الأسفل ، بغض النظر عن ارتفاعه.
- 4. اجعل التذييل "لزجا"
- هناك طريقة إضافية لتأمين التذييل في أسفل الصفحة وهي استخدام ما يسمى بالتذييل "اللاصق". في هذه الحالة ، سيظل التذييل مضغوطا دائما على الجزء السفلي من الشاشة ، حتى إذا كان محتوى الصفحة لا يملأ المنطقة المتاحة بالكامل. يمكنك تحقيق ذلك عن طريق إضافة أنماط كس الخاصة ، على سبيل المثال,
- موقف: لزجة;
و
أسفل: 0;
.
5. استخدم جافا سكريبت إذا لزم الأمر
في بعض الحالات ، قد تحتاج إلى استخدام جافا سكريبت لتثبيت التذييل. على سبيل المثال ، إذا قمت بإنشاء تخطيط معقد متعدد المستويات أو إذا كنت تريد تنفيذ تذييل متحرك. في مثل هذه الحالات ، يمكنك استخدام جافا سكريبت لتغيير أنماط التذييل ديناميكيا أو وضعها على الصفحة.
نسبة الحجم