تنسيق شريط التصفح

📚 معلومات الصفحة

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 تنسيق شريط التصفح

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

شريط التصفح: عنصر مهم في الموقع لتسهيل الاستخدام.

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

```markmap

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

مراحل الإنشاء

3. التنفيذ

#### تقسيم الصفحة إلى أقسام

##### استخدام HTML و CSS

###### وسم التقسيم `

حاوية لعناصر HTML
لتطبيق أنماط CSS على المجموعة

###### خاصية `class`

لتطبيق نفس التنسيق على عناصر متعددة

#### تخطيط العناصر

##### مثال تطبيقي: صفحة مشجعي كرة القدم

###### Menu

يحتوي على قائمة روابط التنقل (الصفحة الرئيسية، التاريخ، المعرض، نبذة، اتصل بنا)
لون الخلفية: `#426C35`

###### Main

يحتوي على المحتوى الرئيسي
لون الخلفية: `#f5f5f5`

####### ألبوم الصور

مكان لتبادل الأفكار والآراء
يمكن إضافة صور أو مقالات عبر نموذج
صور مرتبطة بكرة القدم (كأس العالم، الملعب، الاستاد، شعار السعودية)

####### معلومات مفيدة

طرق التواصل: البريد الإلكتروني (info@example.com)
مواقع زيارة: Fifa.com، UEFA.com

###### Photos (اليوم الصور)

قسم لعرض مجموعة واسعة من الصور
صور المباريات واللاعبين والفرق والبطولات
يهدف لتوفير تجربة بصرية غنية
لون الخلفية: `#F0EDE4`

###### Footer (نبذة)

قسم يحتوي على معلومات مفيدة
يلخص أهداف الصفحة
لون الخلفية: `#777777`

#### تطبيق الأنماط باستخدام CSS

##### إنشاء ملف CSS

يُنشأ ملف باسم `style.css` في مجلد الصفحات (مثال: في محرر Visual Studio Code)

##### ربط CSS بـ HTML

استخدام وسم `` داخل قسم `` في ملف HTML
مثال: ``

##### تعيين الخطوط الأساسية

الخطوة الأساسية: تعيين خط عام للنصوص غير المصممة
مثال: `font-family: 'Tahoma', 'Open Sans', sans-serif;`

##### خصائص CSS للخلفية

###### background-color

لتعيين لون خلفية العناصر

###### background-image

لتعيين صورة خلفية للعناصر

###### background-repeat

لتحديد كيفية تكرار صورة الخلفية

###### background-position

لتحديد موضع صورة الخلفية

##### محددات CSS

###### محدد class

الصيغة العامة: `.اسم_class`
مثال: `.menu { background-color: #426C35; }`
تحديد عنصر معين داخل class: `اسم_العنصر.اسم_class`
مثال: `.footer p { color: #f5f5f5; }`

##### التحكم في تدفق المحتوى

###### خاصية تجاوز السعة (Overflow)

للتحكم في المحتوى الأكبر من مساحة الصفحة
قيمها: visible, hidden, scroll, auto
القيمة `auto`: يتم قص المحتوى الزائد وإضافة شريط تمرير عند الحاجة

#### التحكم في تخطيط العناصر

##### نموذج الصندوق (Box Model)

###### المفهوم

تتعامل CSS مع كل عنصر HTML كما لو كان له صندوق خاص
يسمح بالتحكم في الأبعاد والحدود والفراغ حول كل صندوق

###### خصائص نموذج الصندوق

####### الإطار (Border)

حدود تفصل حافة كل صندوق عن الآخر
قد تكون مرئية أو غير مرئية

####### الهامش (Margin)

المساحة خارج حدود الإطار

####### الفراغ (Padding)

المساحة بين الإطار والمحتوى الداخلي

###### التحكم في الفراغ (Padding)

يمكن تحديد قيم لكل جانب من جوانب الفراغ:
`padding-top`: الفراغ العلوي
`padding-right`: الفراغ في الجهة اليمنى
`padding-bottom`: الفراغ السفلي
`padding-left`: الفراغ في الجهة اليسرى
يمكن استخدام نفس الطريقة المختصرة لتحديد الهامش (Margin)

###### تطبيق عملي للتنسيق

####### محاذاة النص (text-align)

تُستخدم لتوسيط النص داخل العنصر.

