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

📚 إظهار المساطر (Rulers)

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

مساطر الصفحة (Rulers): وظيفة إضافية تتيح قياس المسافات في الصفحة الإلكترونية بالبكسل (Pixel). توجد مسطرتان: واحدة للعرض (Width) والأخرى للارتفاع (Height).

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

```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, إلخ.

أدوات القياس

مساطر الصفحة (Rulers)

#### الوظيفة

##### قياس المسافات في الصفحة الإلكترونية بالبكسل (Pixel)

#### أنواعها

##### مسطرة العرض (Width)

##### مسطرة الارتفاع (Height)

#### طريقة الإظهار

##### 1. اضغط على أيقونة "More options" (المزيد من الخيارات).

##### 2. اضغط على Show rulers (إظهار المساطر).

```

نقاط مهمة

• مساطر الصفحة هي أداة قياس في أدوات المطور (Developer Tools).
• تقيس المسافات بوحدة البكسل.
• لإظهارها: نفتح قائمة "More options" ثم نختار "Show rulers".

إظهار المساطر (Rulers)

مساطر الصفحة و وظيفة إضافية تتيح لك قياس المسافات في الصفحة الإلكترونية بالبكسل (Pixel)، وتوجد مسطرتان للصفحة إحداهما للعرض (Width) والأخرى للارتفاع (Height).

لإظهار المساطر:

اضغط على الأيقونة "More options" (المزيد من الخيارات).

اضغط على Show rulers (إظهار المساطر).

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

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

تعد كرة القدم رياضة ذات تاريخ طويل، تمثلت بتشكيلها الحالي في إنجلترا في منتصف القرن التاسع عشر. حيث أصبحت اللعبة الأكثر شعبية في العالم، حيث يمارسها أكثر من ٢٥٠ مليون لاعب في أكثر من ٢٠٠ دولة حول العالم، مما يجعلها الرياضة الأكثر شعبية في العالم. لقد حققت كرة القدم نجاحاً هائلاً في جميع أنحاء العالم، حيث يتابعها المليارات من المشجعين في جميع أنحاء العالم. لقد أصبحت كرة القدم جزءاً لا يتجزأ من الثقافة العالمية، حيث تلعب دوراً هاماً في تشكيل الهوية الوطنية وتعزيز التفاهم بين الثقافات.

المعرض

SAUDI ARABIA NATIONAL TEAM

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

إظهار المساطر (Rulers) مساطر الصفحة و وظيفة إضافية تتيح لك قياس المسافات في الصفحة الإلكترونية بالبكسل (Pixel)، وتوجد مسطرتان للصفحة إحداهما للعرض (Width) والأخرى للارتفاع (Height). لإظهار المساطر: اضغط على الأيقونة "More options" (المزيد من الخيارات). اضغط على Show rulers (إظهار المساطر). تعمل كرة القدم على جمع الناس مقولة الهدف من حظور الجمهور في هذه اللعبة هو شد الجميع للاعبين في أثناء المباراة. تعد كرة القدم رياضة ذات تاريخ طويل، تمثلت بتشكيلها الحالي في إنجلترا في منتصف القرن التاسع عشر. حيث أصبحت اللعبة الأكثر شعبية في العالم، حيث يمارسها أكثر من ٢٥٠ مليون لاعب في أكثر من ٢٠٠ دولة حول العالم، مما يجعلها الرياضة الأكثر شعبية في العالم. لقد حققت كرة القدم نجاحاً هائلاً في جميع أنحاء العالم، حيث يتابعها المليارات من المشجعين في جميع أنحاء العالم. لقد أصبحت كرة القدم جزءاً لا يتجزأ من الثقافة العالمية، حيث تلعب دوراً هاماً في تشكيل الهوية الوطنية وتعزيز التفاهم بين الثقافات. المعرض SAUDI ARABIA NATIONAL TEAM وزارة التعليم 259 Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: Developer Tools Description: A dropdown menu from the developer tools in a web browser. It shows options like 'Show media queries', 'Show rulers', 'Add device pixel ratio', 'Add device type', 'Capture screenshot', 'Capture full size screenshot', 'Reset to defaults', and 'Close DevTools'. Two numbered callouts point to specific menu items. Context: Illustrates how to enable and use the ruler tool in browser developer tools for measuring page elements.