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

📚 الموقع الإلكتروني المستجيب

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

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

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

```markmap

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

أنواع CSS

صفحات الأنماط المضمنة (Inline style)

صفحات الأنماط الداخلية (Internal style sheets)

صفحات الأنماط الخارجية (External style sheets)

تنظيم HTML

استخدام وسم

ودالة class

محددات CSS

محدد Class (.)

#### استخدام النقطة (.) قبل اسم class

#### مثال: تنسيق قسم menu class

خصائص نموذج الصندوق (Box-Model)

الإطار (Border)

#### حدود تفصل بين حافة كل صندوق عن الآخر

الهامش (Margin)

#### المساحة خارج حدود الإطار

الفراغ (Padding)

#### المسافة ما بين الإطار والمحتوى

الموقع الإلكتروني المستجيب

تعريف

#### أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم

مزايا

#### تحسين تجربة المستخدم

##### يتكيف مع حجم الشاشة المختلفة

##### يوفر تجربة تصفح سهلة وممتعة

#### سهولة التحديث

##### تحديث موقع واحد فقط بدلاً من مواقع متعددة

#### توفير المال

##### إنشاء موقع واحد يناسب جميع المستخدمين بدلاً من مواقع منفصلة

```

نقاط مهمة

• الموقع المستجيب يتكيف مع حجم الشاشة المختلفة على الأجهزة الذكية (حاسب، هاتف، لوحي).
• من مزايا الموقع المستجيب: تحسين تجربة المستخدم، وسهولة التحديث، وتوفير المال.
• يظهر الموقع نفسه بشكل متكيف على شاشات الحاسب المحمول واللوحي والهاتف الذكي.

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

تحسين تجربة المستخدم: عند زيارة المواقع الإلكترونية التقليدية من خلال الهواتف الذكية، قد يحتاج المستخدم إلى تكبير الصفحة ليتمكن من تصفح الموقع، بينما يتكيف الموقع الإلكتروني المستجيب (Responsive Website) مع حجم الشاشة المختلفة على الأجهزة الذكية أياً كان حجم شاشتها، ويوفر تجربة تصفح سهلة وممتعة للوقت، مما يعني أن يقضي المستخدم المزيد من الوقت أثناء زيارته للموقع.

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

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

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

254

--- SECTION: الموقع الإلكتروني المستجيب --- هو أحد أساليب التصميم والتطوير التي يستجيب فيها الموقع لسلوك المستخدم وخصائص الجهاز الذي يستخدمه في تصفح هذا الموقع، وذلك وفق متغيرات عديدة مثل: حجم الشاشة ونظام التشغيل، واتجاه الشاشة، وذلك باستخدام مخططات وصور مرنة في الموقع؛ بهدف تحسين تجربة المستخدم. --- SECTION: مزايا الموقع الإلكتروني المستجيب --- تحسين تجربة المستخدم: عند زيارة المواقع الإلكترونية التقليدية من خلال الهواتف الذكية، قد يحتاج المستخدم إلى تكبير الصفحة ليتمكن من تصفح الموقع، بينما يتكيف الموقع الإلكتروني المستجيب (Responsive Website) مع حجم الشاشة المختلفة على الأجهزة الذكية أياً كان حجم شاشتها، ويوفر تجربة تصفح سهلة وممتعة للوقت، مما يعني أن يقضي المستخدم المزيد من الوقت أثناء زيارته للموقع. < سهولة التحديث: بدلاً من الحاجة إلى وجود الموقع إلكتروني خاص بأجهزة الحاسب، وآخر خاص بالهواتف الذكية مما يستدعي تحديث في عدة أماكن، فإنه يمكن استخدام الموقع الإلكتروني المستجيب من قبل الجميع، وذلك ليسهل على مدير الموقع تحديث موقع واحد فقط، مما يوفر الكثير من الوقت والجهد. < توفير المال: إن تكلفة إنشاء موقع إلكتروني لأجهزة الحاسب وتطبيقاته، أو موقع خاص لحاملي الهواتف الذكية يُعد مكلفاً، ولهذا يمكن توفير المال من خلال إنشاء الموقع الإلكتروني المستجيب بحيث يناسب جميع المستخدمين. وزارة التعليم Ministry of Education 2025 - 1447 254 --- VISUAL CONTEXT --- **IMAGE**: Untitled Description: A laptop, a tablet, and a smartphone are arranged on a wooden surface. All three devices display the same website, which appears to be related to a sports event, possibly football, featuring images of players, a trophy, and stadium scenes. The website has a green and white color scheme. Context: Illustrates the concept of responsive web design by showing how a website adapts to different screen sizes on various devices.