####### تطبيق الخصائص على الأقسام

`.main`

- `overflow: auto;`

- `text-align: center;`

- `background-color: #f5f5f5;`

- `padding-top: 20px;`

- `padding-bottom: 20px;`

`.photos`

- `overflow: auto;`

- `padding-top: 20px;`

- `padding-bottom: 40px;`

- `text-align: center;`

- `background-color: #F0EDE4;`

`.footer`

- `overflow: auto;`

- `padding-top: 20px;`

- `padding-bottom: 20px;`

- `text-align: center;`

- `background-color: #777777;`

###### ملاحظة مهمة

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

#### محتوى صفحة مشجعي كرة القدم

##### الهدف

تشجيع اللاعبين أثناء المباراة.

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

بدأت في إنجلترا منتصف القرن التاسع عشر.
الرياضة الأكثر شعبية في العالم.
يتابعها أكثر من 250 مليون شخص في أكثر من 200 دولة.
ظاهرة عالمية تجمع الناس من مختلف الثقافات.

##### نبذة عن الصفحة

مكان لاكتشاف كل ما يتعلق بكرة القدم.
التواصل مع محبي كرة القدم الآخرين عبر الصور أو التعليقات.

##### معلومات مفيدة

البريد الإلكتروني: info@resample.com
مواقع زيارة: Fifa.com، UEFA.com

##### العناصر المرئية

###### Figure 1: Saudi National Team

تمثل جانب المنتخب الوطني في كرة القدم.

###### Figure 2: FIFA World Cup Trophy

تمثل الجائزة الكبرى في كرة القدم الدولية.

###### Figure 3: Football Stadium

توضح مكان إقامة المباريات.

#### التحكم في حجم ومحاذاة الصور

##### استخدام قواعد CSS

لتحديد حجم ومحاذاة الصور.
لجعل الصور أكثر جاذبية باستخدام خصائص أخرى.

##### تطبيق قواعد CSS على الصور

داخل قسم `.photos` باستخدام محدد `.photos img`.

##### خصائص CSS المستخدمة للصور

###### الإطار (Border)

`border-style: solid;`
`border-width: 2px;`
`border-color: #426C35;`

###### نصف قطر الإطار (border-radius)

`border-radius: 6px;`
لتغيير مظهر حواف الصورة.

###### الهامش (Margin)

`margin: 2px;`

###### ملاءمة الكائن (object-fit)

`object-fit: cover;`

###### موضع الكائن (object-position)

`object-position: top;`

##### المعرض (Photos)

قسم لعرض الصور بعد تطبيق أنماط CSS عليه.

#### تنسيق شريط التصفح

##### تنسيق قائمة التنقل الرئيسية (`.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;`

##### ملاحظات جانبية

`li`: يشير إلى قائمة بسيطة.
`a li`: يشير إلى قائمة عناصرها عبارة عن روابط.
ضع عناصر القائمة في سطر واحد.
تغير لون الأزرار عند تمرير الفأرة عليها.

