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

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

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

📚 معلومات الصفحة

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 تصميم الموقع الإلكتروني

المفاهيم الأساسية

رأس الصفحة (Header): يشمل ترويسة رسومية وشريط التنقل.

المحتوى الرئيس (Main content): يشمل المحتوى المتمثل في النصوص والصور وغيرها.

التذييل (Footer): يحتوي على روابط مفيدة.

وسم التقسيم `

`: يُستخدم في HTML لإنشاء أقسام للمحتوى (كالنص، الصور، الرأس، التذييل، شريط التنقل). يعمل كحاوية لوضع أكثر من عنصر HTML داخلها، مما يسهل تطبيق أنماط CSS على المجموعة كلها.

خاصية `class`: تُستخدم مع HTML لتطبيق التنسيق نفسه على العناصر التي لها نفس الخاصية، مما يعطيها نفس الشكل والنمط.

خريطة المفاهيم

```markmap

تصميم الموقع الإلكتروني

مراحل الإنشاء

1. التخطيط

  • تحديد الهدف والغرض من الموقع
  • رسم البنية العامة

2. التصميم

  • تكوين صورة واضحة عن الموقع ومحتوياته
  • رسم المخطط العام للصفحة الرئيسية والفرعية على الورق

3. التنفيذ

  • تصميم الصفحات وتطوير المحتوى
  • استخدام برامج تصميم المواقع (مثل: فيجوال ستوديو كود)

#### تقسيم الصفحة إلى أقسام

  • رأس الصفحة (Header)
  • المحتوى الرئيس (Main content)
  • التذييل (Footer)

#### استخدام HTML و CSS

##### وسم التقسيم `

`

  • حاوية لعناصر HTML
  • لتطبيق أنماط CSS على المجموعة

##### خاصية `class`

  • لتطبيق نفس التنسيق على عناصر متعددة

#### تخطيط العناصر

  • Menu
  • Main
  • Photos
  • Footer

4. الاختبار والنشر

  • اختيار كل صفحة بعناية
  • التحقق من عمل جميع الروابط بين الصفحات بشكل صحيح
  • نشر الموقع على شبكة الإنترنت

الخصائص الواجب توافرها

  • محتوى واضح
  • صور ورسومات مناسبة للمحتوى
  • نسق لوني مناسب
  • تنسيق مناسب للعرض على الهواتف النقالة

```

نقاط مهمة

  • تقسيم الصفحة إلى أقسام مختلفة (رأس، محتوى رئيس، تذييل) خطوة مهمة جداً في تصميم الموقع.
  • قبل إنشاء ملف CSS، يجب تقسيم الصفحة إلى أقسام.
  • نستخدم خاصية `id` وخاصية `class` مع وسم `
    ` لتعديل نمط CSS بسهولة.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

تصميم الموقع الإلكتروني

نوع: محتوى تعليمي

في هذه المرحلة ستضع تصميماً لمخطط صفحة إلكترونية، والتي ستحتوي على ثلاثة أجزاء مختلفة هي:

نوع: محتوى تعليمي

رأس الصفحة (Header) ويشمل ترويسة رسومية وشريط التنقل.

نوع: محتوى تعليمي

المحتوى الرئيس (Main content) ويشمل المحتوى المتمثل في النصوص والصور وغيرها.

نوع: محتوى تعليمي

التذييل (Footer) ويحتوي على روابط مفيدة.

نوع: محتوى تعليمي

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

تجميع النص

نوع: محتوى تعليمي

يتم استخدام وسم التقسيم <div> في لغة HTML لإنشاء أقسام للمحتوى مثل (النص، الصور، الرأس، التذييل، شريط التنقل، إلى آخره).

نوع: محتوى تعليمي

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

تخطيط الصفحات

نوع: محتوى تعليمي

نستخدم خاصية id و خاصية class مع وسم التقسيم لتعديل نمط CSS بسهولة. يتم استخدام خاصية class مع HTML لتطبيق التنسيق نفسه على عناصر التي لها نفس خاصية class لها نفس الشكل والنمط.

نوع: محتوى تعليمي

أنشئ تخطيطاً للعناصر التي ستستخدمها لتطبيق div و class عليها. ستحتوي صفحتك على أربعة أقسام رئيسة:

نوع: محتوى تعليمي

Menu

نوع: محتوى تعليمي

Main

نوع: محتوى تعليمي

Photos

نوع: محتوى تعليمي

Footer

نوع: METADATA

وزارة التعليم Ministry of Education 233 2025 - 1447

📄 النص الكامل للصفحة

