كيفية إنشاء تذييل ثابت لموقعك الإلكتروني باستخدام HTML و CSS

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

المتطلبات

هذه المقالة هي المقالة الأولى من سلسلة المقالات التعليمية حول كيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

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

اقتباس

لتنزيل هذه الصور اضغط على رابط الصورة ثم اضغط على CTRL + الزر الأيسر (أنظمة ماك) أو الزر الأيمن (أنظمة ويندوز) على الصورة واختر "حفظ الصورة باسم" ثم احفظها باسم background-image.jpeg ضمن مجلد images.

تستطيع الآن بعد حفظ الصور المتابعة في قراءة القسم التالي وتنفيذ خطواته.

إضافة صنف لتصميم التذييل

عليك أولًا تعريف الصنف footer عن طريق إضافة الشيفرة التالية لنهاية الملف styles.css ثم احفظه.

/* Footer */

.footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height: 90px;
  background-color: #D0DAEE;
}

أضفت في الشيفرة السابقة تعليقًا لعنونة شيفرة CSS الخاصة بقسم التذييل، ثم عرفت صنفًا باسم footer وصرحت عن عدة قواعد تصميم، القاعدة الأولى تُعرف موقع التذييل position على أنه ثابت fixed مما يعني أن العنصر لن يتحرك من موقعه الذي تُحدده عند انتقال المستخدم لأسفل الصفحة. حُدد الموقع من خلال التصريحين التاليين bottom:0;‎ و left:0;‎ وهذا يعني أن موقع التذييل يبعد صفر بكسل من اليسار وصفر بكسل من الأسفل بالنسبة لمجال الرؤية.

تستطيع من خلال تغيير القيم تعديل موقع العنصر ضمن الصفحة لكن انتبه إلى أن أي قيمة غير الصفر يجب أن تتضمن اللاحقة px بعد الرقم، كما أن القاعدة حددت العرض والارتفاع ولون الخلفية للصنف footer. أصبحت الآن جاهزًا لإضافة محتوى التذييل في القسم التالي من المقال.

إضافة تذييل ذو تصميم يتبع للصنف footer

عليك إضافة الحاوية <div> لإضافة محتوى التذييل لصفحة الويب مع تعيين الصنف footer الذي أنشأته سابقًا، ثم عد إلى ملف index.html والصق الشيفرة التالية بعد آخر وسم إغلاق <div/>.

<!--Section 7: Footer-->

<div class="footer">
</div>

احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر لك الآن قسم تذييل فارغ في أسفل صفحة الويب تبقى في مكانها عند انتقالك لأسفل الصفحة.

سوف تُضيف الآن محتوى لقسم التذييل الجديد.

كيفية إضافة وتصميم عناصر القائمة ضمن التذييل

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

.footer-text-left {
  font-size:25px;
  padding-left:40px;
  float:left;
  word-spacing:20px;
}

a.menu:hover {
  background-color:yellow;
  font-size:20px;
}

سوف نتوقف قليلًا لمراجعة كل سطر أنشأته من مجموعات القواعد السابقة.

تُعرف مجموعة القواعد الأولى اسم الصنف footer-text-left التي سوف تُستخدم لتصميم نص عناصر القائمة، ولاحظ هنا أنك ضبط الخاصية float للقيمة left ليطفو النص الذي يمتلك هذا الصنف ليسار الصفحة. استخدمت أيضًا الخاصية word-spacing لإضافة مسافة إضافية بين عناصر القائمة، وفي حال كانت أي من عناصر القائمة مكونة من أكثر من كلمة واحدة سوف تُضطر لإنشاء صنف لتصميم عناصر القائمة (بدلًا من تغيير قيمة تباعد الكلمات).
تستخدم مجموعة القواعد الثانية الصنف الزائفhover لإضافة خلفية صفراء اللون للنص عند تحريك المستخدم للمؤشر فوق النص.

أضف الآن عناصر القائمة لصفحة الويب من خلال العودة لملف index.html وإضافة الشيفرة التالية ضمن حاوية التذييل التي أنشأتها سابقًا.

<div class="footer">
  <p class="footer-text-left">
    <a href="index.html" class="menu">home</a>
    <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
    <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
  </p>
</div>

تُضيف هذه الشيفرة عُنصري قائمة (هما about و credits) مع إسناد روابط لهما وتصميم النص باستخدام الصنف footer-text-left و الصنف a.menu.

احفظ جميع الملفات وأعد تحميل الصفحة ضمن المتصفح ليظهر لك نتيجة مماثلة لما يلي.

إضافة أيقونات مواقع التواصل الاجتماعي

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

.footer-content-right {
  padding-right:40px;
  margin-top:20px;
  float:right;
}

.icon-style {
  height:40px;
  margin-left:20px;
  margin-top:5px;
}

.icon-style:hover {
  background-color:yellow;
  padding:5px;
}

لنتوقف قليلًا ونُراجع مجموعات القواعد.

تُعرف مجموعة القواعد الأولى الصنف footer-content-right وتُحدد قيم مُحددة للهوامش والحشوة والخاصية float، وسوف تستخدم مجموعة القواعد هذه لتصميم عنصر <div> سوف يحوي أيقونات وسائل التواصل الاجتماعي.
تُنشئ مجموعة القواعد الثانية الصنف icon-style الذي سوف يوفر قيمًا للارتفاع والهوامش لتعيين موقع أيقونات مواقع التواصل الاجتماعي.
تستخدم مجموعة القواعد الثالثة الصنف الزائفhover لإضافة خلفية صفراء اللون للأيقونة عند تحريك المستخدم لمؤشر الفأرة فوق النص.

احفظ الملف styles.css ثم توجه إلى الملف index.html لإضافة أيقونات مواقع التواصل الاجتماعي من خلال إضافة الشيفرة التالية بعد وسم الإغلاق الأخير لقائمة العناصر.

<div class="footer-content-right">
  <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
  <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
  <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
</div>

تأكد أنك غيرت مسارات الملفات والروابط بالمعلومات الخاصة بك لوسائل التواصل الاجتماعي، حيث أن الشيفرة السابقة تُنشئ حاوية <div> تستخدم التصميم المُسند للصنف footer-content-right، وضمن الحاوية div أضفت ثلاث أيقونات لمواقع التواصل الاجتماعي باستخدام الوسم <img> ورُبط كل منها مع صورة باستخدام الوسم <a>.

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال How To Create a Static Footer With HTML and CSS (Section 7) لصاحبه Erin Glass.