```

نقاط مهمة

عملية تصميم شريط التصفح مهمة جداً لتسهيل استخدام الموقع.
يتم تنسيق شريط التصفح باستخدام محددات CSS للفئة `.menu`.
يتم عرض عناصر القائمة (`li`) في سطر واحد باستخدام `display: inline-block;`.
يتم تخصيص شكل الروابط (`a`) داخل القائمة بالأبعاد، الألوان، الحواف، والفراغات.
يغير تأثير `:hover` لون خلفية الرابط عند تمرير الفأرة عليه.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

عملية تصميم شريط التصفح مهمة جداً نظراً لدورها في تسهيل استخدام موقعك الإلكتروني. سأستنسق الآن العناصر الموجودة في شريط التصفح.

نوع: محتوى تعليمي

.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;
}

نوع: محتوى تعليمي

يشير وسم li إلى قائمة بسيطة.

نوع: محتوى تعليمي

يشير وسم a li إلى قائمة عناصرها عبارة عن روابط.

نوع: محتوى تعليمي

ضع عناصر القائمة في سطر واحد.

نوع: محتوى تعليمي

تغير لون الأزرار عند تمرير الفأرة عليها.

نوع: METADATA

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

📄 النص الكامل للصفحة

--- SECTION: تنسيق شريط التصفح ---
عملية تصميم شريط التصفح مهمة جداً نظراً لدورها في تسهيل استخدام موقعك الإلكتروني. سأستنسق الآن العناصر الموجودة في شريط التصفح.

.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;
}

يشير وسم li إلى قائمة بسيطة.

يشير وسم a li إلى قائمة عناصرها عبارة عن روابط.

ضع عناصر القائمة في سطر واحد.

تغير لون الأزرار عند تمرير الفأرة عليها.

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

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 3 بطاقة لهذه الصفحة

في CSS، ما هو الغرض الرئيسي من الخاصية `display: inline-block;` عند تطبيقها على عناصر القائمة (`<li>`) داخل شريط تصفح؟

أ) لجعل عناصر القائمة تظهر ككتلة (block) تبدأ من سطر جديد.
ب) لإخفاء عناصر القائمة عن المستخدم حتى يتم تمرير الفأرة عليها.
ج) لوضع عناصر القائمة في سطر واحد مع السماح بتطبيق أبعاد (عرض وارتفاع) عليها.
د) لجعل النص داخل عناصر القائمة يتم محاذاته إلى الوسط فقط.

الإجابة الصحيحة: c

الإجابة: لوضع عناصر القائمة في سطر واحد مع السماح بتطبيق أبعاد (عرض وارتفاع) عليها.

الشرح: 1. الخاصية `display: inline-block;` تجمع بين خصائص `inline` و `block`. 2. تسمح `inline` بوضع العناصر في سطر واحد (جانباً إلى جنب). 3. تسمح `block` بتطبيق خصائص الأبعاد (width, height) والهوامش (margin, padding) على العنصر. 4. بالتالي، تمكننا من إنشاء أزرار شريط تصفح مرتبة في صف مع أبعاد محددة.

تلميح: تذكر أن الخاصية `inline` تضع العناصر في سطر، لكنها لا تقبل الأبعاد. ماذا تضيف `block` إلى هذه الخاصية؟

التصنيف: مفهوم جوهري | المستوى: متوسط

في CSS، ما هي الخاصية المسؤولة عن تغيير لون خلفية زر رابط (`<a>`) داخل شريط التصفح عندما يمر المستخدم بالفأرة فوقه؟

أ) محدد (selector) الزائف `:active` مع خاصية `color`.
ب) خاصية `text-decoration` بقيمة `none`.
ج) محدد (selector) الزائف `:hover` مع خاصية `background-color`.
د) خاصية `font-weight` بقيمة `bold` داخل قاعدة العنصر الأساسي.

الإجابة الصحيحة: c

الإجابة: محدد (selector) الزائف `:hover` مع خاصية `background-color`.

الشرح: 1. في CSS، نستخدم محددات زائفة (pseudo-classes) لتطبيق أنماط بناءً على حالة العنصر. 2. المحدد الزائف `:hover` ينشط عندما يمر مؤشر الفأرة (mouse) فوق العنصر. 3. لتغيير لون الخلفية، نستخدم خاصية `background-color` داخل قاعدة CSS الخاصة بالمحدد `:hover`. 4. مثال من النص: `.menu li a:hover { background-color: #d6d599; }`

تلميح: يبدأ اسم هذه الخاصية بحرفين نقطتين (:) ويرتبط بفعل يقوم به المستخدم.

التصنيف: تعريف | المستوى: سهل

أي من خصائص CSS التالية، عند تطبيقها على عنصر رابط (`<a>`) داخل قائمة، تمنع ظهور الخط التحتي (Underline) للنص؟

أ) font-style: italic;
ب) text-decoration: none;
ج) border-radius: 4px;
د) display: inline-block;

الإجابة الصحيحة: b

الإجابة: text-decoration: none;

الشرح: 1. الخاصية `text-decoration` في CSS تتحكم في تزيين النص. 2. القيمة الافتراضية للروابط (`<a>`) هي `underline` (خط تحتي). 3. لتعطيل هذا الخط التحتي وجعل الرابط يبدو كنص عادي (أو حسب التصميم المطلوب)، نستخدم القيمة `none`. 4. مثال من النص: `.menu li a { ... text-decoration: none; ... }`

تلميح: ترتبط هذه الخاصية بتنسيق النص مثل الخطوط التحتية أو فوقية.

التصنيف: صيغة/خطوات | المستوى: سهل