ودالة class
محددات CSS
محدد Class (.)
#### استخدام النقطة (.) قبل اسم class
#### مثال: تنسيق قسم menu class
خصائص نموذج الصندوق (Box-Model)
الإطار (Border)
#### حدود تفصل بين حافة كل صندوق عن الآخر
الهامش (Margin)
#### المساحة خارج حدود الإطار
الفراغ (Padding)
#### المسافة ما بين الإطار والمحتوى
الموقع الإلكتروني المستجيب
تعريف
#### أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم
مزايا
#### تحسين تجربة المستخدم
##### يتكيف مع حجم الشاشة المختلفة
##### يوفر تجربة تصفح سهلة وممتعة
#### سهولة التحديث
##### تحديث موقع واحد فقط بدلاً من مواقع متعددة
#### توفير المال
##### إنشاء موقع واحد يناسب جميع المستخدمين بدلاً من مواقع منفصلة
التصميم المستجيب
#### الأدوات
##### شبكة تخطيطية (Schematic Grid)
##### النسب المئوية للصورة
##### إطار العرض ميتا (Meta Viewport)
##### استعلامات الوسائط (Media Queries)
#### إطار العرض (Viewport)
##### التنفيذ القياسي
###### ``
###### العرض يضبط وفقًا لعرض الجهاز
###### مستوى التكبير الأولي هو 100%
###### النتيجة: صفحة مستجيبة سهلة القراءة على الهاتف (كما في الشكل 1)
##### بدون وسم إطار العرض
###### تعرض الصفحات بعرض قياسي لشاشة الحاسب
###### يتم تصغيرها لتلائم شاشة الهاتف
###### يحتاج المستخدم إلى تكبير الصفحة للتصفح
###### النتيجة: صفحة غير مستجيبة، نص وصور صغيرة جدًا (كما في الشكل 2)
اختبار التصميم المستجيب
محاكاة الأجهزة في مايكروسوفت إيدج
#### الغرض
##### اختبار مظهر الموقع على أجهزة مختلفة (هواتف ذكية، أجهزة لوحية)
#### خطوات فتح الأداة
##### 1. اضغط على أيقونة ... Settings and more (الإعدادات والمزيد)
##### 2. اضغط على More tools (المزيد من الأدوات)
##### 3. اضغط على Developer tools (أدوات المطور)
##### 4. اضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز)
```
نقاط مهمة
- الغرض من محاكاة الجهاز هو اختبار مظهر الموقع على أجهزة مختلفة.
- يتم الوصول إلى أداة المحاكاة من خلال قائمة "الإعدادات والمزيد" في متصفح مايكروسوفت إيدج.
- تظهر الأداة صفحة ويب (مثل صفحة مشجعي كرة القدم) كما ستظهر على جهاز محمول.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
محاكاة الأجهزة في مايكروسوفت إيدج
نوع: محتوى تعليمي
يمكنك اختبار مظهر الموقع على الأجهزة المختلفة باستخدام محاكاة الجهاز (Device Emulation) في مايكروسوفت إيدج، حيث يحاكي الموقع الإلكتروني الخاص بك على الأجهزة الأخرى مثل: الهواتف الذكية والأجهزة اللوحية.
نوع: محتوى تعليمي
لفتح أداة المحاكاة في مايكروسوفت إيدج:
نوع: محتوى تعليمي
1. اضغط على الأيقونة ... Settings and more (الإعدادات والمزيد) في الزاوية العلوية اليمنى من متصفح مايكروسوفت إيدج.
2. اضغط على More tools (المزيد من الأدوات).
3. اضغط على Developer tools (أدوات المطور).
4. اضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز).
نوع: METADATA
وزارة التعليم
257
Ministry of Education
2025 - 1447
🔍 عناصر مرئية
Football Fan Page
A simulated web browser (Microsoft Edge) displaying a 'Football Fan Page'. The browser window shows the address bar with 'File | C:/HTML/Football_Fan_Page.html', navigation buttons (back, forward, refresh, home, favorites, settings, etc.), and tabs. The web page content includes a main title, a navigation bar, and sections for 'التاريخ', 'المعرض', and 'نبذة', along with 'معلومات مفيدة' links.
📄 النص الكامل للصفحة
محاكاة الأجهزة في مايكروسوفت إيدج
يمكنك اختبار مظهر الموقع على الأجهزة المختلفة باستخدام محاكاة الجهاز (Device Emulation) في مايكروسوفت إيدج، حيث يحاكي الموقع الإلكتروني الخاص بك على الأجهزة الأخرى مثل: الهواتف الذكية والأجهزة اللوحية.
لفتح أداة المحاكاة في مايكروسوفت إيدج:
1. اضغط على الأيقونة ... Settings and more (الإعدادات والمزيد) في الزاوية العلوية اليمنى من متصفح مايكروسوفت إيدج.
2. اضغط على More tools (المزيد من الأدوات).
3. اضغط على Developer tools (أدوات المطور).
4. اضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز).
وزارة التعليم
257
Ministry of Education
2025 - 1447
--- VISUAL CONTEXT ---
**FIGURE**: Football Fan Page
Description: A simulated web browser (Microsoft Edge) displaying a 'Football Fan Page'. The browser window shows the address bar with 'File | C:/HTML/Football_Fan_Page.html', navigation buttons (back, forward, refresh, home, favorites, settings, etc.), and tabs. The web page content includes a main title, a navigation bar, and sections for 'التاريخ', 'المعرض', and 'نبذة', along with 'معلومات مفيدة' links.
Data: The simulated web page contains the following sections:
- Browser UI elements: Address bar showing 'C:/HTML/Football_Fan_Page.html', browser tabs including 'Football Fan Page', and standard navigation/control icons.
- Web Page Navigation Bar: Links labeled 'الصفحة الرئيسية', 'التاريخ', 'المعرض', 'نبذة', 'اتصل بنا'.
- Main Content Header: 'نعمل كرة القدم على جمع الناس معًا' with a subtitle 'الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.'.
- 'التاريخ' (History) Section: Contains a paragraph of text describing the history of football, starting with 'تعد كرة القدم رياضة ذات تاريخ طويل، بدأت بشكلها الحالي في منتصف القرن التاسع عشر...'.
- 'المعرض' (Gallery) Section: Displays four images related to football:
1. A group of football players in green uniforms, standing on a field.
2. A golden trophy, identified as the FIFA World Cup trophy, inside a glass display case.
3. A circular emblem with 'SAUDI ARABIA NATIONAL TEAM' text.
4. A large football stadium filled with spectators at night, illuminated by floodlights.
- 'نبذة' (About) Section: Contains a paragraph of text starting with 'من خلال هذه الصفحة يمكنك تبادل الأفكار والآراء حول فريق كرة القدم...'.
- 'معلومات مفيدة' (Useful Information) Section: Contains three clickable links: 'UEFA.com', 'Fifa.com', 'info@example.com'.
Context: Illustrates the process of using device emulation in Microsoft Edge by showing a web page as it would appear on a device.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 5 بطاقة لهذه الصفحة
ما هي الخطوة الأولى لفتح أدوات المطور (Developer tools) في متصفح مايكروسوفت إيدج؟
- أ) الضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز).
- ب) الضغط على More tools (المزيد من الأدوات).
- ج) الضغط على أيقونة ... Settings and more (الإعدادات والمزيد) في الزاوية العلوية اليمنى.
- د) الضغط على Developer tools (أدوات المطور).
الإجابة الصحيحة: c
الإجابة: الضغط على أيقونة ... Settings and more (الإعدادات والمزيد) في الزاوية العلوية اليمنى.
الشرح: 1. الخطوات المذكورة في النص متسلسلة.
2. الخطوة الأولى هي الوصول إلى القائمة الرئيسية للمتصفح.
3. هذه القائمة تسمى 'Settings and more' ورمزها ثلاث نقاط (...) وتقع في أعلى المتصفح.
تلميح: تبدأ العملية من القائمة الرئيسية للمتصفح.
التصنيف: صيغة/خطوات | المستوى: سهل
بعد فتح أدوات المطور (Developer tools) في مايكروسوفت إيدج، ما هي الخطوة المباشرة لتفعيل خاصية محاكاة الجهاز؟
- أ) الضغط على أيقونة ... Settings and more (الإعدادات والمزيد).
- ب) كتابة اسم الجهاز المراد محاكاته في شريط البحث.
- ج) الضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز).
- د) تحديد حجم الشاشة يدوياً من القوائم المنسدلة.
الإجابة الصحيحة: c
الإجابة: الضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز).
الشرح: 1. بعد فتح أدوات المطور، تظهر نافذة أو شريط أدوات.
2. ضمن هذه الأدوات، توجد أيقونة مخصصة لتفعيل أو إيقاف محاكاة الجهاز.
3. الضغط على هذه الأيقونة هو الإجراء النهائي لبدء عملية المحاكاة.
تلميح: هذه هي الخطوة الأخيرة في التسلسل المذكور لتفعيل المحاكاة.
التصنيف: صيغة/خطوات | المستوى: سهل
أي من العبارات التالية تصف بشكل صحيح وظيفة 'محاكاة الجهاز' (Device Emulation) في سياق تطوير الويب؟
- أ) برنامج لتحويل تطبيقات سطح المكتب إلى تطبيقات ويب تعمل على الهواتف.
- ب) أداة تسمح للمطور بمشاهدة وتجربة موقع الويب كما سيظهر على جهاز آخر (مثل الهاتف) دون الحاجة إلى امتلاكه فعلياً.
- ج) ميزة لتنزيل وتثبيت إصدارات مختلفة من المتصفح على نفس الجهاز.
- د) أداة لفحص سرعة اتصال الإنترنت من خلال محاكاة شبكات مختلفة.
الإجابة الصحيحة: b
الإجابة: أداة تسمح للمطور بمشاهدة وتجربة موقع الويب كما سيظهر على جهاز آخر (مثل الهاتف) دون الحاجة إلى امتلاكه فعلياً.
الشرح: 1. المحاكاة تعني إنشاء نموذج يحاكي سلوك النظام الحقيقي.
2. في تطوير الويب، تحاكي الأداة بيئة الجهاز المستهدف (الحجم، الدقة، المتصفح).
3. هذا يوفر الوقت والجهد ويسمح بإصلاح المشكلات قبل النشر للمستخدمين.
تلميح: فكر في كلمة 'محاكاة' وتعني تقليد أو محاكاة سلوك شيء ما.
التصنيف: تعريف | المستوى: متوسط
ما الهدف الرئيسي من استخدام أداة محاكاة الجهاز (Device Emulation) في متصفح مايكروسوفت إيدج؟
- أ) تحسين سرعة تحميل الموقع على الخوادم.
- ب) اختبار مظهر الموقع على الأجهزة المختلفة مثل الهواتف الذكية والأجهزة اللوحية.
- ج) حماية الموقع من الهجمات الإلكترونية.
- د) تحسين ترتيب الموقع في محركات البحث (SEO).
الإجابة الصحيحة: b
الإجابة: اختبار مظهر الموقع على الأجهزة المختلفة مثل الهواتف الذكية والأجهزة اللوحية.
الشرح: ١. أداة محاكاة الجهاز تتيح لمطوري الويب محاكاة كيفية ظهور موقع الويب وتصرفه على أجهزة متعددة.
٢. هذا الاختبار ضروري لضمان تصميم استجابي (Responsive Design) وتجربة مستخدم متسقة.
٣. الهدف الرئيسي هو اختبار المظهر والأداء قبل النشر الفعلي للموقع.
تلميح: فكر في أداة تساعد المطورين على رؤية كيفية عرض موقع الويب على شاشات بمقاسات مختلفة.
التصنيف: مفهوم جوهري | المستوى: سهل
ما هي الخطوة الأولى لفتح أداة محاكاة الجهاز (Device Emulation) في متصفح مايكروسوفت إيدج؟
- أ) الضغط على More tools (المزيد من الأدوات).
- ب) الضغط على Developer tools (أدوات المطور).
- ج) الضغط على أيقونة ... Settings and more (الإعدادات والمزيد) في الزاوية العلوية اليمنى من المتصفح.
- د) الضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز).
الإجابة الصحيحة: c
الإجابة: الضغط على أيقونة ... Settings and more (الإعدادات والمزيد) في الزاوية العلوية اليمنى من المتصفح.
الشرح: ١. الخطوة الأولى دائماً هي الوصول إلى القائمة الرئيسية لإعدادات المتصفح.
٢. هذه القائمة توجد في الزاوية العلوية اليمنى وتمثل بواسطة أيقونة النقاط الثلاث (...).
٣. من هذه القائمة يمكن الوصول إلى الأدوات الأخرى ثم أدوات المطور وأخيراً أداة المحاكاة.
تلميح: فكر في الترتيب المنطقي لفتح القوائم والأدوات في واجهة المتصفح.
التصنيف: صيغة/خطوات | المستوى: سهل