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

📚 التصميم المستجيب

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

التصميم المستجيب: أسلوب تصميم صفحات إلكترونية يمكن تغيير حجمها ليناسب حجم جهاز العرض.

إطار العرض (Viewport): المنطقة المرئية للمستخدم من الصفحة الإلكترونية، ويتم التحكم فيه بواسطة وسم ``.

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

```markmap

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

أنواع CSS

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

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

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

تنظيم HTML

استخدام وسم

ودالة class

محددات CSS

محدد Class (.)

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

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

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

الإطار (Border)

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

الهامش (Margin)

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

الفراغ (Padding)

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

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

تعريف

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

مزايا

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

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

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

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

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

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

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

التصميم المستجيب

#### الأدوات

##### شبكة تخطيطية (Schematic Grid)

##### النسب المئوية للصورة

##### إطار العرض ميتا (Meta Viewport)

##### استعلامات الوسائط (Media Queries)

#### إطار العرض (Viewport)

##### التنفيذ القياسي

###### ``

###### العرض يضبط وفقًا لعرض الجهاز

###### مستوى التكبير الأولي هو 100%

##### بدون وسم إطار العرض

###### تعرض الصفحات بعرض قياسي لشاشة الحاسب

###### يتم تصغيرها لتلائم شاشة الهاتف

###### يحتاج المستخدم إلى تكبير الصفحة للتصفح

```

نقاط مهمة

• لإنشاء تصميم مستجيب، نستخدم إحداثيات X و Y على شبكة تخطيطية والنسب المئوية للصورة.
• يجب إضافة وسم `` مع استعلامات الوسائط داخل مقطع HTML لإنشاء مخطط ديناميكي.
• الوسم القياسي لإطار العرض هو: ``
• بدون هذا الوسم، تعرض صفحات الويب على الهواتف بعرض شاشة الحاسب ثم تُصغر، مما يجبر المستخدم على التكبير يدوياً.

التصميم المستجيب

عند تصميم الصفحات الإلكترونية المستجيبة، فإنك تستخدم إحداثيات X و Y على شبكة تخطيطية (Schematic Grid) ، ويمكنك أيضًا استخدام النسب المئوية للصورة بدلاً من متغيرات العرض الثابتة. تمنحك هذه الإعدادات تخطيطًا مرنًا للصفحة يمكن تغيير حجمها ليناسب حجم جهاز العرض. ولإنشاء مخطط ديناميكي أو مستجيب، عليك إضافة إطار العرض ميتا (Meta Viewport) مع استعلامات الوسائط (Media Queries) في وسم <Meta> داخل مقطع HTML.

إطار العرض

إن إطار العرض (Viewport) هو المنطقة المرئية للمستخدم من الصفحة الإلكترونية، ويتم التحكم فيه بواسطة وسم <Meta>. ولتحقيق الاستجابة في تصميم الموقع الإلكتروني، يكون التنفيذ القياسي لإطار العرض كالآتي: العرض (Width) في الصفحة الإلكترونية المعروضة يضبط وفقًا لعرض الجهاز، في حين أن مستوى التكبير (Zoom Level) للصفحة التي يتم تحميلها أولاً بواسطة المتصفح هو 100%.

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

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

--- SECTION: التصميم المستجيب --- التصميم المستجيب عند تصميم الصفحات الإلكترونية المستجيبة، فإنك تستخدم إحداثيات X و Y على شبكة تخطيطية (Schematic Grid) ، ويمكنك أيضًا استخدام النسب المئوية للصورة بدلاً من متغيرات العرض الثابتة. تمنحك هذه الإعدادات تخطيطًا مرنًا للصفحة يمكن تغيير حجمها ليناسب حجم جهاز العرض. ولإنشاء مخطط ديناميكي أو مستجيب، عليك إضافة إطار العرض ميتا (Meta Viewport) مع استعلامات الوسائط (Media Queries) في وسم <Meta> داخل مقطع HTML. --- SECTION: إطار العرض --- إطار العرض إن إطار العرض (Viewport) هو المنطقة المرئية للمستخدم من الصفحة الإلكترونية، ويتم التحكم فيه بواسطة وسم <Meta>. ولتحقيق الاستجابة في تصميم الموقع الإلكتروني، يكون التنفيذ القياسي لإطار العرض كالآتي: العرض (Width) في الصفحة الإلكترونية المعروضة يضبط وفقًا لعرض الجهاز، في حين أن مستوى التكبير (Zoom Level) للصفحة التي يتم تحميلها أولاً بواسطة المتصفح هو 100%. بدون وسم إطار العرض ميتا، تعرض متصفحات الهواتف الذكية الصفحات الإلكترونية بعرض قياسي لشاشة جهاز الحاسب المكتبي، ثم يصغرها المتصفح لتلائم شاشة الهاتف الذكي. نتيجة لذلك يحتاج المستخدم إلى تكبير الصفحة ليتمكن من تصفحها، بينما يتكيف الموقع الإلكتروني المستجيب مع المتصفحات المختلفة في الأجهزة الذكية بغض النظر عن حجم الشاشة. وزارة التعليم Ministry of Education 255 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: ضبط عرض الصفحة ليتطابق مع عرض جهاز المستخدم أيا كان حجم الشاشة. Description: A blue-bordered text box with an arrow pointing to the 'meta name="viewport"' code snippet. It describes the effect of the viewport meta tag on page width. Context: Explains how the viewport meta tag ensures the page width matches the user's device width. **BOXED_EQUATION**: Meta Viewport Code Description: An orange-highlighted box containing an HTML meta tag for viewport configuration. This tag sets the viewport width to the device width and the initial zoom level to 1.0. Context: Provides the standard HTML meta tag for implementing a responsive viewport. **DIAGRAM**: يضبط مستوى التكبير الأولي عند تحميل الصفحة لأول مرة من خلال المتصفح. Description: A blue-bordered text box with an arrow pointing to the 'meta name="viewport"' code snippet. It describes the effect of the viewport meta tag on the initial zoom level. Context: Explains how the viewport meta tag controls the initial zoom level when a page is loaded. **DIAGRAM**: يعطي المتصفح التعليمات اللازمة للتحكم في أبعاد وحجم الصفحة. Description: A blue-bordered text box with an arrow pointing to the 'meta name="viewport"' code snippet. It describes the instructions given to the browser for controlling page dimensions and size. Context: Explains that the viewport meta tag provides instructions to the browser for managing page dimensions and size.