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

📚 تطبيق معا - تدريب 1

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

وسم `` لإطار العرض: لضبط عرض الصفحة الإلكترونية على عرض شاشة كل جهاز.

استعلام وسائط: لتقليل مقياس عرض الصفحة الإلكترونية إلى 60%، وضبط ارتفاعها تلقائياً عندما يكون عرض شاشة الجهاز مساوياً لـ 500 بكسل أو أقل منه.

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

```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 بكسل)، تظهر العناصر في سطر أفقي ولا يؤثر الاستعلام.

#### تأثير عرض إطار العرض على القائمة

##### عرض إطار العرض أكبر من 700 بكسل

###### يؤثر وسم `` لإطار العرض على تنسيق القائمة.

###### عند تصغير النافذة من 1100 بكسل إلى 701 بكسل، يمكن رؤية العناصر التي سيتم نقلها في القائمة.

##### عرض إطار العرض أقل من أو يساوي 700 بكسل

###### يؤثر استعلام الوسائط على عناصر القائمة.

###### عند عرض 700 بكسل، يتم وضع عناصر القائمة في قائمة عمودية ومركزية.

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

تطبيق معا

تدريب 1

#### المطلوب

##### إضافة وسم `` لإطار العرض إلى مقطع HTML معطى

##### إضافة استعلام وسائط (Media Query) إلى نفس المقطع

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

###### الإجراء: تقليل مقياس عرض الصفحة إلى 60% وضبط الارتفاع تلقائياً

```

نقاط مهمة

• التدريب يتطلب إضافة وسم `` خاص بإطار العرض (Viewport) إلى هيكل HTML موجود.
• الهدف من وسم `` هو جعل عرض الصفحة يتناسب مع عرض شاشة أي جهاز.
• التدريب يتطلب أيضاً إضافة استعلام وسائط (Media Query) داخل الوسم `