📚 صفحة إلكترونية
المفاهيم الأساسية
الصفحة الإلكترونية المستجيبة: صفحة ويب يتغير تنسيقها وعرضها تلقائياً ليتناسب مع حجم شاشة الجهاز المستخدم (مثل الهواتف والأجهزة اللوحية).
خريطة المفاهيم
```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% وضبط الارتفاع تلقائياً
الصفحة الإلكترونية
تحليل الصفحة الإلكترونية
#### سؤال 1: هل هذه الصفحة إلكترونية مستجيبة؟
#### سؤال 2: ما المزايا التي تقدمها الصفحة الإلكترونية هذه مقارنة بالصفحة الإلكترونية الخاصة بالمقطع البرمجي الخاص بعنوان HTML الأولى؟
```
نقاط مهمة
- تحتوي هذه الصفحة على سؤالين تحليليين حول صفحة ويب.
- السؤال الأول يطلب تحديد ما إذا كانت الصفحة المعروضة مستجيبة أم لا.
- السؤال الثاني يطلب مقارنة مزايا هذه الصفحة بصفحة HTML الأولى التي تمت دراستها سابقاً.