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

📚 صفحة ويب "Football Fan Page"

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

التصميم المستجيب: أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم.

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

```markmap

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

أنواع CSS

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

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

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

تنظيم HTML

استخدام وسم

ودالة 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 (تبديل محاكاة الجهاز)

مثال تطبيقي: صفحة "Football Fan Page"

#### هيكل الصفحة

##### شريط التنقل (Navigation Bar)

###### الصفحة الرئيسية

###### المعرض

###### التاريخ

###### نبذة

###### اتصل بنا

##### المحتوى الرئيسي

###### عنوان: "نعمل كرة القدم على جمع الناس معًا"

###### هدف الجمهور: تشجيع اللاعبين أثناء المباراة

###### قسم "التاريخ"

####### نشأت كرة القدم بشكلها الحالي في إنجلترا منتصف القرن التاسع عشر.

####### ظهرت أندية غير منظمة في القرن الخامس عشر.

####### تأسست أندية رسمية في أواخر القرن التاسع عشر.

####### استمرت الأندية في المناطق الأكثر ثراءً حيث كان الناس لا يعملون يوم السبت.

###### قسم "المعرض"

####### صورة لفريق كرة قدم يرتدي زي أخضر وأبيض.

#### اختبار الصفحة

##### استخدام أدوات المطور (Developer Tools) في المتصفح.

##### شريط أدوات المطور يحتوي على:

###### محاكاة الأبعاد (Dimensions): Responsive, 1513 x 1300.

###### علامات تبويب: Console, Elements, Sources, Network, إلخ.

```

نقاط مهمة

• الصفحة هي مثال عملي لموقع ويب، يحتوي على شريط تنقل وأقسام محتوى (نبذة، تاريخ، معرض).
• يتم اختبار استجابة تصميم الموقع باستخدام أداة "محاكاة الجهاز" ضمن "أدوات المطور" في المتصفح.
• أداة المطور تتيح رؤية أبعاد الصفحة (مثل 1513 x 1300) واختبارها على أحجام شاشات مختلفة.

Browser Window (Top): Tab title: Football Fan Page. Address bar: C:/HTML/Football_Fan_Page.html. Browser menu (right side, expanded): New tab (Ctrl+T), New window (Ctrl+N), New InPrivate window (Ctrl+Shift+N), Zoom - 100% + (Ctrl+O), Favorites (Ctrl+P), Collections (Ctrl+Shift+S), History (Ctrl+Shift+X), Downloads (Ctrl+F), Apps (Ctrl+Shift+U), Extensions, Microsoft Rewards, Performance, Print (Ctrl+P), Web capture (Ctrl+Shift+S), Web select (Ctrl+Shift+X), Share (Ctrl+F), Find on page (Ctrl+Shift+U), Read aloud, More tools > (highlighted with '2'), Settings, Help and feedback, Close Microsoft Edge, Managed by your organization. Browser context menu (right side): Save page as (Ctrl+S), Name window..., Cast media to device, Cite this, Math Solver, Pin to taskbar, Pin to Start, Launch taskbar pinning wizard, Browser task manager (Shift+Esc), Developer tools (Ctrl+Shift+I) (highlighted with '3').

الصفحة الرئيسية | المعرض | التاريخ | نبذة | اتصل بنا

نعمل كرة القدم على جمع الناس معًا

الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.

التاريخ

كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وظهرت أندية كرة القدم عند القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية. ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. ويعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات.

المعرض

صورة لفريق كرة قدم

Browser Window (Bottom): Tab title: Football Fan Page. Address bar: C:/HTML/Football_Fan_Page.html. Developer tools bar: Dimensions: Responsive, 1513 x 1300, 50%, No throttling. Tabs: Console (highlighted with '4'), Elements, Sources, Network, Performance, Memory, Application, Security, Lighthouse. Filter bar: top, Filter, Default lev.

258

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

Browser Window (Top): Tab title: Football Fan Page. Address bar: C:/HTML/Football_Fan_Page.html. Browser menu (right side, expanded): New tab (Ctrl+T), New window (Ctrl+N), New InPrivate window (Ctrl+Shift+N), Zoom - 100% + (Ctrl+O), Favorites (Ctrl+P), Collections (Ctrl+Shift+S), History (Ctrl+Shift+X), Downloads (Ctrl+F), Apps (Ctrl+Shift+U), Extensions, Microsoft Rewards, Performance, Print (Ctrl+P), Web capture (Ctrl+Shift+S), Web select (Ctrl+Shift+X), Share (Ctrl+F), Find on page (Ctrl+Shift+U), Read aloud, More tools > (highlighted with '2'), Settings, Help and feedback, Close Microsoft Edge, Managed by your organization. Browser context menu (right side): Save page as (Ctrl+S), Name window..., Cast media to device, Cite this, Math Solver, Pin to taskbar, Pin to Start, Launch taskbar pinning wizard, Browser task manager (Shift+Esc), Developer tools (Ctrl+Shift+I) (highlighted with '3'). --- SECTION: Webpage Navigation --- الصفحة الرئيسية | المعرض | التاريخ | نبذة | اتصل بنا نعمل كرة القدم على جمع الناس معًا الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة. --- SECTION: التاريخ --- التاريخ كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وظهرت أندية كرة القدم عند القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية. ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. ويعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. --- SECTION: المعرض --- المعرض --- SECTION: صورة فريق كرة قدم --- صورة لفريق كرة قدم Browser Window (Bottom): Tab title: Football Fan Page. Address bar: C:/HTML/Football_Fan_Page.html. Developer tools bar: Dimensions: Responsive, 1513 x 1300, 50%, No throttling. Tabs: Console (highlighted with '4'), Elements, Sources, Network, Performance, Memory, Application, Security, Lighthouse. Filter bar: top, Filter, Default lev. 258 وزارة التعليم Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: فريق كرة قدم Description: A photograph of a football team consisting of approximately 11 players, wearing green and white uniforms, standing on a football field. The players are smiling and looking towards the camera. Stadium lights and stands are visible in the background. One player has the number '21' on his jersey. Context: This image is part of the 'Gallery' section of the 'Football Fan Page' webpage, illustrating the content.