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

📚 تنسيق الصور

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

استعلامات الوسائط (Media Queries): قواعد CSS تُضاف في ملف 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. تغيير حجم نافذة المتصفح لرؤية تغير أبعاد الصور

```

نقاط مهمة

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

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

فيما يلي سيضاف استعلاما الوسائط وستضاف في ملف CSS:

اضف استعلامات الوسائط التي ستؤثر على أبعاد الصور، مثلاً، عرض الشاشة معين في ملف CSS للموقع الإلكتروني ويحتوي على قواعد CSS التي تحدد خصائص الصور.

لتنسيق العناصر في فئة محددة، تحتاج إلى استخدام القسم (Class) كما تم تعريفه في ملف النمط CSS.

سيكون هامش الصورة 6 بكسل.

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

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

كان الوقت أجمل اليوم الصور الخاص بك يتغير طبقا لحجم الشاشة التي يتم تحميل الصفحة عليها، وهذا يعني أن عناصر الصفحة ستظهر بشكل مختلف على شاشة جهاز الحاسب، أو على جهاز لوحي أو على هاتف الذكي. فيما يلي سيضاف استعلاما الوسائط وستضاف في ملف CSS: اضف استعلامات الوسائط التي ستؤثر على أبعاد الصور، مثلاً، عرض الشاشة معين في ملف CSS للموقع الإلكتروني ويحتوي على قواعد CSS التي تحدد خصائص الصور. لتنسيق العناصر في فئة محددة، تحتاج إلى استخدام القسم (Class) كما تم تعريفه في ملف النمط CSS. سيكون هامش الصورة 6 بكسل. احفظ ملف CSS، ثم افتح الصفحة الإلكترونية في المتصفح. عند تغيير حجم نافذة المتصفح، فإن أبعاد الصور تتغير حسب استعلامات الوسائط. وزارة التعليم Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **CODE_SNIPPET**: Untitled Description: CSS code block demonstrating media queries for image styling. **DIAGRAM**: Untitled Description: Diagram showing two browser windows illustrating responsive design. The left window shows a smaller screen layout with elements stacked vertically, and the right window shows a larger screen layout with elements arranged differently. Arrows indicate the change in layout based on screen size. **TEXT_LABEL**: Untitled Description: A small box with the text '.CSS' indicating a CSS file.