مقدمة

مرحبًا بكم في الدرس الرابع من دورة تعلم HTML و CSS! في هذا الدرس، سنتناول التقنيات المتقدمة في CSS التي تساعدك على إنشاء تخطيطات صفحات ويب احترافية وجذابة. سنغطي موضوعات مثل تخطيطات الشبكة (Grid Layout)، نموذج Flexbox، والاستجابة لتغيرات حجم الشاشة (Responsive Design). هذه التقنيات ستساعدك على تصميم صفحات ويب تتناسب مع مختلف الأجهزة والشاشات.

1. تخطيطات الشبكة (CSS Grid Layout)

1.1 مقدمة عن Grid Layout

تخطيط الشبكة (Grid Layout) هو نظام تخطيط ثنائي الأبعاد يتيح لك تصميم تخطيطات معقدة بشكل بسيط ومنظم. يمكنك باستخدام CSS Grid إنشاء شبكة من الصفوف والأعمدة وتحديد كيفية توزيع العناصر بداخلها.

1.2 إنشاء شبكة أساسية

لنبدأ بإنشاء شبكة بسيطة تتكون من صفوف وأعمدة. جرب كتابة الكود التالي:

<!DOCTYPE html>
<html>
<head>
    <title>مثال على Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .grid-item {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>
شرح الكود
  • .grid-container: تمثل الحاوية الرئيسية للشبكة.
  • display: grid;: تعريف الحاوية كشبكة.
  • grid-template-columns: auto auto auto;: تحديد ثلاثة أعمدة بعرض تلقائي.
  • gap: 10px;: تحديد مسافة بين عناصر الشبكة.
1.3 تخصيص حجم الأعمدة والصفوف

يمكنك تخصيص حجم الأعمدة والصفوف باستخدام وحدات قياس مثل fr، %، و px.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
}

2. نموذج Flexbox

2.1 مقدمة عن Flexbox

نموذج Flexbox هو نظام تخطيط أحادي الأبعاد يتيح لك توزيع العناصر بشكل مرن وسهل. يُعد Flexbox مناسبًا لتخطيطات الأعمدة أو الصفوف المتغيرة.

2.2 إنشاء تخطيط Flexbox

لنقم بإنشاء تخطيط باستخدام Flexbox. جرب كتابة الكود التالي:

<!DOCTYPE html>
<html>
<head>
    <title>مثال على Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .flex-item {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            margin: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>
شرح الكود
  • .flex-container: تمثل الحاوية الرئيسية لـ Flexbox.
  • display: flex;: تعريف الحاوية كنموذج Flexbox.
  • flex-item: تمثل العناصر الفردية داخل الحاوية.
2.3 تحديد اتجاه المحور

يمكنك تحديد اتجاه العناصر داخل Flexbox باستخدام خاصية flex-direction.

.flex-container {
    display: flex;
    flex-direction: column; /* أو row */
}

3. الاستجابة لتغيرات حجم الشاشة (Responsive Design)

3.1 استخدام وحدات القياس النسبية

تُستخدم وحدات القياس النسبية مثل % و vw و vh لجعل تصميمك متجاوبًا مع مختلف أحجام الشاشات.

.container {
    width: 80%;
    height: 50vh;
}
3.2 استخدام الوسائط الاستعلامية (Media Queries)

تتيح لك الوسائط الاستعلامية (Media Queries) تطبيق أنماط CSS مختلفة بناءً على حجم الشاشة أو الجهاز.

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

4. أمثلة وتطبيقات عملية

مثال 1: صفحة ويب بتخطيط Grid متجاوب

لنقم بإنشاء صفحة ويب تحتوي على تخطيط Grid متجاوب. جرب كتابة الكود التالي:

<!DOCTYPE html>
<html>
<head>
    <title>تخطيط Grid متجاوب</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .grid-item {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            text-align: center;
        }
        @media (max-width: 600px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>
مثال 2: صفحة ويب بتخطيط Flexbox متجاوب

لنقم بإنشاء صفحة ويب تحتوي على تخطيط Flexbox متجاوب. جرب كتابة الكود التالي:

<!DOCTYPE html>
<html>
<head>
    <title>تخطيط Flexbox متجاوب</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .flex-item {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            margin: 10px;
            text-align: center;
            flex: 1 1 200px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
    </div>
</body>
</html>

5. تمرين عملي

حان الوقت لتطبيق ما تعلمته. حاول إنشاء صفحة HTML تحتوي على:

  1. تخطيط Grid يتكون من صفوف وأعمدة تتكيف مع حجم الشاشة.
  2. تخطيط Flexbox يتكيف مع حجم الشاشة.
  3. استخدام الوسائط الاستعلامية لتطبيق أنماط CSS مختلفة بناءً على حجم الشاشة.
الحل المقترح:
<!DOCTYPE html>
<html>
<head>
    <title>تمرين عملي</title>
    <style>
        /* تخطيط Grid */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .grid-item {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            text-align: center;
        }

        /* تخطيط Flexbox */
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .flex-item {
            background-color: #0056b3;
            color: white;
            padding: 20px;
            margin: 10px;
            text-align: center;
            flex: 1 1 200px;
        }

        /* وسائط استعلامية */
        @media (max-width: 800px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .flex-container {
                flex-direction: column;
            }
        }

        @media (max-width: 600px) {
            .grid-container {
                grid-template-columns: 1fr;
            }


        }
    </style>
</head>
<body>
    <h1>تمرين عملي على Grid و Flexbox</h1>
    <h2>تخطيط Grid</h2>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
    </div>

    <h2>تخطيط Flexbox</h2>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
    </div>
</body>
</html>

6. مراجعة شاملة

قبل أن ننهي هذا الدرس، دعنا نراجع ما تعلمناه:

  • فهمنا كيفية استخدام CSS Grid Layout لإنشاء تخطيطات شبكية.
  • تعلمنا كيفية استخدام Flexbox لإنشاء تخطيطات مرنة.
  • تعرفنا على كيفية جعل التصميم متجاوبًا باستخدام الوسائط الاستعلامية ووحدات القياس النسبية.
  • طبقنا أمثلة عملية على تخطيطات Grid و Flexbox متجاوبة.

7. خاتمة

في هذا الدرس، تعلمنا كيفية استخدام تقنيات CSS المتقدمة لتنسيق صفحات الويب الخاصة بك بشكل احترافي وجذاب. تأكد من ممارسة كتابة الأكواد وتجريب أمثلة مختلفة لتحسين مهاراتك. في الدرس التالي، سنتعلم كيفية استخدام JavaScript لإضافة تفاعلية إلى صفحات الويب الخاصة بك. أراك في الدرس القادم!

كُتب بواسطة

Akhmad Abdulrahman

مدون ومصمم مواقع الانترنت لتقديم افضل الخدمات مجانا ولإثراء المحتوى العربي