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

📚 تنسيق القائمة المستجيبة باستخدام CSS

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

استعلام الوسائط (Media Query): قاعدة CSS تُستخدم لتطبيق أنماط مختلفة بناءً على خصائص جهاز المستخدم (مثل عرض الشاشة).

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

```markmap

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

أنواع CSS

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

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

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

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

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

#### الأدوات

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

###### أماكن الاستخدام

####### داخل ملف HTML (CSS الداخلي)

####### داخل ملف CSS خارجي

######### استعلام الوسائط في ملف CSS خارجي

######## يوضع في نهاية ملف CSS

######## مثال تطبيقي

######### الشرط: `@media screen and (max-width: 800px)`

######### الإجراء: `img { width: 70%; height: auto; }`

######## الشرح

######### يعمل على الأجهزة التي يصل عرض إطار العرض (Viewport Width) إلى 800 بكسل

######### يتم تصغير عرض الصورة إلى 70% إذا تغير ارتفاع الصورة تلقائياً

######### يؤثر في أبعاد الصور التي يقل عرضها عن 800 بكسل

######## تنسيق الصور باستخدام استعلامات الوسائط

######### الشرط: `@media screen and (max-width: 900px)`

########## الإجراء: `img { width:50%; margin: 6px; }`

######### الشرط: `@media screen and (max-width: 700px)`

########## الإجراء: `img { width:100%; height: auto; }`

######## خطوات التطبيق

########## 1. إضافة استعلامات الوسائط في ملف CSS

########## 2. تنسيق العناصر في فئة محددة (Class)

########## 3. حفظ ملف CSS وفتح الصفحة في المتصفح

########## 4. تغيير حجم نافذة المتصفح لرؤية تغير أبعاد الصور

######### اختبار التصميم المستجيب

########## محاكاة المتصفح

############ بيئة محاكاة مايكروسوفت إيدج

############ الغرض: محاكاة الأجهزة ذات عرض الشاشة المختلف ومعرفة كيف تتغير أبعاد الصور

############ مثال: في نافذة متصفح بعرض 1100 بكسل، لا تتأثر الصور باستعلامي الوسائط المؤثرين على الشاشات ≤ 900 بكسل

########## تأثير استعلامات الوسائط عند عرض إطار عرض محدد

############ عرض 700 بكسل

############# يتم تطبيق الاستعلام على الأجهزة بعرض شاشة 700 بكسل وأقل (حتى 701 بكسل)

############# يقل مقياس عرض الصور إلى 50%

############ عرض 900 بكسل

############# يتم تطبيق الاستعلام على الأجهزة بعرض شاشة 900 بكسل وأقل (حتى 701 بكسل)

############# يقل مقياس عرض الصور إلى 50%

تنسيق قسم القائمة

استخدام استعلامات الوسائط

#### لتنسيق عناصر القائمة في الأجهزة المختلفة

إضافة مقطع CSS

#### في الفئة المقابلة لملف CSS

خصائص CSS لقائمة (.menu)

#### `.menu`

##### background-color: #426C35;

##### overflow: auto;

#### `.menu ul`

##### text-align: center;

##### padding-top: 20px;

##### padding-bottom: 20px;

##### text-decoration: none;

#### `.menu li`

##### display: inline-block;

##### text-align: center;

#### `.menu li a`

##### display: inline-block;

##### height: auto;

##### width: 150px;

##### color: #333333;

##### background-color: #f5f5f5;

##### padding: 10px;

##### margin: 4px;

##### text-align: center;

##### font-size: 18px;

##### font-weight: bold;

##### text-decoration: none;

##### border-radius: 4px;

#### `.menu li a:hover`

##### background-color: #d6d599;

العرض

#### توضح عناصر القائمة أفقياً في سطر واحد

تنسيق القائمة المستجيبة

#### مثال تطبيقي: موقع كرة القدم

#### استعلام وسائط لتغيير تنسيق القائمة

##### الشرط: `@media screen and (max-width: 700px)`

###### الإجراء: `.menu li { display: block; text-align: center; }`

##### الشرح

###### يطبق عندما يكون عرض شاشة الجهاز أقل من 700 بكسل.

###### يغير عرض عناصر القائمة من أفقي (inline-block) إلى عمودي (block).

#### اختبار التصميم المستجيب

##### باستخدام بيئة محاكاة مايكروسوفت إيدج.

##### عند تصغير نافذة المتصفح (لتقليل عرض الإطار)، يتغير شكل القائمة.

##### في الإطار الواسع (مثال: 1100 بكسل)، تظهر العناصر في سطر أفقي ولا يؤثر الاستعلام.

```

