تشرح هذه المقالة كيفية إنشاء تخطيط من 3 أعمدة في CSS. تنطبق التعليمات على CSS3 والإصدارات الأقدم.

ارسم التخطيط الخاص بك

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

بعد الانتهاء من تخطيطك ، يمكنك البدء في التفكير في الأبعاد. سيكون لهذا التصميم النموذجي الأبعاد الأساسية التالية:

• لا يزيد عرضه عن 900 بكسل
• 20 بكسل ميزاب على اليسار
• 10 بكسل بين الأعمدة والصفوف
• الأعمدة التي يبلغ عرضها 250 بكسل و 300 بكسل و 300 بكسل
• الصف العلوي بطول 150 بكسل
• الصف السفلي بطول 100 بكسل

اكتب HTML / CSS أساسيًا وأنشئ عنصر حاوية

لأن هذه الصفحة ستكون صالحة لغة البرمجة المستند ، ابدأ بحاوية HTML فارغة.

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

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

صمم الحاوية

تحدد الحاوية مدى اتساع محتويات صفحة الويب ، بالإضافة إلى أي هوامش حول الخارج والحشو من الداخل. بالنسبة لهذا المستند ، يبلغ عرض الحاوية 870 بكسل مع هامش 20 بكسل على اليسار. تم إعداد الحضيض بنمط الهامش ، لكن الحشوة الموجودة على الحاوية تم صفيرها لمنع أي عناصر من أن تكون بعرض الحاوية.

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

استخدم علامة العنوان للرأس

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

) أكثر منطقية من استخدام ملف

. يمكنك تصميم العنوان بنفس طريقة تصميم div ، وتجنب العلامات الدخيلة.

يظهر HTML لصف الرأس أعلى الحاوية ويبدو كالتالي:

بعد ذلك ، لتعيين الأنماط عليه ، تمت إضافة حد أحمر في الأسفل حتى تتمكن من رؤية أين ينتهي ، وتم إلغاء الهوامش والحشو ، وتعيين العرض على 100٪ والارتفاع إلى 150 بكسل.

لا تنس أن تطفو هذا العنصر مع الطفو: left؛ منشأه. مفتاح كتابة تخطيطات CSS هو تعويم كل شيء ، حتى الأشياء التي لها نفس عرض الحاوية. بهذه الطريقة ، ستعرف دائمًا مكان تواجد العناصر على الصفحة.

أ محدد تابع لـ CSS تم تطبيق الأنماط فقط على عناصر H1 الموجودة داخل عنصر #container.

للحصول على ثلاثة أعمدة ، ابدأ ببناء عمودين

عندما تنشئ تخطيطًا من ثلاثة أعمدة باستخدام CSS ، فأنت بحاجة إلى تقسيم التخطيط الخاص بك إلى مجموعات من مجموعتين. لذلك بالنسبة لهذا التخطيط المكون من ثلاثة أعمدة ، يتم تجميع العمودين الأوسط والأيمن ووضعهما بجوار العمود الأيسر في تخطيط من عمودين حيث يبلغ عرض العمود الأيسر 250 بكسل ، ويكون عرض العمود الأيمن 610 بكسل (300 لكل من العمودين ، بالإضافة إلى 10 بكسل للمزراب بينهما معهم).

يتم تعويم العمود الموجود على اليسار إلى اليسار ، بينما يتم تعويم العمود الآخر إلى اليمين. نظرًا لأن العرض الإجمالي لكلا العمودين يبلغ 860 بكسل ، فهناك هامش 10 بكسل بينهما.

أضف عمودين داخل العمود الثاني العريض

لإنشاء الأعمدة الثلاثة ، أضف قسمي div داخل العمود الثاني الأوسع ، تمامًا كما أضفت قسمين داخل عمود الحاوية في الخطوة الأخيرة.

نظرًا لأن هذين الصندوقين العريضين 300 بكسل موجودان داخل صندوق عريض 610 بكسل ، فسيكون هناك مرة أخرى ميزاب 10 بكسل بينهما.

أضف في التذييل

الآن بعد أن تم تنسيق بقية الصفحة ، يمكنك إضافتها في التذييل. استخدم عنصر div الأخير بمعرف "تذييل الصفحة" ، وأضف محتوى حتى تتمكن من رؤيته. يمكنك أيضًا إضافة حد في الأعلى ، حتى تعرف من أين يبدأ.

أضف في الأنماط الشخصية والمحتوى الخاص بك

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