أهداف التعلم

• أن تحدد صفحات الموقع والغرض من كل صفحة والروابط اللازمة للتنقل بينها.
• أن تبني هيكلًا مشتركًا لصفحات الموقع.
• أن تستخدم وسوم HTML الدلالية.
• أن تنسق الصفحة بـ CSS.
• أن تطبق مبادئ التصميم المتجاوب.

شرح الدرس

صفحات الموقع والغرض منها (المرحلة الأولى من المشروع)

تصميم صفحات الموقع هو المرحلة الأولى من مراحل تنفيذ المشروع، وفيها نحدد صفحات الويب: اسم كل صفحة، والغرض منها، ومحتواها، ونضع تصورًا لتصميم الصفحة الرئيسة والارتباطات التشعبية (Hyperlinks) التي نتنقل بها بين الصفحات.

وتوجد برامج وتطبيقات جاهزة، مثل Expression Web، تنشئ صفحات الويب الخاصة بالمشروع بسرعة وسهولة. وبعد تحديد الصفحات نحدد الهيكل البنائي لقاعدة البيانات في المرحلة الثانية.

ما يلي في هذا الدرس إثراء عملي خارج الكتاب يوضح كيف تُبنى الصفحات بـ HTML وتنسق بـ CSS.

البنية المشتركة للصفحة

كل صفحات الموقع تشترك في:

• الرأس (Header): اسم الموقع وشعاره.
• شريط التنقل (Nav): روابط الصفحات الرئيسية.
• المحتوى الرئيسي (Main): يختلف من صفحة لأخرى.
• التذييل (Footer): حقوق وبيانات التواصل.

هيكل HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>قاموس مصطلحات الكمبيوتر المصور</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>قاموس مصطلحات الكمبيوتر</h1></header>
  <nav>
    <a href="index.php">الرئيسية</a>
    <a href="Search_term.php">بحث عن مصطلح</a>
    <a href="Add_term.php">إدخال مصطلح</a>
    <a href="Help.php">مساعدة</a>
  </nav>
  <main>
    <article class="term-card">
      <h2>المعالج (Processor)</h2>
      <img src="images/cpu.png" alt="صورة معالج">
      <p>الجزء المسؤول عن تنفيذ التعليمات داخل الحاسب.</p>
    </article>
  </main>
  <footer>مشروع طلاب الصف الثاني الثانوي</footer>
</body>
</html>

• lang="ar" dir="rtl": لغة عربية واتجاه من اليمين إلى اليسار.
• meta charset="UTF-8": لعرض الحروف العربية صحيحة.
• meta viewport: لضبط العرض على الهواتف.
• alt: نص بديل للصورة يفيد قارئات الشاشة ويظهر إذا لم تُحمّل الصورة.

التنسيق بـ CSS

body {
  font-family: Tahoma, Arial, sans-serif;
  margin: 0;
  background: #f5f7fa;
  color: #222;
}
header, footer {
  background: #0b7285;
  color: #fff;
  padding: 16px;
  text-align: center;
}
nav a {
  margin: 0 8px;
  color: #0b7285;
}
.term-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin: 12px;
}
.term-card img {
  max-width: 100%;
  height: auto;
}

مبادئ التصميم الجيد

• التباين: لون نص واضح على خلفية فاتحة.
• الاتساق: الألوان والخطوط نفسها في كل الصفحات.
• البساطة: مساحات فارغة كافية، ومحتوى غير مزدحم.
• سهولة التنقل: روابط واضحة في مكان ثابت.

التصميم المتجاوب

الموقع المتجاوب يتكيف مع حجم الشاشة. ومن أدواته:

• max-width: 100% للصور.
• استعلامات الوسائط لتغيير التنسيق على الشاشات الصغيرة:

@media (max-width: 600px) {
  nav a { display: block; margin: 6px 0; }
}

أسئلة للتدريب

1. اذكر صفحات موقع القاموس والغرض من كل صفحة.
2. اذكر الأجزاء المشتركة في صفحات الموقع.
3. ما فائدة dir="rtl" وcharset="UTF-8"؟
4. لماذا نكتب الخاصية alt للصور؟
5. اكتب قاعدة CSS تجعل لون عناوين h2 أزرق.
6. ما المقصود بالتصميم المتجاوب؟ واذكر وسيلتين لتحقيقه.