تدريب 3 - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

سؤال تدريب 3: استخدم قواعد CSS التي تعلمتها في الدرس وغير مظهر قسم الصور في الموقع الإلكتروني الخاص بك.

الإجابة: س3: تحويل قسم الصور إلى معرض منظم ومتجاوب؛ وذلك بتوحيد أبعاد الصور داخل القسم، وإضافة تباعد وهوامش مناسبة، ووضع إطار أو زوايا دائرية وظل خفيف للصور، وترتيبها في صفوف/أعمدة (شبكة أو Flex) بحيث تتكيف مع حجم الشاشة، مع تحسين المظهر عند مرور المؤشر (مثل تغيير بسيط في الظل أو التكبير الخفيف).

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو استخدام قواعد CSS لتغيير مظهر قسم الصور في موقع إلكتروني. الفكرة هنا هي تحويل قسم الصور من مجرد صور مبعثرة إلى معرض منظم وجذاب بصرياً ويتكيف مع مختلف أحجام الشاشات (متجاوب). لتحقيق ذلك، نبدأ بتوحيد أبعاد الصور داخل القسم باستخدام خصائص مثل `width` و `height` أو `object-fit` لجعلها متناسقة. ثم نضيف تباعداً وهوامش مناسبة بين الصور باستخدام `margin` و `padding` لتحسين المساحة البيضاء. لتحسين المظهر البصري، يمكن إضافة إطار للصور باستخدام `border` أو جعل زواياها دائرية باستخدام `border-radius`، وإضافة ظل خفيف باستخدام `box-shadow` لإبرازها. لترتيب الصور في صفوف وأعمدة بحيث تتكيف مع حجم الشاشة، نستخدم تقنيات التخطيط مثل Flexbox (بخصائص مثل `display: flex` و `flex-wrap`) أو CSS Grid (بخصائص مثل `display: grid`) لتنظيمها في شبكة مرنة. أخيراً، لتحسين تجربة المستخدم، نضيف تأثيرات تفاعلية عند مرور المؤشر (hover) على الصور، مثل تغيير بسيط في الظل باستخدام `box-shadow` أو تكبير خفيف باستخدام `transform: scale()`. إذن، الإجابة هي: **تحويل قسم الصور إلى معرض منظم ومتجاوب؛ وذلك بتوحيد أبعاد الصور داخل القسم، وإضافة تباعد وهوامش مناسبة، ووضع إطار أو زوايا دائرية وظل خفيف للصور، وترتيبها في صفوف/أعمدة (شبكة أو Flex) بحيث تتكيف مع حجم الشاشة، مع تحسين المظهر عند مرور المؤشر (مثل تغيير بسيط في الظل أو التكبير الخفيف).**

سؤال تدريب 4: استخدم قواعد CSS التي تعلمتها في الدرس وغير مظهر قسم التذييل في الموقع الإلكتروني الخاص بك.

الإجابة: س4: تنسيق التذييل ليظهر بشكل واضح ومميز؛ باختيار لون خلفية مناسب (غالباً أغمق من المحتوى)، وتحديد لون نص متباين، وضبط المحاذاة (توسيط النص)، وإضافة مسافات داخلية (Padding) وحد علوي أو ظل خفيف للفصل عن المحتوى، مع تنسيق الروابط داخل التذييل (لون موحد وإزالة خط أسفل الرابط وتغيير اللون عند المرور).

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو استخدام قواعد CSS لتغيير مظهر قسم التذييل (Footer) في موقع إلكتروني. الفكرة هنا هي تنسيق التذييل ليظهر بوضوح ويميزه عن باقي المحتوى، مما يعزز التصميم العام. لتحقيق ذلك، نبدأ باختيار لون خلفية مناسب للتذييل، وغالباً ما يكون أغمق من لون خلفية المحتوى الرئيسي (مثل استخدام `background-color`) لخلق تباين بصري. ثم نحدد لون نص متباين مع الخلفية باستخدام `color` لضمان سهولة القراءة. لتحسين التخطيط، نضبط محاذاة النص داخل التذييل، عادةً بالتوسيط باستخدام `text-align: center`. ونضيف مسافات داخلية (Padding) باستخدام `padding` لخلق مساحة حول المحتوى، ويمكن إضافة حد علوي (border-top) أو ظل خفيف (box-shadow) لفصل التذييل عن المحتوى أعلاه. لتحسين الروابط داخل التذييل، ننسقها بتحديد لون موحد باستخدام `color`، وإزالة الخط السفلي الافتراضي باستخدام `text-decoration: none`، وإضافة تأثير تغيير اللون عند مرور المؤشر (hover) باستخدام `:hover`. إذن، الإجابة هي: **تنسيق التذييل ليظهر بشكل واضح ومميز؛ باختيار لون خلفية مناسب (غالباً أغمق من المحتوى)، وتحديد لون نص متباين، وضبط المحاذاة (توسيط النص)، وإضافة مسافات داخلية (Padding) وحد علوي أو ظل خفيف للفصل عن المحتوى، مع تنسيق الروابط داخل التذييل (لون موحد وإزالة خط أسفل الرابط وتغيير اللون عند المرور).**

سؤال تدريب 5: استخدم الصفحة الإلكترونية التي أنشأتها في الدرس الأول عن الذوق العام وأعد تصميمها باستخدام ملف CSS خارجي.

