الدرس الثالث تصميم موقع الكتروني

Summary

في هذا الدرس الثالث لتصميم المواقع الإلكترونية، يتناول المتحدث كيفية بناء صفحة ويب باستخدام HTML و CSS، مع التركيز على تقسيم الصفحة إلى أقسام متعددة مثل شريط التصفح، معرض الصور، نبذة عن الموقع، والمحتوى. يتم شرح كيفية استخدام الوسوم مثل <div> و <a> لربط الأقسام المختلفة، بالإضافة إلى تنسيق هذه الأقسام باستخدام CSS لتحديد الألوان، الحدود، والمحاذاة. كما يتم توضيح طرق تحسين عرض الصور وإضافة تنسيقات مخصصة لتنسيق الصفحات وجعلها أكثر جاذبية وتنظيمًا.

Takeaways

• 😀 الموقع يحتوي على عدة أقسام رئيسية مثل الشريط العلوي، محتوى الصفحة، معرض الصور، ونبذة عن الموقع.
• 😀 يجب أن يتوفر في الموقع شريط للتصفح لربط الأجزاء المختلفة من الصفحة، مثل معرض الصور والتاريخ.
• 😀 سيتم تقسيم الصفحة إلى أربعة أقسام رئيسية باستخدام الأكواد المناسبة في HTML وCSS.
• 😀 استخدام أكواد HTML لربط المحتويات عبر الروابط التشعبية التي تنقل المستخدم إلى أجزاء مختلفة داخل الموقع.
• 😀 من المهم تخصيص أكواد CSS لكل قسم باستخدام أسماء الكلاسات لسهولة تنسيق العناصر.
• 😀 تم استخدام خاصية 'عرض' (Display) لتحديد كيفية عرض الأقسام مثل عرض الأزرار في صف واحد.
• 😀 تم تنسيق عناصر القائمة باستخدام CSS لظهورها بشكل منظم وجذاب.
• 😀 عند العمل مع الصور، يتم إضافة خصائص مثل الحدود والمسافة بين الصور لتحسين العرض.
• 😀 تم استخدام خاصية 'تجاوز المحتوى' (Overflow) لتمكين المحتوى الزائد من التمرير بشكل صحيح داخل القسم.
• 😀 يُستخدم أكواد CSS لتحديد ألوان الخلفيات، العائلات الخطية، والمحاذاة الخاصة بكل قسم.
• 😀 تنسيق الصور يشمل تحديد حجمها، محاذاتها، وإضافة حدود لجعلها أكثر جاذبية داخل الصفحة.

Q & A

ما هي الأجزاء الرئيسية التي يتكون منها الموقع الإلكتروني في الدرس؟

الموقع الإلكتروني يتكون من عدة أقسام: شريط للتصفح في الأعلى، قسم للمحتوى، معرض للصور، وقسم نبذة عن المعلومات.

ما هو دور شريط التصفح في الموقع؟

شريط التصفح يسمح للمستخدم بالتنقل بين مختلف أقسام الموقع، مثل الانتقال إلى نبذة عن المعلومات أو معرض الصور.

كيف يتم تقسيم الصفحة في HTML؟

يتم تقسيم الصفحة باستخدام وسم 'div' مع تعيين كلاس خاص لكل قسم مثل 'menu' و 'content' و 'photo'.

ما الفرق بين صفحة HTML وصفحة CSS؟

صفحة HTML تحتوي على هيكل الصفحة وأقسامها، بينما صفحة CSS يتم استخدامها لتنسيق هذه الأقسام وتحديد الألوان والخطوط والتنسيقات الأخرى.

ما هي أهمية الوسم 'a' في HTML؟

الوسم 'a' يُستخدم لإضافة الروابط التشعبية التي تُمكن المستخدم من الانتقال إلى أقسام مختلفة داخل الموقع أو إلى مواقع خارجية.

كيف يتم ربط HTML بـ CSS؟

يتم ربط HTML بـ CSS عن طريق إضافة رابط لملف CSS داخل وسم 'head' في صفحة HTML باستخدام وسم 'link'.

ماذا يعني 'class' في HTML؟

الـ 'class' هو سمة تُستخدم لتحديد وتسمية الأقسام أو العناصر داخل الصفحة، بحيث يمكن تنسيقها أو التعامل معها باستخدام CSS.

ما هو الهدف من خاصية 'overflow' في CSS؟

خاصية 'overflow' تُستخدم للتحكم في كيفية ظهور المحتوى الذي يتجاوز المساحة المخصصة له، مثل إضافة تمرير أفقي أو عمودي لعرض المحتوى بالكامل.

كيف يمكن إضافة صورة إلى الموقع باستخدام CSS؟

يمكن إضافة صورة عن طريق استخدام خاصية 'background-image' في CSS وتحديد مسار الصورة.

كيف يتم تنسيق الصور داخل المعرض باستخدام CSS؟

يتم تنسيق الصور في المعرض باستخدام خصائص مثل 'border' لتحديد شكل الحدود، و 'margin' لإضافة المسافات بين الصور، و 'padding' لإضافة مسافة داخل الصور.