نقاط مهمة

• لإضافة تنسيق مستجيب لعناصر القائمة، نضيف استعلام وسائط في ملف CSS الخارجي.
• استعلام الوسائط `@media screen and (max-width: 700px)` يغير عرض عناصر القائمة إلى عمودي عندما يكون عرض الشاشة أقل من 700 بكسل.
• يمكن اختبار التغيير باستخدام أداة محاكاة المتصفح (مثل مايكروسوفت إيدج) عن طريق تصغير نافذة المتصفح.
• في الشاشات الواسعة (أكثر من 700 بكسل)، لا يؤثر هذا الاستعلام ويبقى تنسيق القائمة الأساسي (أفقي) سارياً.

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

إذا كان عرض الشاشة أقل من 700 بكسل، فستظهر عناصر القائمة عمودياً.

سيطبق استعلام الوسائط إذا كان عرض شاشة الجهاز أقل من 700 بكسل.

@media screen and (max-width: 700px) { .menu li { display: block; text-align: center; } }

في البداية، مع وجود إطار عرض واسع، على سبيل المثال: 1100 بكسل، لمحاكاة شاشة جهاز واسعة، تم وضع عناصر القائمة في سطر، كما تم تحديدها بواسطة ملف CSS الأول. بالنسبة للأجهزة التي يزيد عرض شاشتها عن 700 بكسل، فإن استعلام الوسائط أعلاه ليس له أي تأثير.

(Wide Viewport)

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

أنشئ موقعاً إلكترونياً عن تاريخ كرة القدم.

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

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

صورة لكأس العالم لكرة القدم وفريق كرة قدم.

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

لذلك، من أجل تنسيق مستجيب لعناصر القائمة، لموقع إلكتروني مشجعي كرة القدم، يجب عليك إضافة استعلام وسائط في ملف CSS الخارجي وحفظ الملف مرة أخرى، يمكن أن يحتوي استعلام الوسائط على النتيجة التالية: إذا كان عرض الشاشة أقل من 700 بكسل، فستظهر عناصر القائمة عمودياً. سيطبق استعلام الوسائط إذا كان عرض شاشة الجهاز أقل من 700 بكسل. @media screen and (max-width: 700px) { .menu li { display: block; text-align: center; } } في البداية، مع وجود إطار عرض واسع، على سبيل المثال: 1100 بكسل، لمحاكاة شاشة جهاز واسعة، تم وضع عناصر القائمة في سطر، كما تم تحديدها بواسطة ملف CSS الأول. بالنسبة للأجهزة التي يزيد عرض شاشتها عن 700 بكسل، فإن استعلام الوسائط أعلاه ليس له أي تأثير. --- SECTION: إطار عرض واسع --- (Wide Viewport) استخدمم بيئة محاكاة مايكروسوفت إيدج حيث عند تصغير نافذة المتصفح، يجب أن يتغير شكل القائمة. --- SECTION: تعمل كرة القدم على جمع الناس معاً --- أنشئ موقعاً إلكترونياً عن تاريخ كرة القدم. --- SECTION: التاريخ --- بدأت كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر، وحدثت كرة القدم المئوية عام 1928م، ثم تطورت لتصبح اللعبة الأكثر شعبية في العالم. أقيمت أول بطولة كأس العالم عام 1930م في الأوروغواي، وفازت بها الأوروغواي. أقيمت كأس العالم لكرة القدم كل أربع سنوات منذ ذلك الحين، باستثناء فترات الحرب العالمية الثانية. أقيمت كأس العالم لكرة القدم 2022 في قطر، وفازت بها الأرجنتين. أقيمت كأس العالم لكرة القدم 2026 في الولايات المتحدة وكندا والمكسيك. --- SECTION: المعرض --- كرة القدم هي رياضة جماعية تلعب بين فريقين يتكون كل منهما من 11 لاعباً يستخدمون أقدامهم بشكل أساسي لضرب الكرة أو تمريرها. الهدف هو تسجيل هدف في مرمى الفريق المنافس. تُعد كرة القدم الرياضة الأكثر شعبية في العالم، حيث يمارسها أكثر من 250 مليون شخص في أكثر من 200 دولة ومنطقة، مما يجعلها الرياضة الأكثر انتشاراً في العالم. صورة لكأس العالم لكرة القدم وفريق كرة قدم. وزارة التعليم Ministry of Education 267 2025 - 1447