الإجابة: س5: إنشاء ملف CSS خارجي مستقل (مثل: style.css)، ثم ربطه بالصفحة من داخل جزء head، ونقل جميع التنسيقات من داخل الصفحة إلى الملف الخارجي (ألوان، خطوط، هوامش، تخطيط الأقسام)، واعتماد أصناف/معرفات لعناصر الصفحة لتوحيد التصميم، ثم اختبار الصفحة للتأكد أن التغييرات تُطبق من الملف الخارجي فقط.

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو استخدام الصفحة الإلكترونية التي تم إنشاؤها سابقاً عن الذوق العام وإعادة تصميمها باستخدام ملف CSS خارجي. الفكرة هنا هي فصل محتوى HTML عن تنسيقات CSS لتحسين تنظيم الكود وسهولة الصيانة. لتحقيق ذلك، نبدأ بإنشاء ملف CSS خارجي مستقل، مثلاً نسميه `style.css`. ثم نربط هذا الملف بالصفحة الإلكترونية (ملف HTML) من داخل جزء `<head>` باستخدام وسم `<link>`، مثل: `<link rel="stylesheet" href="style.css">`. بعد ذلك، ننقل جميع التنسيقات الموجودة داخل الصفحة (مثل الألوان باستخدام `color` و `background-color`، والخطوط باستخدام `font-family`، والهوامش باستخدام `margin` و `padding`، وتخطيط الأقسام باستخدام خصائص التخطيط) من داخل وسم `<style>` في HTML إلى الملف الخارجي `style.css`. لتوحيد التصميم، نعتمد أصناف (classes) أو معرفات (IDs) لعناصر الصفحة في HTML، ثم نستخدمها في ملف CSS لتطبيق التنسيقات عليها، مما يجعل الكود أكثر تنظيماً وقابلية لإعادة الاستخدام. أخيراً، نختبر الصفحة في المتصفح للتأكد من أن جميع التغييرات التصميمية تُطبق من الملف الخارجي `style.css` فقط، وأنه لم يعد هناك تنسيقات مضمنة في HTML. إذن، الإجابة هي: **إنشاء ملف CSS خارجي مستقل (مثل: style.css)، ثم ربطه بالصفحة من داخل جزء head، ونقل جميع التنسيقات من داخل الصفحة إلى الملف الخارجي (ألوان، خطوط، هوامش، تخطيط الأقسام)، واعتماد أصناف/معرفات لعناصر الصفحة لتوحيد التصميم، ثم اختبار الصفحة للتأكد أن التغييرات تُطبق من الملف الخارجي فقط.**

أي مما يلي يمثل خطوات تحويل قسم الصور في موقع ويب إلى معرض منظم ومتجاوب باستخدام CSS؟

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

الإجابة الصحيحة: b

الإجابة: توحيد أبعاد الصور، إضافة تباعد وهوامش، وضع إطار أو زوايا دائرية وظل، ترتيبها في شبكة أو Flex، إضافة تأثيرات عند المرور.

الشرح: 1. توحيد أبعاد الصور باستخدام خصائص مثل `width` و `object-fit`. 2. إضافة تباعد وهوامش باستخدام `margin` و `padding`. 3. تحسين المظهر البصري بإطار (`border`) أو زوايا دائرية (`border-radius`) وظل (`box-shadow`). 4. تنظيم الصور في تخطيط مرن مثل Flexbox أو Grid لضمان التجاوب. 5. إضافة تأثيرات تفاعلية عند مرور المؤشر باستخدام `:hover`.

تلميح: فكر في الخطوات التي تجعل مجموعة من الصور تبدو كمعرض متكامل ويتكيف مع الشاشات المختلفة.

التصنيف: صيغة/خطوات | المستوى: متوسط

ما الهدف الرئيسي من استخدام ملف CSS خارجي لإعادة تصميم صفحة ويب؟

• أ) جعل الصفحة تعمل بدون اتصال بالإنترنت.
• ب) زيادة سرعة تحميل الصور فقط.
• ج) فصل محتوى HTML عن تنسيقات CSS لتحسين تنظيم الكود وسهولة الصيانة وإعادة الاستخدام.
• د) إضافة تأثيرات معقدة لا تدعمها CSS الداخلية.

الإجابة الصحيحة: c

الإجابة: فصل محتوى HTML عن تنسيقات CSS لتحسين تنظيم الكود وسهولة الصيانة وإعادة الاستخدام.

الشرح: 1. فصل المحتوى (HTML) عن التصميم (CSS) يجعل الكود أنظف وأسهل في القراءة. 2. يسهل صيانة الموقع، حيث يمكن تعديل التصميم في ملف واحد دون لمس محتوى الصفحات. 3. يسمح بإعادة استخدام نفس التنسيقات عبر صفحات متعددة. 4. يحسن أداء الموقع حيث يمكن للمتصفح تخزين ملف CSS مؤقتاً.

تلميح: فكر في مزايا فصل بنية الموقع (HTML) عن مظهره (CSS).

التصنيف: مفهوم جوهري | المستوى: سهل

أي من الخصائص التالية تُستخدم غالباً في CSS لتحسين مظهر قسم التذييل (Footer) وجعله مميزاً؟

• أ) float: left، position: absolute، z-index: 999.
• ب) background-color (لون خلفية أغمق)، color (لون نص متباين)، text-align: center، padding، border-top.
• ج) animation، transform: rotate، filter: blur.
• د) display: none، visibility: hidden، opacity: 0.

الإجابة الصحيحة: b

الإجابة: background-color (لون خلفية أغمق)، color (لون نص متباين)، text-align: center، padding، border-top.

الشرح: 1. `background-color`: لاختيار لون خلفية مناسب (غالباً أغمق). 2. `color`: لتحديد لون نص يظهر بوضوح على الخلفية. 3. `text-align: center`: لمحاذاة النص في المنتصف. 4. `padding`: لإضافة مسافة داخلية حول محتوى التذييل. 5. `border-top` أو `box-shadow`: لإضافة حد علوي أو ظل لفصله عن المحتوى أعلاه.

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

التصنيف: صيغة/خطوات | المستوى: متوسط