--- SECTION: تصميم الموقع الإلكتروني --- في هذه المرحلة ستضع تصميماً لمخطط صفحة إلكترونية، والتي ستحتوي على ثلاثة أجزاء مختلفة هي: رأس الصفحة (Header) ويشمل ترويسة رسومية وشريط التنقل. المحتوى الرئيس (Main content) ويشمل المحتوى المتمثل في النصوص والصور وغيرها. التذييل (Footer) ويحتوي على روابط مفيدة. حان الوقت لإنشاء ملف CSS خاص بك. قبل إنشاء ملف CSS تحتاج إلى تقسيم الصفحة إلى أقسام مختلفة، حيث يُعد تقسيم الصفحة خطوة مهمة جداً في تصميم الموقع الإلكتروني. --- SECTION: تجميع النص --- يتم استخدام وسم التقسيم <div> في لغة HTML لإنشاء أقسام للمحتوى مثل (النص، الصور، الرأس، التذييل، شريط التنقل، إلى آخره). يعمل وسم التقسيم <div> كحاوية يمكنك وضع أكثر من عنصر HTML داخلها، وهذا مفيد جداً في تطبيق أنماط CSS على المجموعة كلها. --- SECTION: تخطيط الصفحات --- نستخدم خاصية id و خاصية class مع وسم التقسيم لتعديل نمط CSS بسهولة. يتم استخدام خاصية class مع HTML لتطبيق التنسيق نفسه على عناصر التي لها نفس خاصية class لها نفس الشكل والنمط. أنشئ تخطيطاً للعناصر التي ستستخدمها لتطبيق div و class عليها. ستحتوي صفحتك على أربعة أقسام رئيسة: Menu Main Photos Footer وزارة التعليم Ministry of Education 233 2025 - 1447

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 4 بطاقة لهذه الصفحة

ما هو الغرض الأساسي من استخدام وسم التقسيم <div> في HTML عند تصميم موقع إلكتروني؟

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

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

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

الشرح: 1. وسم <div> هو أداة هيكلية في HTML. 2. يستخدم لإنشاء أقسام أو حاويات للمحتوى. 3. يمكن وضع عناصر متعددة (نصوص، صور، إلخ) داخل <div> واحد. 4. الهدف الرئيسي هو تجميع العناصر لتطبيق أنماط CSS عليها كمجموعة واحدة، مما يجعل التصميم أكثر كفاءة وسهولة في الصيانة.

تلميح: فكر في كيفية تنظيم المحتوى وتطبيق التنسيق عليه.

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

ما هي الأقسام الرئيسية الثلاثة التي يجب أن يحتويها مخطط صفحة إلكترونية وفقاً لمرحلة التصميم؟

  • أ) القائمة (Menu)، والمحتوى (Content)، والصور (Gallery).
  • ب) العنوان (Title)، والنص (Body)، والحاشية (Footnote).
  • ج) رأس الصفحة (Header)، والمحتوى الرئيس (Main content)، والتذييل (Footer).
  • د) الشريط الجانبي (Sidebar)، والمحتوى المركزي (Center)، والهامش (Margin).

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

الإجابة: رأس الصفحة (Header)، والمحتوى الرئيس (Main content)، والتذييل (Footer).

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

تلميح: تذكر أن الصفحة تنقسم إلى أجزاء علوية ووسطى وسفلية.

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

ما الفرق بين استخدام خاصية id وخاصية class مع وسم <div> في HTML؟

  • أ) تستخدم id للروابط و class للنصوص فقط.
  • ب) تستخدم class لتطبيق نفس التنسيق على عدة عناصر، بينما تستخدم id لعنصر فريد واحد.
  • ج) تستخدم id داخل ملفات JavaScript فقط، و class داخل ملفات CSS فقط.
  • د) لا فرق بينهما، ويمكن استخدام أي منهما لنفس الغرض.

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

الإجابة: تستخدم class لتطبيق نفس التنسيق على عدة عناصر، بينما تستخدم id لعنصر فريد واحد.

الشرح: 1. كلتا الخاصيتين (id و class) تستخدمان مع وسوم HTML مثل <div> لتطبيق أنماط CSS. 2. خاصية class: تُستخدم عندما نريد تطبيق نفس النمط والشكل على مجموعة من العناصر المتشابهة. 3. خاصية id: تُستخدم لتحديد عنصر واحد فريد في الصفحة وتطبيق نمط خاص عليه فقط. 4. الاختلاف الجوهري هو في نطاق التطبيق: class للجماعة، id للفرد.

تلميح: فكر في التكرار والتفرد عند تطبيق الأنماط.

التصنيف: فرق بين مفهومين | المستوى: متوسط

ما الوظيفة الرئيسة لاستخدام وسم التقسيم <div> في لغة HTML عند تصميم صفحات المواقع الإلكترونية؟

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

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

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

الشرح: 1. وسم <div> هو عنصر هيكلي في HTML يُستخدم لإنشاء أقسام (Sections). 2. يعمل الوسم كـ 'حاوية' (Container) تضم بداخلها عناصر متنوعة مثل النصوص والصور. 3. الفائدة الأساسية هي القدرة على استهداف هذه الحاوية عبر CSS لتطبيق التنسيقات على كل ما بداخلها مرة واحدة، مما يوفر الجهد وينظم الكود.

تلميح: فكر في كيفية تنظيم العناصر المتعددة في صفحة الويب لتسهيل تنسيق مظهرها دفعة واحدة بدلاً من تنسيق كل عنصر بشكل منفرد.

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