يعد تخطيط التذييل أحد الأجزاء المهمة في عملية إنشاء موقع الويب. التذييل هو الجزء السفلي من الصفحة الذي يحتوي على معلومات حول الموقع وتفاصيل الاتصال وروابط الأقسام وغيرها من المعلومات المفيدة. حاليا ، من الشائع استخدام تقنية فليكس بوكس لتخطيط الصفحة ، بما في ذلك التذييل.
فليكس بوكس هو أداة قوية لخلق تخطيطات مرنة والتكيف. يسمح لك بالتحكم بسهولة في موقع ومحاذاة العناصر على الصفحة ، بما في ذلك في التذييل. يمكنك استخدامه للتحكم في العرض والارتفاع والهوامش والمعلمات الأخرى للعناصر.
لإنشاء حاوية فليكس التي سيتم تحديد موقع تذييل الصفحة ، يتم استخدام عرض خاصية كس: فليكس. بعد ذلك ، تصبح جميع العناصر الموجودة داخل الحاوية تلقائيا عناصر مرنة ويمكن التحكم فيها باستخدام خصائص فليكس بوكس الأخرى.
فليكس بوكس يجعل من السهل لوضع ومحاذاة العناصر داخل الحاوية ، مع الحفاظ على المرونة والقدرة على التكيف للتخطيط. يسمح لك بإنشاء خيارات مختلفة لترتيب العناصر في التذييل وتغييرها بسرعة إذا لزم الأمر.
- ما هو تذييل الصفحة ولماذا هو مهم
- الخطوة 1. إعداد هيكل الوثيقة
- إنشاء الحاويات الأساسية
- اختيار الفئة المناسبة
- الخطوة 2. تحديد الأنماط الأساسية
- تطبيق خصائص فليكس
- وضع الحدود والألوان
- الخطوة 3. وضع المحتوى
- إضافة شعار
- إنشاء أقسام بالمعلومات
- سؤال وجواب
- كيفية إعداد تذييل باستخدام فليكس?
- كيف يمكنني جعل تذييل الضغط إلى أسفل الصفحة?
- كيف يمكنني إضافة الحشو بين عناصر تذييل الصفحة?
- كيف يمكنني جعل عناصر تذييل تلقائيا وضعها في عدة صفوف?
- هل من الممكن استخدام المرن لتعويض عنصر تذييل واحد فقط?
ما هو تذييل الصفحة ولماذا هو مهم
التذييل هو الجزء السفلي من صفحة الويب ، والذي يقع في الأسفل ويحتوي على معلومات وروابط إضافية للمستخدمين. هذه هي الكتلة الأخيرة التي يراها المستخدم قبل إكمال زيارة الموقع.
يحتوي التذييل على العديد من الوظائف المهمة:
- الملاحة: غالبا ما يحتوي التذييل على روابط لصفحات موقع أخرى أو أقسام قائمة ، مما يسهل على المستخدمين التنقل في الموقع والعثور على المعلومات التي يحتاجون إليها.
- معلومات الاتصال: يمكن أن يحتوي التذييل على معلومات اتصال مثل العنوان أو رقم الهاتف أو البريد الإلكتروني ، مما يسهل الحصول على تعليقات من زوار الموقع.
- حقوق النشر والأذونات: قد يحتوي التذييل على معلومات حول حقوق الطبع والنشر لمحتوى الموقع وأذونات استخدام المواد ، مما يسمح لك بحماية حقوق مالك الموقع.
- روابط للشبكات الاجتماعية: يمكن أن يتضمن التذييل روابط لملفات تعريف الوسائط الاجتماعية ، مما يساعد المستخدمين على العثور بسهولة على صفحات الوسائط الاجتماعية الرسمية للموقع والاشتراك فيها.
التذييل مهم لتحقيق الاكتمال الجمالي والوظيفي لتصميم الموقع. وهو يكمل بقية الصفحة ، وتوفير نظرة الانتهاء والشعور بالاكتمال. كما أنه يساعد على تحسين التنقل والتفاعل مع المستخدمين من خلال تزويدهم بمعلومات وموارد إضافية.
بشكل عام ، يعد التذييل عنصرا مهما في أي موقع ويب ، والذي لا يضيف الاكتمال البصري فحسب ، بل يوفر أيضا الراحة والمعلومات المفيدة للمستخدمين.
الخطوة 1. إعداد هيكل الوثيقة
قبل البدء في إنشاء تذييل باستخدام فليكس ، تحتاج إلى تكوين بنية المستند. للقيام بذلك ، تحتاج إلى تحديد العناصر الرئيسية التي ستكون موجودة في التذييل.
فيما يلي قائمة بالعناصر الرئيسية التي غالبا ما يتم تضمينها في التذييل:
- الشعار: يوضع عادة على الجانب الأيسر من التذييل ويمثل صورة أو تسمية نصية باسم الموقع.
- قائمة التنقل: يحتوي على روابط لأقسام مختلفة من الموقع ، مثل الصفحة الرئيسية ، من نحن ، الخدمات ، إلخ.
- Instagram Facebook الروابط: هذه هي روابط إلى صفحات الموقع على الشبكات الاجتماعية مثل Facebook, Twitter, Instagram, الخ.
- معلومات الاتصال: يحتوي على معلومات الاتصال مثل العنوان والهاتف والبريد الإلكتروني.
- حقوق النشر: يشير إلى السنة وصاحب الموقع.
يمكن تقديم بنية مستند التذييل في شكل جدول أو قوائم:
| الشعار | قائمة التنقل | الروابط الاجتماعية | معلومات الاتصال | حقوق النشر |
|---|
هذا الهيكل يجعل من السهل تحديد مكونات تذييل الصفحة وموقعها. في المستقبل ، سوف نستخدم هذه العناصر لإنشاء تذييل باستخدام المرن.
إنشاء الحاويات الأساسية
الحاويات هي العناصر الرئيسية لهيكل التذييل. أنها تسمح لك لتجميع وتنظيم المعلومات داخل الطابق السفلي من الموقع. يمكنك استخدام عناصر هتمل المختلفة لإنشاء حاويات.
فيما يلي بعض الأمثلة على الحاويات:
- - أحد العناصر الأكثر شيوعا لإنشاء الحاويات. يمكن استخدامه لتجميع وتنظيم العناصر المختلفة داخل التذييل.
- - عنصر يستخدم لتجميع عناصر المحتوى ذات الصلة. الترتيب والعلاقة بين العناصر داخل القسم مهم لفهم المحتوى.
- - عنصر يستخدم لتمثيل قسم مستقل عن باقي المحتوى ، على سبيل المثال ، كتلة بها أخبار أو مقال.
- - عنصر يستخدم لتمثيل شريط جانبي أو شريط جانبي يحتوي على محتوى ذي صلة أو إضافي.
- عنصر مصمم لإنشاء قائمة تنقل أو قائمة روابط لصفحات أخرى من الموقع.
يعتمد اختيار العنصر على بنية المعلومات التي تخطط لعرضها في التذييل. من المهم اختيار العنصر الأنسب للهيكل الدلالي الصحيح والتنظيم المنطقي للمحتوى.
مثال على استخدام الحاويات:
جهات الاتصال
هاتف: + 7 (999) 123-45-67
نبذة عن الشركة
الخدمات
ما سبق هو مثال على ترميز التذييل باستخدام عناصر الحاوية مثل
و . يتم وضع عناصر المحتوى المختلفة مثل العناوين والفقرات وقوائم الروابط داخل الحاويات.
إنشاء الحاويات الأساسية هو الخطوة الأولى في إنشاء تذييل باستخدام فليكس. ستجعل هذه الحاويات من السهل تنظيم المحتوى وتصميمه داخل الطابق السفلي من الموقع ، بالإضافة إلى جعله أكثر قابلية للفهم والوصول إلى المستخدمين.
اختيار الفئة المناسبة
عند تصميم تذييل الصفحة باستخدام فليكس بوكس ، تحتاج إلى تحديد الفئة المناسبة للحاوية التي ستحتوي على جميع عناصر التذييل.
نهج واحد هو استخدام فئة تذييل الصفحة. سيتم تطبيق هذه الفئة على حاوية تحتوي على عناصر تذييل وستحدد أنماطها.
خيار آخر هو استخدام فئة حاوية التذييل. تنطبق هذه الفئة أيضا على حاوية تحتوي على جميع عناصر التذييل ، ولكن يمكن استخدامها لوصف أنماط حاوية أكثر تحديدا.
- اعتمادا على بنية الصفحة ومتطلبات التصميم ، يمكنك استخدام فئات أخرى لحاوية التذييل. على سبيل المثال ، فئة تذييل الموقع أو تذييل الصفحة أو فئة التذييل الرئيسي.
- من المهم اختيار فئات ذات مغزى ستكون مفهومة للمطورين الآخرين وستساعد في الحفاظ على أنماط التذييل وتغييرها في المستقبل.
- الخطوة 2. تحديد الأنماط الأساسية
- أولا ، دعنا نحدد الأنماط الرئيسية التي سيتم تطبيقها على تذييل الصفحة. سنحتاج إلى الأنماط التالية:
تذييل لون الخلفية
ترتيب العناصر داخل التذييل
حجم الخط واللون للنص داخل تذييل الصفحة
هوامش عناصر التذييل
للقيام بذلك ، يمكننا استخدام خصائص كس مثل لون الخلفية ، تبرير المحتوى ، حجم الخط والهامش. على سبيل المثال ، لتعيين لون الخلفية لتذييل الصفحة ، يمكننا استخدام الكود التالي:
.تذييل {
لون الخلفية: # إف 1 إف 1 إف 1;
}
دعنا نحدد الأنماط الرئيسية باستخدام الكود التالي:
.تذييل {
لون الخلفية: # إف 1 إف 1 إف 1;
عرض: فليكس;
تبرير-المحتوى: المسافة-بين;
محاذاة العناصر: مركز;
الحشو: 20 بكسل;
}
.تذييل الصفحة {
حجم الخط: 14 بكسل;
اللون: # 333;
الهامش: 0;
}
هنا نحدد أنماط حاوية التذييل (.تذييل الصفحة) والنص داخل تذييل الصفحة (ع). نستخدم أيضا خاصية العرض: فليكس لترتيب العناصر داخل تذييل الصفحة في صف واحد باستخدام تبرير المحتوى: المسافة بين الخاصية. محاذاة العناصر: يتم استخدام خاصية المركز لمحاذاة العناصر عموديا.
- الآن بعد أن حددنا الأنماط الرئيسية للتذييل ، يمكننا البدء في وضع علامة عليه وإضافة المحتوى.
- تطبيق خصائص فليكس
- فليكسبوكس هي واحدة من أقوى وسهلة الاستخدام نماذج كس لبناء تخطيطات مرنة والتكيف. انها تسمح لك للسيطرة على تخطيط العناصر داخل الحاوية ويبسط إنشاء تخطيطات معقدة مع الحد الأدنى من استخدام كس.
- يستخدم فليكسبوكس عددا من الخصائص التي تسمح لك لتحديد سلوك وموقع العناصر في حاوية:
- العرض-يحدد نوع الحاوية ، يمكن ضبط القيمة المرنة لتطبيق نموذج فليكس بوكس على الحاوية;
- الاتجاه المرن-يحدد اتجاه العناصر في الحاوية ، ويمكن أن يكون له صف القيم (الترتيب الأفقي للعناصر) ، والعمود (الترتيب الرأسي للعناصر) ، وعكس الصف (الترتيب الأفقي العكسي) وعكس العمود (الترتيب الرأسي العكسي);
- تبرير-المحتوى-محاذاة أفقية من العناصر في الحاوية ، يمكن أن يكون القيم فليكس-بداية (محاذاة اليسار) ، فليكس-نهاية (محاذاة اليمين) ، مركز (توسيط أفقي) ، المسافة بين (مسافة متساوية بين العناصر) والفضاء-حول (مسافة متساوية حول العناصر);
- محاذاة العناصر-المحاذاة الرأسية للعناصر في الحاوية ، يمكن أن يكون لها القيم فليكس-ستارت (المحاذاة على طول الحافة العلوية) ، فليكس-ستاند (المحاذاة على طول الحافة السفلية) ، المركز (التمركز الرأسي) ، التمدد (تمدد العناصر) وخط الأساس (المحاذاة على طول خط الأساس);
- محاذاة-محاذاة عمودية ذاتية لعنصر فردي في الحاوية ، تسمح لك بإعادة تعريف قيمة خاصية محاذاة العناصر لعنصر معين;
- فليكس التفاف-يحدد ما إذا كان ينبغي نقل العناصر إلى السطر التالي عند الوصول إلى نهاية الحاوية ، يمكن أن يكون القيم نوراب (لا نقل) ، التفاف (نقل) والتفاف عكس (نقل في ترتيب عكسي);
- ترتيب-ترتيب العنصر في الحاوية ، يسمح لك بإعادة تعريف ترتيب العناصر;
فليكس-تنمو-يحدد مقدار المساحة الحرة عنصر في الحاوية سوف تحتل ، يمكن أن تأخذ القيم الرقمية;
فليكس يتقلص-يحدد مقدار المساحة التي سيشغلها العنصر إذا لم تكن هناك مساحة كافية في الحاوية ، فقد يستغرق الأمر قيما رقمية;
أساس المرن-يحدد نقطة البداية لقياس العنصر في الحاوية ، يمكن تعيين قيمة بالبكسل أو النسب المئوية ، أو قيمة تلقائية;
فليكس هي خاصية مختصرة تجمع بين قيم خصائص النمو المرن والانكماش المرن والأساس المرن;
باستخدام هذه الخصائص ، يمكنك تحقيق مجموعة واسعة من التخطيطات المختلفة وإنشاء واجهات مرنة وسريعة الاستجابة دون الحاجة إلى استخدام أنماط معقدة ومربكة.
- وضع الحدود والألوان
- 1. الحدود:
- - يحدد عرض الحدود;
لون الحدود
- على غرار الحدود
- يحدد نمط الحدود (على سبيل المثال ، الخط الصلب ، الخط المنقط ، إلخ.).
- لون الخلفية
- يحدد لون الخلفية للعنصر.
- اللون
- 4. المسافة بين العناصر:
الهامش
- يحدد الهوامش الخارجية;
الحشو
- يحدد الهوامش الداخلية.
يتيح لك استخدام هذه الخصائص إنشاء قبو أنيق وجذاب لموقعك. لديك تخطيط جيد!
الخطوة 3. وضع المحتوى
تويتر
Instagramr Instagram
العنوان:
موسكو ، شارع بريميرنايا., 1
في هذا المثال ، استخدمنا العلامات
لحقوق التأليف والنشر و
للحصول على معلومات الاتصال. يمكنك أيضا استخدام علامات أخرى وأسلوب المحتوى باستخدام كس.
الشيء الرئيسي الذي يجب تذكره عند نشر المحتوى في التذييل هو سهولة قراءته وإمكانية الوصول إليه. تأكد من التحقق من أن النص قابل للقراءة وأن المحتوى الموجود في التذييل يبرز بوضوح عن بقية الصفحة.
إضافة شعار
الشعار هو جزء مهم من أي موقع. يساعد على إنشاء علامة تجارية معروفة ويؤسس اتصالا بين المستخدم والشركة أو المؤسسة.
يمكنك إضافة شعار داخل التذييل باستخدام علامة. تتيح لك هذه العلامة إدراج صورة على الصفحة.
قبل إدراج شعار ، تحتاج إلى إعداد صورة. فمن الأفضل استخدام صورة جبيغ أو ينغ مع الشفافية. تذكر أن الشعار يجب أن يكون متجها أو يتمتع بدقة عالية بما يكفي للحفاظ على الوضوح عند التكبير.
بعد إعداد صورة الشعار ، يمكنك إضافتها إلى الصفحة باستخدام الكود التالي:
هنا ، يحدد سرك المسار إلى الصورة ، ويحدد ألت نص بديل سيتم عرضه إذا كانت الصورة غير متوفرة أو للمستخدمين ذوي الإعاقة.
لاحظ أن المسار إلى الصورة يمكن أن يكون نسبيا أو مطلقا. يشير المسار النسبي إلى الموقع النسبي للصورة بالنسبة للصفحة الحالية ، ويشير المسار المطلق إلى المسار الكامل للصورة على الخادم.
بعد إضافة علامة الشعار في التذييل ، لا تنس تطبيق الأنماط بحيث يتم توسيط الشعار أو عرضه جيدا على الصفحة. لاحظ أنه يمكن تعيين الأنماط باستخدام سمة النمط أو عبر أوراق الأنماط الخارجية (كس).
إنشاء أقسام بالمعلومات
يعد التذييل جزءا مهما من صفحة الويب ، والتي تحتوي غالبا على معلومات متنوعة حول الموقع ومالكه وتفاصيل الاتصال به. سيساعدك إنشاء أقسام تحتوي على معلومات في التذييل على تنظيم جميع البيانات الضرورية بطريقة سهلة الاستخدام.
فيما يلي بعض الأقسام التي يمكن إضافتها إلى التذييل:
معلومات عنا:
في هذا القسم ، يمكنك تقديم معلومات موجزة عن الموقع أو المنظمة التي ينتمي إليها. هنا يمكنك تحديد أهداف وغايات الموقع ، وكذلك معرفة القليل عن تاريخه.
جهات الاتصال:
في هذا القسم ، يمكنك تحديد طرق مختلفة للاتصال بإدارة الموقع أو المؤسسة. يمكن أن يكون هذا عنوان بريد إلكتروني ورقم هاتف وعنوان مكتب وبيانات أخرى مماثلة. يمكنك أيضا إضافة روابط إلى الشبكات الاجتماعية يمكن للمستخدمين من خلالها الاتصال بأصحاب الموقع.
سياسة الخصوصية:
في هذا القسم ، يمكنك نشر سياسة خصوصية تحدد بيانات المستخدم التي يتم جمعها على الموقع وكيفية استخدامها. عادة ما يحتوي هذا القسم أيضا على روابط لوثائق مهمة أخرى تتعلق بالسرية.
شروط الاستخدام:
في هذا القسم ، يمكنك وضع شروط استخدام الموقع ، والتي ستحدد كيف يجب أن يتصرف المستخدمون وما هو محظور على الموقع. قد تكون هناك أيضا روابط لوثائق مهمة أخرى تتعلق باستخدام الموقع.
روابط لصفحات أخرى:
في قسم" الروابط " ، يمكنك وضع روابط لصفحات أخرى من الموقع قد تكون مفيدة للمستخدمين. على سبيل المثال ، يمكن أن يكون رابطا لصفحة الأسئلة المتداولة أو صفحة معلومات الاتصال.
شعارات الشركاء:
في هذا القسم ، يمكنك وضع شعارات الشركاء الذين يتعاون معهم الموقع أو المنظمة. سيساعد هذا في بناء ثقة المستخدم والإشارة إلى سمعة الموقع وموثوقيته.
حقوق التأليف والنشر وروابط للمؤلفين:
في هذا القسم ، يمكنك وضع معلومات حول حقوق الطبع والنشر لمحتوى الموقع وروابط للمؤلفين ، إذا لزم الأمر. سيساعد هذا في حماية محتوى الموقع من الاستخدام غير القانوني والإشارة إلى أولئك الذين قدموا أكبر مساهمة في إنشائه.
وبالتالي ، يتيح لك إنشاء أقسام تحتوي على معلومات في التذييل تنظيم البيانات المهمة على صفحة الويب وزيادة فائدتها وسهولة استخدامها.
سؤال وجواب
كيفية إعداد تذييل باستخدام فليكس?
لإنشاء تذييل باستخدام فليكس ، تحتاج أولا إلى إنشاء حاوية تريد تطبيق خاصية العرض عليها: فليكس. وبالتالي ، سيتم ترتيب جميع العناصر الفرعية للحاوية في صف واحد. يمكنك بعد ذلك استخدام خاصية النمو المرن لتحديد كيفية توزيع المساحة المتاحة بين العناصر. لإنشاء أعمدة في تذييل الصفحة ، يمكنك استخدام خاصية التفاف فليكس: التفاف بحيث يتم ترتيب العناصر في عدة صفوف.
كيفية جعل تذييل الضغط إلى أسفل الصفحة?
للضغط على تذييل الصفحة إلى أسفل الصفحة ، يمكنك تعيين ارتفاع الحاوية الخاصة به إلى 100 ٪ واستخدام خاصية محاذاة العناصر: فليكس إند بحيث تتم محاذاة عناصر الحاوية على طول الحد السفلي. يمكنك أيضا استخدام خاصية الهامش الأعلى: السيارات تذييل لتولي كل الفراغ الرأسي الحر واضغط عليه إلى أسفل الصفحة.
كيف يمكنني إضافة الحشو بين عناصر تذييل الصفحة?
لإضافة هوامش بين عناصر التذييل ، يمكنك استخدام خاصية الهامش الأيمن أو الهامش السفلي للعناصر الفرعية للحاوية. على سبيل المثال ، يمكنك تعيين الهامش الأيمن: 20 بكسل لكل عنصر لإنشاء هوامش أفقية بينهما. يمكنك أيضا إضافة حشوة باستخدام خاصية الحشو للحاوية وتعيين قيمة لخاصية الفجوة لإنشاء هوامش متساوية بين العناصر.